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

Modern Web Application Development Workflow - web2day 2014

on

  • 1,077 views

Slides of my presentation for web2day 2014

Slides of my presentation for web2day 2014

Statistics

Views

Total Views
1,077
Slideshare-icon Views on SlideShare
909
Embed Views
168

Actions

Likes
0
Downloads
19
Comments
0

2 Embeds 168

https://twitter.com 157
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.