Modern Web Application Development Workflow - web2day 2014

2,872 views
2,788 views

Published on

Slides of my presentation for web2day 2014

Published in: Software, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,872
On SlideShare
0
From Embeds
0
Number of Embeds
800
Actions
Shares
0
Downloads
46
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Modern Web Application Development Workflow - web2day 2014

  1. 1. MODERN WEB APPLICATION DEVELOPMENT WORKFLOW
  2. 2. FIRST, LET’S LOOK AT THE PAST
  3. 3. THROW A BUNCH OF HTMLFILES
  4. 4. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES
  5. 5. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS
  6. 6. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS AND CALL IT A DAY...
  7. 7. COME BACK 6MONTHS LATER AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
  8. 8. Node.js ≠ Server-side JavaScript
  9. 9. Node.js stand alone JavaScript runtime
  10. 10. Node.js stand alone JavaScript runtime using v8, Chrome’s JavaScript engine
  11. 11. Node.js stand alone JavaScript applications
  12. 12. Node.js stand alone JavaScript applications created by JavaScript developers
  13. 13. Node.js stand alone JavaScript applications created by JavaScript developers for JavaScript developers
  14. 14. BRAND NEW WORLD
  15. 15. JAVASCRIPT DEVELOPMENT TOOLS
  16. 16. JAVASCRIPT DEVELOPMENT WORKFLOW
  17. 17. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED
  18. 18. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES
  19. 19. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES
  20. 20. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS
  21. 21. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS
  22. 22. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS
  23. 23. HOW TO GET STARTED?
  24. 24. YEOMAN Born in 2012 Various contributors (Employees from Google, Twitter, etc)
  25. 25. YEOMAN scaffolding - structure - compilation - static analysis - dependencies management - development tools - unit testing
  26. 26. YEOMAN download > npm install -g yo “-g” global install
  27. 27. YEOMAN Various generators: ○ Angular ○ Ember ○ Backbone And all the other popular frameworks...
  28. 28. YEOMANangular.js generator > npm install -g generator-angular
  29. 29. YEOMANcreate an Angular project > yo angular
  30. 30. Select some dependencies
  31. 31. Choose some options
  32. 32. It creates the project
  33. 33. It downloads half of the internet
  34. 34. It uses some dark magic
  35. 35. Enjoy the view, Yeoman takes care of everything…
  36. 36. What does the result look like?
  37. 37. STRUCTURE
  38. 38. CONTENT
  39. 39. DEPENDENCIES
  40. 40. DEV TOOLS
  41. 41. IT’S MAGIC! and it will be your job to maintain it...
  42. 42. HAPPY?
  43. 43. Thierry Lau “Build your own Yeoman generator” this afternoon at 2pm
  44. 44. BUT HOW DOES IT WORK?
  45. 45. YEOMAN HAS FRIENDS
  46. 46. BOWER
  47. 47. GRUNT
  48. 48. GULP
  49. 49. AND OTHERS
  50. 50. DEPENDENCIES MANAGEMENT
  51. 51. BOWER
  52. 52. BOWER Package manager for the web Born in 2012 Created by Twitter and other contributors over time
  53. 53. BOWER Download > npm install -g bower
  54. 54. Find a package: bower search
  55. 55. Find more information: bower info
  56. 56. BOWER Add a specific dependency > bower install jquery#1.10.2 --save install jquery and save this new dependency
  57. 57. BOWER runtime dependencies in bower.json
  58. 58. DEPENDENCIES
  59. 59. LOCATION
  60. 60. BOWER Add all your dependencies > bower install
  61. 61. See your dependencies: bower list
  62. 62. BOWER Package management always comes with its set of problems:
  63. 63. BOWER Package management always comes with its set of problems: - how can I create a new package?
  64. 64. BOWER Package management always comes with its set of problems: - how can I create a new package? - how can I host a bower repository?
  65. 65. 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?
  66. 66. Create a bower package: bower init
  67. 67. BOWER Host a bower repository
  68. 68. BOWER Host a bower repository > git init
  69. 69. BOWER Host a bower repository > git init > git add .
  70. 70. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.”
  71. 71. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.” > git remote add origin …
  72. 72. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.” > git remote add origin … > git push origin master
  73. 73. BOWER Host a bower repository SVN support has been added with bower 1.3 for those who care….
  74. 74. BOWER Use bower with Git > bower install https://myrepository.git
  75. 75. BOWER Host multiple versions > git tag -a 1.4 -m 'version 1.4' > bower install https://myrepository.git#1.4
  76. 76. BOWER Host multiple versions Use semantic versioning to easily let your consumers handle API breakages
  77. 77. BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git
  78. 78. BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git How do this work?
  79. 79. BOWER Registry https://github.com/bower/registry A simple web server listing Git repository URLs
  80. 80. BOWER Register > bower register myrepository https://…git > bower install myrepository
  81. 81. BUILD
  82. 82. GRUNT GULP
  83. 83. CONFIGURATION GULP CODE GRUNT
  84. 84. EQUALLY POWERFUL
  85. 85. GRUNT is a bit older so its ECOSYSTEM is more mature
  86. 86. Grunt and Gulp development tools dependencies in package.json >npm install
  87. 87. DEV TOOLS
  88. 88. GRUNT
  89. 89. 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' } });
  90. 90. GRUNT Configuration in Gruntfile.js
  91. 91. GRUNT Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore
  92. 92. GRUNTgruntfile.js structure 3 parts: -Task loading -Task configuration -Task registration
  93. 93. GRUNT An example: Static code analysis with JSHINT
  94. 94. GRUNT
  95. 95. HOW DO YOU USE IT? >grunt >grunt jshint:all
  96. 96. GULP
  97. 97. 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'))
  98. 98. GULP Configuration in Gulpfile.js
  99. 99. GULPgulpfile.js structure 3 parts: - task loading - task configuration - task registration
  100. 100. GULP
  101. 101. SOUNDS FAMILIAR?
  102. 102. GULPdifferences with Grunt node.js streams (asynchronous by nature) nice and simple api less IO operations
  103. 103. GULPTask define a task gulp.task('name', ['deps'], function(done) { return stream || promise|| done(); });
  104. 104. GULPWatch react to changes on the file system gulp.watch('src/**/*.js', ['test', 'compile']);
  105. 105. GULPSrc create a stream from the file system gulp.src(['src/**/*.js', 'test/**/*.js' ])
  106. 106. GULPDest create a stream to the file system gulp.src('src') .pipe(...) .pipe(gulp.dest( 'dist'));
  107. 107. GULPStart Start a task gulp.task('default', ['clean'], function(){ gulp.start('lint', 'min', 'concat'); });
  108. 108. GULPExecution computed using the dependencies concurrent execution with Orchestrator adopted by Grunt 1.0 too
  109. 109. BUILD TASKS
  110. 110. STATIC ANALYSIS grunt-contrib-jshint gulp-jshint Detect coding errors in your JavaScript files
  111. 111. STATIC ANALYSIS Various style of reports (checkstyle, html, etc) Configuration in .jshtinrc
  112. 112. COFFEESCRIPT grunt-contrib-coffee gulp-coffee Compile CoffeeScript source code to JavaScript
  113. 113. RESPONSIVE IMAGES grunt-responsive-images gulp-responsive-images Produce images at different sizes for responsive websites
  114. 114. COMPRESS IMAGES grunt-contrib-imagemin gulp-imagemin Compress and optimize images
  115. 115. MINIFICATION grunt-contrib-uglify gulp-uglify Reduce the size of JavaScript files
  116. 116. CSS TRIMMING grunt-uncss gulp-uncss-task Remove unused CSS rules
  117. 117. LIVE RELOAD grunt-contrib-watch gulp-livereload Reload automatically the web application if some files have been changed
  118. 118. init concat jshint min unit server endtoend watch WORKFLOW
  119. 119. SASS
  120. 120. SASS - variables $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
  121. 121. SASS - nesting nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
  122. 122. SASS - import - partials // base.scss @import ‘reset’; body { font: 100% Helvetica, sans- serif; color: #333; } // _reset.scss html, body { margin: 0; padding: 0; }
  123. 123. 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); }
  124. 124. SASS - inheritance .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }
  125. 125. SASS - operators .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; }
  126. 126. SASS grunt-contrib-sass gulp-sass Compile SASS to CSS
  127. 127. TESTING
  128. 128. UNIT TESTS Frameworks: Jasmine, Mocha, QUnit describe("A suite", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); });
  129. 129. RUNNING TESTS Runner: Karma // Gruntfile.js karma: { unit: { configFile: 'karma.conf.js' } }
  130. 130. 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 }); };
  131. 131. FUNCTIONAL TESTS PhantomJS & SlimerJS - headless browsers CasperJS - navigation scripting & testing utility
  132. 132. 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(); });
  133. 133. TESTING Modern.ie - for the poor souls who have to support Windows XP and IE6 IE8
  134. 134. TESTING Code Coverage: Istanbul
  135. 135. TESTING Hudson/Jenkins integration? karma-junit-reporter (JUnit reports) karma-coverage (Cobertura reports) jshint (Checkstyle reports)
  136. 136. KARMA + GRUNT/GULP Test your application on various devices
  137. 137. CHROME DEVTOOLS
  138. 138. F12 or Ctrl+Shift+i
  139. 139. ELEMENTS
  140. 140. NETWORK
  141. 141. HAR HTTP Archive
  142. 142. SOURCES
  143. 143. WORKSPACE
  144. 144. SNIPPETS
  145. 145. Chrome Devtools Options
  146. 146. TIMELINE
  147. 147. CHROME CANARY
  148. 148. Custom events console.timeStamp
  149. 149. PERFORMANCES
  150. 150. MEMORY LEAKS
  151. 151. Compare memory snapshots
  152. 152. Think about browsers extensions
  153. 153. CPU PROFILING
  154. 154. AUDITS
  155. 155. Customize the Chrome Devtools
  156. 156. New panels
  157. 157. MOBILE FIRST
  158. 158. EMULATION
  159. 159. REAL DEVICE
  160. 160. TO SUM UP
  161. 161. YEOMAN + BOWER + GRUNT/GULP and Chrome... = AWESOME
  162. 162. 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.

×