Web Development Workflow
Overview of Tools
- Tooling in the web app development lifecycle
- Tooling & the Webapp Development Stack
- Frontend development – then, now and the future (presentation)
- A Modern Web Designer's Workflow by chriscoyier
Design Workflow
Javascript Development Workflow of 2013
Video: Javascript Development Workflow of 2013 by Paul Irish (PDF)
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
CSS
Icons
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)
- Modules / Dependency management
- 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
- Test in Chrome
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
- http://opendevicelab.com/
Build System
Grunt
- Getting Started with Grunt, How to install grunt and how to built script with it
- cd <your_project>
- npm install -g grunt-cli
- touch package.json Gruntfile.js
- npm install grunt --save-dev
- concatenate and minify your Javascript and CSS source files
- https://npmjs.org/package/grunt-frontend - minify CSS and JS
- grunt-contrib-jade - compiles Jade html language
- Jade Readme Contents
- npm install grunt-contrib-jade --save-dev
- simplemon - Simple file monitor that executes commands whenever a file change occurs
- simplemon -O jade html_templates jade_templates
- http://livereload.com/
- https://github.com/gruntjs/grunt-contrib-livereload
- Dependency: npm install grunt-contrib-connect https://npmjs.org/package/grunt-contrib-connect
- https://github.com/gruntjs/grunt-contrib-livereload
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
After Deployment
Client-Side Error Tracking
Projects to check out
- modjs
- Grunt
- 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
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