MODERN JAVASCR
IPT DEVELOPMENT WORKFLOW
Node.js
nodejs.org
Package manager
48 000+ packages;
Huge community;
npm init
$ npm init
Package.json
Install packages from repository
Grunt
gruntjs.com
MODERN TASK RUNNER
Huge ecosystem;
Easy to create own plugin;
1280+ plugins on npm;
Easy to start
npm install -g grunt-cli
Gruntfile.js
Writing your own task is easy
$ grunt-init gruntplugin
BOWEr
bower.io
PACKAGE MANAGEMENT FOR WEB
Runs over Git
Flat dependency tree
4000+ packages
Manage dependencies with bower
Yeoman
yeoman.io
The old-fashioned Workflow
Download HTML 5 Boilerplate
Find UI Framework/Boilerplate
Download it, add it to project
Download project libs
Copy boilerplate for models, views, controllers, setup
Setup test runner
Setup build process
Write Real Code!
From idea to prototype in 10 minutes
Can we do better?
$ yo
webapp
HTML5 Boilerplate
Twitter Bootstrap
Mocha Tests
RequireJS (optional)
Modernizr (optional)
CoffeeScript(optional)
Build process
Can we do better?
$ yo
angular
HTML5 Boilerplate
Twitter Bootstrap
AngularJS
Karma Testrunner
Scaffolding for Models, Directives, Routes, Views, Values, Constants, Services, Factories, ...
CoffeeScript support
Writing your own is easy
Can be written for any library, framework or workflow
Easy yeoman API
Fork an exist one or start from with generator-generator
Javascript style guide
Airbnb JavaScript Style Guide
Felix's Node.js Style Guide
Google JavaScript Style Guide
jQuery JavaScript Style Guide
USEful grunt plugins
watch
-- run predefined tasks whenever watched file patterns are added, changed or deleted
uncss
-- grunt task for removing unused CSS from your projects. Works across multiple files
uglify
-- minify JS files with UglifyJS
cssmin
-- compress CSS files
concurrent
-- run grunt tasks concurrently
Made with Slides.com