Modern webapp development workflow/tools

workshop scenario

26th September 2014, Warsjawa
Tomasz Ducin

JavaScript has been under phenomenal development during recent years. As an indirect result of browser wars, node.js has been introduced, which enabled developers to run JS on the server side. Thanks to this, lots of professional tools have been created: npm (package manager), grunt (automating, building), bower (assets manager), yeoman (skeleton generators). Additionally, many other tools could be executed on the server-side from now on, e.g. end-to-end testing without a browser (phantom/casper). This has promoted JS applications to full-professional projects with stable development workflow: building, testing, deployment - where everything is automated using well-known tools such as jenkins or git.

Nowadays, the possibilities of JavaScript are a lot more than colourful forms written with obtrusive mixture of jquery and html, as it used to be some time ago. During this talk, I want to show what JavaScript can do now - what are the tools, how you can use them and why are they useful. And it doesn't matter what single-page-app framework you use (angular, bb, ember) or what server-side technology you use (the server itself doesn't have to rely on node.js).

---

intro

prerequisites

• node/npm installed, v0.10+
• git installed, github account
• shell (bash, powershell, etc.)
• modern browser

I'm gonna use linux/ubuntu and chrome.

plan

• separate tools: npm, bower, grunt, yo
• combining tools: yeoman workflow
• only if we have time: travis-ci, modernizr

aim

• how to turn raw development code into production app fast

---

npm: node package manager

npm search

install a package globally:

[sudo] npm install -g <package>

or locally:

npm install <package>
npm install <package> --save
npm install <package> --save-dev

more in the docs. Use search and install a module, e.g. jquery (no deps), backbone (deps), underscore (independent on backbone):

mkdir project && cd project
npm install [...]

❗ don't do sudo npm install <package> (sudo, non-global), see

• ~/.npm
• /usr/lib/node_modules

nitialize project manually (grab minimalistic example):

# inside project directory
#EDITOR package.json # creating manifest file

or automatically:

npm init # creating manifest file

fetch dependencies from existent project:

git clone https://github.com/tkoomzaaskz/warsjawa-2014-webapps
cd warsjawa-2014-webapps
npm install

publish/unpublish package (package.json file needed with name and version specified):

npm publish
npm unpublish [--force]

---

bower: web assets manager

❓ when to use npm and when bower (SO question, another SO question, extensive guide)

bower search

install bower tool:

[sudo] npm install -g bower

initialize manually (grab minimalistic example):

$EDITOR bower.json # creating manifest file

or automatically:

bower init # creating manifest file

❓ purpose of main file (SO question)

install packages:

bower install <package>
bower install <package> --save
bower install <package> --save-dev

❗ dependencies (install underscore, then backbone, then marionette and check underscore version each time)

❗ installed bower_components are bower packages themselves and their dependencies may be fetched as well. Step into marionette and run bower install

❗ ignore devDependencies: bower install <package> --production

❓ bower depencencies vs devDepencencies (SO question)

register your package:

bower register <my-package-name> <git-endpoint>

❗ git only, git tags

more about creating and maintaining bower packages

customize bower:

$EDITOR .bowerrc

grab an example (or this one if previous link is broken) that overrides bower_components to src/vendor

---

grunt: task runner

grunt search

❗ example Gruntfile from this repo with tasks: clean, concat, replace, watch

install grunt tool:

[sudo] npm install -g grunt-cli
npm install grunt --save-dev

❓ grunt-cli and grunt are separate - why is that

initialize manually (grab this repo example):

$EDITOR Gruntfile.js

or automatically... First, install templates. This includes manually creating empty directory which will contain templates and then cloning git repositories there:

mkdir ~/.grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
# git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery

Install grunt-init module, providing new binary:

[sudo] npm install -g grunt-init

and finally generate Gruntfile.js:

grunt-init gruntfile

❓ more grunt-init tasks.

basic grunt configuration - plugins, targets

❗ analyse generated gruntfile

grunt API: see docs

basic working example: see this repo example

example tasks

❗ grunt-contrib-*

static code analysis:

npm install grunt-contrib-jshint --save-dev

release build:

npm install grunt-contrib-uglify --save-dev

background automatic tasks:

npm install grunt-contrib-watch --save-dev

more tasks: copy, concat, cssmin, sass/compass, requirejs, compress

more

❓ how about alternatives: gulp, brunch? See grunt vs brunch or grunt vs gulp vs brunch subjective comparisons

---

yo: project scaffolding

yeoman search

install yeoman tool:

[sudo] npm install -g yo

search generator-* node modules (npm search generator-)

using generators

install specific generator:

[sudo] npm install -g generator-webapp

and run it:

mkdir my-yo-project
cd my-yo-project
yo webapp

if running grunt fails on PhantomJS, your test depencencies may not be satisfied. Need to run:

cd test
bower install
cd ..

yeoman workflow

❗ everything is configured for you. Really.

build the entire application:

grunt build

open your application (source version):

grunt serve

and built version:

grunt serve:dist

analyse the new Gruntfile. As long as you can ;)

backbone generator

install generator-backbone:

[sudo] npm install -g generator-backbone

and follow typical workflow instructions.

Read more basics at http://yeoman.io/learning/

---

travis: continuous integration

• register account (using github account)
• create stub test command
• update package.json (my-test-command may be simply: "grunt test"):

"scripts": {
    "test": <my-test-command>
}

• create travis manifest file (grab example or this if previous link is broken):

$EDITOR .travis.yml

• push to github

---

practice

• sinon.js problem: install it with bower and grunt-bower-task (rely on this article)

feature test suite

further practice

• try out angular-based tutorial