MODERN JAVASCRIPT DEVELOPMENT WORKFLOW
Node.js
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
PACKAGE MANAGEMENT FOR WEB
- Runs over Git
- Flat dependency tree
- 4000+ packages
Manage dependencies with bower
Yeoman
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
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
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
Javascript Development Workflow
By creative4art
