Web Development Workflow

Overview of Tools

• Tooling in the web app development lifecycle
• Tooling & the Webapp Development Stack
  • URL's from Paul Irish's talk: Tooling & The Webapp Development Stack
• Frontend development – then, now and the future (presentation)
• A Modern Web Designer's Workflow by chriscoyier

Design Workflow

• My (Simple) Workflow To Design And Develop A Portfolio Website

Javascript Development Workflow of 2013

Video: Javascript Development Workflow of 2013 by Paul Irish (PDF)

• A Baseline for Front-End Developers

Shell

• • Shell customizations: http://dotfiles.github.io/
  • Faves: z script (for jumping), server alias
  • Siehe Terminal.

Editor

• • learn it well, most important
  • Code linting is your first unit test.
• Realtime Feedback
  • live linting
  • live recompilation
  • live reload

HTML

• Zen Coding
• Emmet

CSS

Icons

• http://fortawesome.github.io/Font-Awesome/
• http://fontcustom.com/

Images

• Sprites
  • Spritemapper
  • Glue
  • SmartSprites - with Eclipse plugin.
  • grunt-spritesmith

Javascript

• • Modules / Dependency management
    • AMD modules
    • CommonJS modules
    • ECMAScript Harmony modules
    • Minispade require (ember.js example)
  • Tricks:
    • Template precompilation - into functions in a build step and ship the compiled templates.
    • Custom build output based on build-time forks. (require.js optimizier)
    • More module magic from Alex Sexton (MVC MODULE MAGIC)
• Package Management - cooming soon.
• In-Browser Devtools
  • sourceURL (Source Mapping, Source Mapping Compile Demo)
  • source maps - full live debugging on source files with Chrome Dev tools.
  • Navigating scripts
• Mobile
  • Test in Chrome
    • Emulate touches, override device metrics
  • Emulators & Browserstack
  • Real device & Adobe Shadow
  • Chrome on Android w/ DevTools

Testing

• Jasmin, QUnit or Mocha
• Execute tests in a variety of settings:
  • In the Browser
    • Secrets of the Browser Developer Tools
    • Chrome DevTools - Authoring & development workflow
  • In a headless browser on-demand via cmd line
  • In a headless browser post-push. Continuous Integration
    • https://travis-ci.org/ - on every commit - test.
  • In multiple browsers via cmd line
    • bunyip -f test/index.html
  • In multiple browsers in the cloud via cmd line (e.g. with BrowserStack)
    • bunyip -f test/index.html -b ios
• http://opendevicelab.com/

Grunt

see Grunt.

Others

• Resolve your dependency chain
• concatenate
• compile
• flatten your CSS @imports
• Minify
  • Online: http://refresh-sf.com/yui/
• Beautify Javascript:
  • Online: http://jsbeautifier.org/
• Remove debugging statements
• Compress images
  • Online: http://tinypng.org/
• Precompile templates
• Run tests in a variety of environments
• Revs asset paths for caching
• Affirm code quality

Front-End Development Workflow

• Front-end Process - Flat Builds and Automation, Part 1: Introduction

After Deployment

Client-Side Error Tracking

• errorception

Projects to check out

• modjs
• Grunt
  • http://merrickchristensen.com/articles/gruntjs-workflow.html
• LiveReload
• Shadow
• CodeKit
• Brunch - recompiler
• WebStorm - unit testing, ...

Principles

• DRY - Don't Repeat Yourself
  • don't type ./build.sh everytime you save a file
  • don't ftp everytime up you update the site's release branch.
• Learn from other developers.
• Share what you've learned.

IDEs

• Aptana Studio

Others

• JavaScript Tooling JSConf. April 2nd. Paul Irish.
• Optimize Your Workflow: JavaScript Tools and Libraries
• Current Workflow: Developing, Linting, Testing and Distributing JavaScript
• Yeoman – Level-up Your Daily Workflow
  • Yeoman with Addy Osmani

Stay Up to Date

• http://uptodate.frontendrescue.org/#addy-osmani
• Talks To Help You Become A Better Front-End Engineer In 2013