The document discusses modern web application development workflows. It begins by looking at past workflows that lacked structure and organization. It then introduces Node.js as a JavaScript runtime and describes how JavaScript tools like Yeoman, Bower, Grunt and Gulp help provide structure, manage dependencies, automate tasks and enforce best practices. The document provides an overview of how these tools work and how they can be used to improve development workflows.

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. scaffolding
dependency
management
build
build tasks
orion
eclipse

28. HOW TO GET STARTED?

30. YEOMAN
Born in 2012
Various contributors (Employees from
Google, Twitter, etc)

31. YEOMAN scaffolding
- structure
- compilation
- static analysis
- dependencies management
- development tools
- unit testing

32. YEOMAN download
> npm install -g yo
“-g” global install

33. YEOMAN
Various generators:
○ Angular
○ Ember
○ Backbone
And all the other popular frameworks...

34. YEOMANangular.js generator
> npm install -g generator-angular

35. YEOMANcreate an Angular project
> yo angular

36. Select some dependencies

37. Choose some options

38. It creates the project

39. It downloads half of the internet

40. It uses some dark magic

41. Enjoy the view, Yeoman takes care of
everything…

42. What does the result look like?

43. STRUCTURE

44. CONTENT

45. DEPENDENCIES

46. DEV TOOLS

47. IT’S MAGIC!
and it will be your job to maintain it...

48. HAPPY?

49. BUT HOW DOES IT WORK?

50. scaffolding
dependency
management
build
build tasks
orion
eclipse

51. YEOMAN HAS FRIENDS

52. BOWER

54. GRUNT

56. GULP

58. AND
OTHERS

59. DEPENDENCIES
MANAGEMENT

60. BOWER

62. BOWER
Package manager for the web
Born in 2012
Created by Twitter and other contributors
over time

63. BOWER Download
> npm install -g bower

64. Find a package: bower search

65. Find more information: bower info

66. BOWER Add a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency

67. BOWER
runtime dependencies in bower.json

68. DEPENDENCIES

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. Create a bower package: bower init

75. BOWER Use bower with Git
> bower install https://myrepository.git

76. BOWER Host multiple versions
> git tag -a 1.4 -m 'version 1.4'
> bower install https://myrepository.git#1.4

77. BOWER Download
> bower install jquery
> bower install git://github.com/jquery/jquery.git

78. BOWER Registry
https://github.com/bower/registry
A simple web server listing Git repository URLs

79. BOWER Register
> bower register myrepository https://…git
> bower install myrepository

80. scaffolding
dependency
management
build
build tasks
orion
eclipse

81. BUILD

83. GRUNT GULP

84. CONFIGURATION
GULP
CODE
GRUNT

85. EQUALLY
POWERFUL

86. GRUNT is a bit older so its
ECOSYSTEM is more mature

87. Grunt and Gulp
development tools dependencies in package.json
>npm install

88. DEV TOOLS

89. GRUNT

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

92. GRUNT
Configuration in Gruntfile.js

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

94. GRUNTgruntfile.js structure
3 parts:
-Task loading
-Task configuration
-Task registration

95. GRUNT
An example: Static code analysis with JSHINT

96. GRUNT

97. HOW DO YOU USE IT?
>grunt
>grunt jshint:all

98. GULP

100. 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'))

101. GULP
Configuration in Gulpfile.js

102. GULPgulpfile.js structure
3 parts:
- task loading
- task configuration
- task registration

103. GULP

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

105. scaffolding
dependency
management
build
build tasks
orion
eclipse

106. BUILD TASKS

107. STATIC ANALYSIS
grunt-contrib-jshint
gulp-jshint
Detect coding errors in your JavaScript files

108. STATIC ANALYSIS
Various style of reports (checkstyle, html, etc)
Configuration in .jshtinrc

109. MINIFICATION
grunt-contrib-uglify
gulp-uglify
Reduce the size of JavaScript files

110. CSS TRIMMING
grunt-uncss
gulp-uncss-task
Remove unused CSS rules

111. TESTING
Frameworks: Jasmine & QUnit
Runner: Karma
Code Coverage: Istanbul

112. LIVE RELOAD
grunt-contrib-watch
gulp-livereload
Reload automatically the web application if
some files have been changed

113. init
concat
jshint
min
unit
server
endtoend
watch
WORKFLOW

114. scaffolding
dependency
management
build
build tasks
orion
eclipse

116. Orion
Eclipse project
Introduced in 2011 in the Eclipse Foundation

117. Orion
Two versions: Jetty or Node.js

118. Orion
npm install orion
node node_modules/orion/server.js
/projectpath

120. PROJECTS
MANAGEMENT

122. EDITOR

125. FIRST CLASS
GIT SUPPORT

130. SEARCH

132. PLUGINS

137. READY TO
DEPLOY

140. scaffolding
dependency
management
build
build tasks
orion
eclipse

141. WHAT ABOUT
ECLIPSE?

142. Back-end
Lot of tooling for Java development
Jetty, EclipseLink, Webtools, etc

143. Front-end
...

144. WHAT ABOUT
OTHERS?

148. Front-end
It’s time to contribute!

153. TO SUM UP

154. 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.