MODERN
WEB APPLICATION
DEVELOPMENT
WORKFLOW

FIRST, LET’S LOOK
AT THE PAST

THROW A BUNCH OF HTMLFILES

THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES

THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES
PUT SOME JAVASCRIPTIN ALL THIS

THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES
PUT SOME JAVASCRIPTIN ALL THIS
AND CALL IT A DAY...

COME BACK 6MONTHS LATER
AND TRY TO REMEMBER HOW TO
MAINTAIN YOUR CODE

Node.js
≠
Server-side JavaScript

Node.js
stand alone JavaScript runtime

Node.js
stand alone JavaScript runtime
using v8, Chrome’s JavaScript engine

Node.js
stand alone JavaScript applications

Node.js
stand alone JavaScript applications
created by JavaScript developers

Node.js
stand alone JavaScript applications
created by JavaScript developers
for JavaScript developers

BRAND NEW WORLD

JAVASCRIPT
DEVELOPMENT
TOOLS

JAVASCRIPT
DEVELOPMENT
WORKFLOW

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS
-FIGHTS REGRESSIONS

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS
-FIGHTS REGRESSIONS
-EASES THE RELEASE PROCESS

HOW TO GET STARTED?

YEOMAN
Born in 2012
Various contributors (Employees from
Google, Twitter, etc)

YEOMAN scaffolding
- structure
- compilation
- static analysis
- dependencies management
- development tools
- unit testing

YEOMAN download
> npm install -g yo
“-g” global install

YEOMAN
Various generators:
○ Angular
○ Ember
○ Backbone
And all the other popular frameworks...

YEOMANangular.js generator
> npm install -g generator-angular

YEOMANcreate an Angular project
> yo angular

Select some dependencies

Choose some options

It creates the project

It downloads half of the internet

It uses some dark magic

Enjoy the view, Yeoman takes care of
everything…

What does the result look like?

STRUCTURE

CONTENT

DEPENDENCIES

DEV TOOLS

IT’S MAGIC!
and it will be your job to maintain it...

HAPPY?

Thierry Lau
“Build your own Yeoman generator”
this afternoon at 2pm

BUT HOW DOES IT WORK?

YEOMAN HAS FRIENDS

BOWER

GRUNT

GULP

AND
OTHERS

DEPENDENCIES
MANAGEMENT

BOWER

BOWER
Package manager for the web
Born in 2012
Created by Twitter and other contributors
over time

BOWER Download
> npm install -g bower

Find a package: bower search

Find more information: bower info

BOWER Add a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency

BOWER
runtime dependencies in bower.json

DEPENDENCIES

LOCATION

BOWER Add all your dependencies
> bower install

See your dependencies: bower list

BOWER
Package management always comes with its
set of problems:

BOWER
Package management always comes with its
set of problems:
- how can I create a new package?

BOWER
Package management always comes with its
set of problems:
- how can I create a new package?
- how can I host a bower repository?

BOWER
Package management always comes with its
set of problems:
- how can I create a new package?
- how can I host a bower repository?
- what kind of exotic tools will I have to use?

Create a bower package: bower init

BOWER Host a bower repository

BOWER Host a bower repository
> git init

BOWER Host a bower repository
> git init
> git add .

BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”

BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”
> git remote add origin …

BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”
> git remote add origin …
> git push origin master

BOWER Host a bower repository
SVN support has been added with bower 1.3
for those who care….

BOWER Use bower with Git
> bower install https://myrepository.git

BOWER Host multiple versions
> git tag -a 1.4 -m 'version 1.4'
> bower install https://myrepository.git#1.4

BOWER Host multiple versions
Use semantic versioning to easily let your
consumers handle API breakages

BOWER Download
> bower install jquery
> bower install git://github.com/jquery/jquery.git

BOWER Download
> bower install jquery
> bower install git://github.com/jquery/jquery.git
How do this work?

BOWER Registry
https://github.com/bower/registry
A simple web server listing Git repository URLs

BOWER Register
> bower register myrepository https://…git
> bower install myrepository

BUILD

GRUNT GULP

CONFIGURATION
GULP
CODE
GRUNT

EQUALLY
POWERFUL

GRUNT is a bit older so its
ECOSYSTEM is more mature

Grunt and Gulp
development tools dependencies in package.json
>npm install

DEV TOOLS

GRUNT

GRUNTconfiguration over code
grunt.initConfig({
lint: {
src: 'src/<%= pkg.name %>.js'
},
concat: {
src: [
'<banner:meta.banner>' ,
'<file_strip_banner:src/<%= pkg.name %>.js>'
],
dest: '<%= pkg.name %>.js'
}
});

GRUNT
Configuration in Gruntfile.js

GRUNT
Global install before Grunt 0.4
Updating Grunt cannot break existing projects
anymore

GRUNTgruntfile.js structure
3 parts:
-Task loading
-Task configuration
-Task registration

GRUNT
An example: Static code analysis with JSHINT

GRUNT

HOW DO YOU USE IT?
>grunt
>grunt jshint:all

