NPM

• Package manager for the web
• Comes with node.js
• Default for node.js modules

Install node.js

Filename: package.json

Download node.js and follow installation guide

Demo time

Bower

• Package manager for the web
• Designed solely for web and it is optimized with that in mind.

Demo time

Demo time

Gulp Strength

• Mature: ~ Aug 2013, relatively mature
• Community Support: New kid in town, Picking up popularity
• Code over configuration
• Easy to read & use
• Tons of plugins available
• Provides node streams - no need for tmp files/folders
• Plugins do ONE thing
• Provides plugin to run Grunt tasks
• Only has 5 functions to learn!
• Runs with maximum concurrency by default

Gulp Weeknesses

• Can be daunting to learn streams
• Sometimes setting up src/dest can be tricky (use base)
• Streams are not a great abstraction for complex builds. They don't compose well.

The gulp api

• gulp.task(name[, deps], fn)
• gulp.src(globs)
• gulp.dest(path)
• gulp.watch(glob[, opts], tasks)
• gulp.run(tasks...)

Demo time

Grunt Strength

• Mature: Mar 2012, very mature
• Community Support: Most Popular
• Configuration over code
• Based on files
• Tons of plugins available
• Flexibility
• Scaffolding is available through generators
• Provides plugin to run Gulp tasks

Grunt Weeknesses

• Plugins do multiple things
• Headache of temp files/folders
• Not one solid control flow
• Configuration can get lengthy - 500+ lines / Hard to read
• Very lengthy & vast API
• Can get pretty slow when tasks increase

Demo time

Brunch

• Mature: Jan 2011, very mature
• Community Support: fairly new, plenty of plugins & skeletons
• Easy to set up - use skeleton
• Introduces conventions for you
• Simple CLI - only a few commands
• Commands for dev/staging/production releases

Brunch Weeknesses

• Not using conventions causes headaches
• Not easy to set up with existing projects
• Skeleton set ups not maintained as fast as plugins
• Not as supported as Grunt/Gulp

Broccoli

• Mature: Feb 2014, still in beta
• Community Support: in Beta
• Trees allow dev to think of assets
• Provides caching for map files
• Makes some conventions for you - assets
• Watching files handled by serve, only rebuilds whats needed
• Supported by trees that mirror filesystem
• Lets you have a transactional-style build pipeline
• Trees later in process can have more files than those previously
• Can do operations on multiple generated trees
• Can merge trees (output for ES5 from TypeScript & ES6 sources for example)
• Incremental builds by default
• Cacheing is built-in rather than manual

Broccoli Weeknesses

• No parallelism
• Mainstream usage only in ember-cli (and even then only used as a lib, not as a tool itself)
• Many rough edges - not forgiving for things off common path
• Some implementation flaws (though fixable)
• Some design decisions won’t scale from company to company, though it maps better to blaze (bazel) than does gulp

Demo time

Jasmine

• Started in 2010
• Huge community - Most popular
• Behavior-driven development framework for testing JavaScript code
• Doesn't require DOM, can be used serverside or in the browser
• Obvious syntax
• Easy to write tests
• Async Support
• Continuous Integration

Available Matchers

• toBe()
• toEqual()
• toMatch()
• toBeDefined()
• toBeUndefined()
• toBeNull()
• toBeTruthy()
• toBeFalsy()
• toContain()
• toBeLessThan()
• toBeGreaterThan()
• toBeCloseTo()
• toThrow()

Above matchers can be chained with the Not() function. e.g. not.toBe()

Karma

• Executes tests and source in a browser
• Lots of plugins available
• Can drive multiple browsers at once
• Built in JUnit reporter

Istanbul

• Instrument your source code
• Run your test suite against your instrumented source code
• Store your coverage results
• Allows you to generate coverage report
• HTML and LCOV reporting

Protractor

• AngularJS E2E Testing Framework
• Built on Selenium's WebDriver API
• Built on top of Jasmine framework
• Extension for all browsers
• Every action is asynchronous.
• Rapid development.
• Allows to test your app the way end user will use it.

Protractor Api

Demo time