Modern Web Application Development Workflow - web2day

Slides of the presentation for web2day 2014

Transcript

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