GULP

GULP code over configuration
gulp.src('src/main.mycss' )
.pipe(stylus())
.pipe(rename({ ext: 'css' }))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(header( '/* All Right Reserved */' ))
.pipe(gulp.dest( 'dist'))

GULP
Configuration in Gulpfile.js

GULPgulpfile.js structure
3 parts:
- task loading
- task configuration
- task registration

GULP

SOUNDS
FAMILIAR?

GULPdifferences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
less IO operations

GULPTask
define a task
gulp.task('name', ['deps'], function(done) {
return stream || promise|| done();
});

GULPWatch
react to changes on the file system
gulp.watch('src/**/*.js', ['test', 'compile']);

GULPSrc
create a stream from the file system
gulp.src(['src/**/*.js', 'test/**/*.js' ])

GULPDest
create a stream to the file system
gulp.src('src')
.pipe(...)
.pipe(gulp.dest( 'dist'));

GULPStart
Start a task
gulp.task('default', ['clean'], function(){
gulp.start('lint', 'min', 'concat');
});

GULPExecution
computed using the dependencies
concurrent execution with Orchestrator
adopted by Grunt 1.0 too

BUILD TASKS

STATIC ANALYSIS
grunt-contrib-jshint
gulp-jshint
Detect coding errors in your JavaScript files

STATIC ANALYSIS
Various style of reports (checkstyle, html, etc)
Configuration in .jshtinrc

COFFEESCRIPT
grunt-contrib-coffee
gulp-coffee
Compile CoffeeScript source code to JavaScript

RESPONSIVE IMAGES
grunt-responsive-images
gulp-responsive-images
Produce images at different sizes for responsive
websites

COMPRESS IMAGES
grunt-contrib-imagemin
gulp-imagemin
Compress and optimize images

MINIFICATION
grunt-contrib-uglify
gulp-uglify
Reduce the size of JavaScript files

CSS TRIMMING
grunt-uncss
gulp-uncss-task
Remove unused CSS rules

LIVE RELOAD
grunt-contrib-watch
gulp-livereload
Reload automatically the web application if
some files have been changed

init
concat
jshint
min
unit
server
endtoend
watch
WORKFLOW

SASS

SASS
- variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

SASS
- nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

SASS
- import
- partials
// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-
serif;
color: #333;
}
// _reset.scss
html,
body {
margin: 0;
padding: 0;
}

SASS
- mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

SASS
- inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}

SASS
- operators
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}

SASS
grunt-contrib-sass
gulp-sass
Compile SASS to CSS

TESTING

UNIT TESTS
Frameworks: Jasmine, Mocha, QUnit
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});

RUNNING TESTS
Runner: Karma
// Gruntfile.js
karma: {
unit: {
configFile: 'karma.conf.js'
}
}

module.exports = function(config) {
config.set({
frameworks: [ 'jasmine'],
singleRun: true,
browsers: [ 'Chrome','Firefox','Safari'],
files: [
'**/*.js'
],
plugins: [
'karma-jasmine' ,
'karma-chrome-launcher' ,
'karma-firefox-launcher' ,
'karma-safari-launcher'
],
exclude: [],
reporters: [ 'progress'],
colors: true,
logLevel: config.LOG_INFO,
captureTimeout: 60000
});
};

FUNCTIONAL TESTS
PhantomJS & SlimerJS - headless browsers
CasperJS - navigation scripting & testing utility

PHANTOMJS
Headless WebKit scriptable with JavaScript
console.log('Loading a web page');
var page = require('webpage').create();
var url = 'http://www.phantomjs.org/';
page.open(url, function (status) {
//Page is loaded!
phantom.exit();
});

TESTING
Modern.ie - for the poor souls who have to
support Windows XP and IE6 IE8

TESTING
Code Coverage: Istanbul

TESTING
Hudson/Jenkins integration?
karma-junit-reporter (JUnit reports)
karma-coverage (Cobertura reports)
jshint (Checkstyle reports)

KARMA + GRUNT/GULP
Test your application on
various devices

CHROME
DEVTOOLS

F12
or
Ctrl+Shift+i

ELEMENTS

NETWORK

HAR HTTP
Archive

SOURCES

WORKSPACE

SNIPPETS

Chrome Devtools
Options

TIMELINE

CHROME
CANARY

Custom events
console.timeStamp

PERFORMANCES

MEMORY LEAKS

Compare memory
snapshots

Think about browsers
extensions

CPU
PROFILING

AUDITS

Customize the
Chrome Devtools

New panels

MOBILE FIRST

EMULATION

REAL DEVICE

TO SUM UP

YEOMAN + BOWER + GRUNT/GULP
and Chrome...
=
AWESOME

THANKS!
Stéphane Bégaudeau
Twitter: @sbegaudeau
Google+: +stephane.begaudeau
The research leading to these results has received funding from the European Union’s Seventh Framework Program (FP7/2007-2013) for CRYSTAL – Critical System
Engineering Acceleration Joint Undertaking under grant agreement № 332830 and from specific national programs and/or funding authorities.