People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor and uploading them on the web. Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years! We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet. Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it. This talk has been presented during EclipseCon North America 2014 in San Francisco

1. MODERN
WEB APPLICATION
DEVELOPMENT
WORKFLOW

2. FIRST, LET’S LOOK
AT THE PAST

3. HOW WEB
APPLICATIONS
USED TO BE DONE?

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

10. MOVING
FORWARD

11. A NODE.JS WORLD

12. Node.js
≠
Server-side JavaScript

13. Node.js
stand alone JavaScript runtime

14. Node.js
stand alone JavaScript applications

15. Node.js
stand alone JavaScript applications
created by JavaScript developers

16. Node.js
stand alone JavaScript applications
created by JavaScript developers
for JavaScript developers

17. BRAND NEW WORLD

18. JAVASCRIPT
DEVELOPMENT
TOOLS

19. JAVASCRIPT
DEVELOPMENT
WORKFLOW

20. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED

21. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES

22. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES

23. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS

24. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS
-FIGHTS REGRESSIONS

25. A GOOD
DEVELOPMENT
WORKFLOW
-HELPS YOU GET STARTED
-MAINTAINS YOUR DEPENDENCIES
-ENFORCES BEST PRACTICES
-PREPARES YOUR TOOLS
-FIGHTS REGRESSIONS
-EASES THE RELEASE PROCESS

26. HOW TO GET STARTED?

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

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

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

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

32. YEOMANbootstrapping
You can also use Yeoman to generate an
Yeoman generator project

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

34. YEOMANcreate an Angular project
> yo angular

35. YEOMANselect some dependencies

36. YEOMANchoose some options

37. YEOMANit creates the project

38. YEOMANit downloads the internet

39. YEOMANit uses some dark magic

40. 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. YEOMANevolution over time
> yo angular:controller myController
create the code and its unit test

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

49. HAPPY?

50. BUT HOW DOES IT WORK?

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. BOWER Find a package
> bower search jquery

65. BOWER Find the versions available
> bower info jquery

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

70. BOWER Add all your dependencies
> bower install

71. BOWER See your dependencies
> bower list

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

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

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?

75. 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?

76. BOWER Create a bower package
> bower init

77. BOWER Host a bower repository

78. BOWER Host a bower repository
> git init

79. BOWER Host a bower repository
> git init
> git add .

80. BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”

81. BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”
> git remote add origin …

82. BOWER Host a bower repository
> git init
> git add .
> git commit -m “Initial commit.”
> git remote add origin …
> git push origin master

83. BOWER Host a bower repository
SVN support has been added with bower 1.3
for those who care….

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

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

86. BOWER Host multiple versions
Use semantic versioning to easily let your
consumers handle API breakages

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

88. BOWER Download
> bower install jquery
> bower install git://github.com/jquery/jquery.git
How do this work?

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

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

91. BUILD

93. GRUNT GULP

94. CONFIGURATION
GULP
CODE
GRUNT

95. EQUALLY
POWERFUL

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

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

98. DEV TOOLS

99. GRUNT

101. GRUNT
Configuration in Gruntfile.js

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

103. GRUNT
An example: Static code analysis with JSHINT

104. GRUNT

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

106. GULP

108. GULP
Configuration in Gulpfile.js

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

110. GULP

111. GULP launch
> gulp

112. SOUNDS
FAMILIAR?

113. GULPdifferences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
concurrent execution with Orchestrator

114. BUILD TASKS

115. STATIC ANALYSIS
grunt-contrib-jshint
gulp-jshint
Detect coding errors in your JavaScript files
(Checkstyle-like reports)

116. RESPONSIVE IMAGES
grunt-responsive-images
gulp-responsive-images
Produce images at different sizes for responsive
websites

117. COMPRESS IMAGES
grunt-contrib-imagemin
gulp-imagemin
Compress and optimize images

118. COFFEESCRIPT
grunt-contrib-coffee
gulp-coffee
Compile CoffeeScript source code to JavaScript

119. SASS
grunt-contrib-sass
gulp-sass
Compile SASS to CSS

120. WHY SASS?
- import
- extends
- function
- mixins
- variables
- compilation errors

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

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

123. TESTING

124. TESTING
Frameworks: Jasmine, Mocha, QUnit
Runner: Karma
Code Coverage: Istanbul

125. TESTING
Hudson/Jenkins integration?
karma-junit-reporter
karma-coverage (Cobertura reports)

127. CHROME
DEVTOOLS

128. WORKSPACE

129. SNIPPETS

130. AUDITS

131. TIMELINE

132. REMOTE
DEBUGGING

133. DEMONSTRATION
Murphy’s Law: Anything that can go
wrong — will go wrong

134. BACKUP SLIDES
(if everything failed, you still
have some pictures)

139. KARMA + GRUNT/GULP
Test your application on
various devices

141. TO SUM UP

142. YEOMAN + BOWER + GRUNT/GULP
and their plugins…
=
AWESOME

143. QUESTIONS?

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