modern web application development workflow - web2day 2014
DESCRIPTION
Slides of my presentation for web2day 2014TRANSCRIPT
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.