Your SlideShare is downloading. ×
0
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 TO...
A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TO...
A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TO...
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...
BOWER
Package management always comes with its
set of problems:
- how can I create a new package?
- how can I host a bower...
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 pus...
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.ba...
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(...
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-...
SASS
- nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block;
}
a {
display: block;
pad...
SASS
- import
- partials
// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-
serif;
color: #333;
}
// _reset....
SASS
- mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radi...
SASS
- inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-co...
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", func...
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'...
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').crea...
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 (Checks...
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 rec...
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Modern Web Application Development Workflow - web2day 2014
Upcoming SlideShare
Loading in...5
×

Modern Web Application Development Workflow - web2day 2014

2,027

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,027
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
43
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×