The document outlines the evolution of modern web application development workflows, highlighting the transition from maintaining simple HTML files to the use of tools like Node.js, Yeoman, Bower, Grunt, and Gulp for dependency management and automation. It emphasizes the importance of good development workflows that help enforce best practices and simplify the development process. Additionally, it introduces various tools and frameworks that facilitate project creation, management, and testing for developers.

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. BUT HOW DOES IT WORK?

49. YEOMAN HAS FRIENDS

50. BOWER

52. GRUNT

54. GULP

56. AND
OTHERS

57. DEPENDENCIES
MANAGEMENT

58. BOWER

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

61. BOWER Download
> npm install -g bower

62. Find a package: bower search

63. Find more information: bower info

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

65. BOWER
runtime dependencies in bower.json

66. DEPENDENCIES

67. BOWER Add all your dependencies
> bower install

68. See your dependencies: bower list

69. BOWER
Package management always comes with its
set of problems:

70. BOWER
Package management always comes with its
set of problems:
- how can I create a new package?

71. BOWER
Package management always comes with its
set of problems:
- how can I create a new package?
- how can I host a bower repository?

72. Create a bower package: bower init

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

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

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

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

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

78. BUILD

80. GRUNT GULP

81. CONFIGURATION
GULP
CODE
GRUNT

82. EQUALLY
POWERFUL

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

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

85. DEV TOOLS

86. GRUNT

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

89. GRUNT
Configuration in Gruntfile.js

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

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

92. GRUNT
An example: Static code analysis with JSHINT

93. GRUNT

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

95. 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. GULPdifferences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
less IO operations

102. BUILD TASKS

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

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

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

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

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

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

109. init
concat
jshint
min
unit
server
endtoend
watch
WORKFLOW

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

112. Orion
Two versions: Jetty or Node.js

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

115. PROJECTS
MANAGEMENT

117. EDITOR

120. FIRST CLASS
GIT SUPPORT

125. SEARCH

127. PLUGINS

132. READY TO
DEPLOY

135. DOCKER
SUPPORT
SOON

136. WHAT ABOUT
ECLIPSE?

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

138. Front-end
...

139. WHAT ABOUT
OTHERS?

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

146. TO SUM UP

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