Modern Web Application Development Workflow - web2day 2014

  • 1,461 views
Uploaded on

Slides of my presentation for web2day 2014

Slides of my presentation for web2day 2014

More in: Software , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,461
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
31
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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