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

Like this? Share it with your network

Share

Modern Web Application Development Workflow - web2day 2014

  • 1,558 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,558
On Slideshare
1,273
From Embeds
285
Number of Embeds
3

Actions

Shares
Downloads
31
Comments
0
Likes
1

Embeds 285

https://twitter.com 272
https://zen.myatos.net 11
https://www.linkedin.com 2

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.