Modern Web Application Development Workflow - web2day 2014
Upcoming SlideShare
Loading in...5
×
 

Modern Web Application Development Workflow - web2day 2014

on

  • 1,099 views

Slides of my presentation for web2day 2014

Slides of my presentation for web2day 2014

Statistics

Views

Total Views
1,099
Views on SlideShare
925
Embed Views
174

Actions

Likes
0
Downloads
20
Comments
0

2 Embeds 174

https://twitter.com 163
https://zen.myatos.net 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Modern Web Application Development Workflow - web2day 2014 Modern Web Application Development Workflow - web2day 2014 Presentation Transcript

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