Web Development Workflow

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
• Editor:
  • learn it well, most important
  • Code linting is your first unit test.
• Realtime Feedback
  • live linting
  • live recompilation
  • live reload
• 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
    • 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

Others

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