The document discusses modern web application development workflows. It begins by describing past approaches with HTML, CSS, and JavaScript thrown together. It then introduces Node.js as a JavaScript runtime and describes how JavaScript tools like Yeoman, Bower, Grunt, and Gulp help structure projects and automate development tasks like dependency management, compilation, and testing. Specific tasks like linting, minification, image optimization are discussed. Chrome DevTools are also highlighted as useful for debugging, profiling, and testing applications on different devices. The document advocates that using these tools together provides an awesome development environment.

1. MODERN
WEB APPLICATION
DEVELOPMENT
WORKFLOW

2. FIRST, LET’S LOOK
AT THE PAST

4. THROW A BUNCH OF HTMLFILES

5. THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES

6. THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES
PUT SOME JAVASCRIPTIN ALL THIS

7. THROW A BUNCH OF HTMLFILES
ADD A COUPLE OF CSSFILES
PUT SOME JAVASCRIPTIN ALL THIS
AND CALL IT A DAY...

8. COME BACK 6MONTHS 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. YEOMANangular.js generator
> npm install -g generator-angular

34. YEOMANcreate 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. 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'
}
});

101. GRUNT
Configuration in Gruntfile.js

102. GRUNT
Global install before Grunt 0.4
Updating Grunt cannot break existing projects
anymore

103. GRUNTgruntfile.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. GULPgulpfile.js structure
3 parts:
- task loading
- task configuration
- task registration

112. GULP

113. SOUNDS
FAMILIAR?

114. GULPdifferences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
less IO operations

115. GULPTask
define a task
gulp.task('name', ['deps'], function(done) {
return stream || promise|| done();
});

116. GULPWatch
react to changes on the file system
gulp.watch('src/**/*.js', ['test', 'compile']);

117. GULPSrc
create a stream from the file system
gulp.src(['src/**/*.js', 'test/**/*.js' ])

118. GULPDest
create a stream to the file system
gulp.src('src')
.pipe(...)
.pipe(gulp.dest( 'dist'));

119. GULPStart
Start a task
gulp.task('default', ['clean'], function(){
gulp.start('lint', 'min', 'concat');
});

120. GULPExecution
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.