Modern Web Application Development Workflow - web2day 2014

MODERN
WEB APPLICATION
DEVELOPMENT
WORKFLOW

FIRST, LET’S LOOK
AT THE PAST

THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES

PUT SOME JAVASCRIPTIN ALL THIS

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
created by JavaScript developers

Node.js
created by JavaScript developers
for JavaScript developers

JAVASCRIPT
DEVELOPMENT
WORKFLOW

A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED

A GOOD
DEVELOPMENT
WORKFLOW
-MAINTAINS YOUR DEPENDENCIES

A GOOD
DEVELOPMENT
WORKFLOW
-ENFORCES BEST PRACTICES

A GOOD
DEVELOPMENT
WORKFLOW
-PREPARES YOUR TOOLS

A GOOD
DEVELOPMENT
WORKFLOW
-FIGHTS REGRESSIONS

A GOOD
DEVELOPMENT
WORKFLOW
-FIGHTS REGRESSIONS
-EASES THE RELEASE PROCESS

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

It downloads half of the internet

Enjoy the view, Yeoman takes care of
everything…

What does the result look like?

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

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

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

BOWER Download
> npm install -g bower

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

BOWER Add all your dependencies
> bower install

See your dependencies: bower list

BOWER
Package management always comes with its
set of problems:

BOWER
set of problems:
- how can I create a new package?

BOWER
set of problems:
- how can I host a bower repository?

BOWER
set of problems:
- 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
> git init

> git init
> git add .

> git init
> git add .
> git commit -m “Initial commit.”

> git init
> git add .
> git remote add origin …

> git init
> git add .
> git remote add origin …
> git push origin master

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

GRUNT is a bit older so its
ECOSYSTEM is more mature

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

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

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

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

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

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

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

Custom events
console.timeStamp

Think about browsers
extensions

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.

Modern Web Application Development Workflow - web2day 2014

More Related Content

What's hot

Similar to Modern Web Application Development Workflow - web2day 2014

Recently uploaded

Modern Web Application Development Workflow - web2day 2014