modern web application development workflow - web2day 2014

MODERNWEB APPLICATIONDEVELOPMENTWORKFLOW

FIRST, LET’S LOOK AT THE PAST

THROW A BUNCH OF HTML FILES

THROW A BUNCH OF HTML FILES

ADD A COUPLE OF CSS FILES

THROW A BUNCH OF HTML FILES

ADD A COUPLE OF CSS FILES

PUT SOME JAVASCRIPT IN ALL THIS

THROW A BUNCH OF HTML FILES

ADD A COUPLE OF CSS FILES

PUT SOME JAVASCRIPT IN ALL THIS

AND CALL IT A DAY...

COME BACK 6 MONTHS LATER

AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE

Node.js

≠ Server-side JavaScript

Node.jsstand alone JavaScript runtime

Node.jsstand alone JavaScript runtimeusing v8, Chrome’s JavaScript engine

Node.jsstand alone JavaScript applications

Node.jsstand alone JavaScript applicationscreated by JavaScript developers

Node.jsstand alone JavaScript applicationscreated by JavaScript developersfor 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?

YEOMANBorn 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

YEOMANVarious generators:○ Angular○ Ember○ Backbone

And all the other popular frameworks...

YEOMAN angular.js generator

> npm install -g generator-angular

YEOMAN create 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

BOWERPackage 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.3for 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 Gulpdevelopment tools dependencies in package.json

>npm install

DEV TOOLS

GRUNT

GRUNT configuration 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

GRUNT gruntfile.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'))

GULPConfiguration in Gulpfile.js

GULP gulpfile.js structure

3 parts:- task loading- task configuration- task registration

GULP

SOUNDS FAMILIAR?

GULP differences with Grunt

node.js streams (asynchronous by nature)

nice and simple api

less IO operations

GULP Task

define a task

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

GULP Watch

react to changes on the file system

gulp.watch('src/**/*.js', ['test', 'compile']);

GULP Src

create a stream from the file system

gulp.src(['src/**/*.js', 'test/**/*.js'])

GULP Dest

create a stream to the file system

gulp.src('src') .pipe(...) .pipe(gulp.dest( 'dist'));

GULP Start

Start a task

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

GULP Execution

computed using the dependencies

concurrent execution with Orchestrator

adopted by Grunt 1.0 too

BUILD TASKS

STATIC ANALYSISgrunt-contrib-jshintgulp-jshint

Detect coding errors in your JavaScript files

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

COFFEESCRIPTgrunt-contrib-coffeegulp-coffee

Compile CoffeeScript source code to JavaScript

RESPONSIVE IMAGESgrunt-responsive-imagesgulp-responsive-images

Produce images at different sizes for responsive websites

COMPRESS IMAGESgrunt-contrib-imagemingulp-imagemin

Compress and optimize images

MINIFICATIONgrunt-contrib-uglifygulp-uglify

Reduce the size of JavaScript files

CSS TRIMMINGgrunt-uncssgulp-uncss-task

Remove unused CSS rules

LIVE RELOADgrunt-contrib-watchgulp-livereload

Reload automatically the web application if some files have been changed

initconcat

jshintminunit

serverendtoend

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%;}

SASSgrunt-contrib-sassgulp-sass

Compile SASS to CSS

TESTING

UNIT TESTSFrameworks: Jasmine, Mocha, QUnit

describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); });});

RUNNING TESTSRunner: Karma

// Gruntfile.jskarma: { 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 TESTSPhantomJS & SlimerJS - headless browsers

CasperJS - navigation scripting & testing utility

PHANTOMJSHeadless 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();});

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

TESTINGCode Coverage: Istanbul

TESTINGHudson/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

F12or

Ctrl+Shift+i

ELEMENTS

NETWORK

HAR HTTP Archive

SOURCES

WORKSPACE

SNIPPETS

Chrome Devtools Options

TIMELINE

CHROMECANARY

Custom events

console.timeStamp

PERFORMANCES

MEMORY LEAKS

Compare memory snapshots

Think about browsers extensions

CPUPROFILING

AUDITS

Customize the Chrome Devtools

New panels

MOBILE FIRST

EMULATION

REAL DEVICE

TO SUM UP

YEOMAN + BOWER + GRUNT/GULPand Chrome...

=

AWESOME

THANKS!Stéphane BégaudeauTwitter: @sbegaudeauGoogle+: +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.