Modern Web Application Development Workflow

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

Transcript

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 HTML FILES
5. THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES
6. THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES PUT SOME JAVASCRIPT IN ALL THIS
7. THROW A BUNCH OF HTML FILES ADD A COUPLE OF CSS FILES PUT SOME JAVASCRIPT IN ALL THIS AND CALL IT A DAY...
8. COME BACK 6 MONTHS 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. YEOMAN bootstrapping You can also use Yeoman to generate an Yeoman generator project
33. YEOMAN angular.js generator > npm install -g generator-angular
34. YEOMAN create an Angular project > yo angular
35. YEOMAN select some dependencies
36. YEOMAN choose some options
37. YEOMAN it creates the project
38. YEOMAN it downloads the internet
39. YEOMAN it 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. YEOMAN evolution 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. GRUNT gruntfile.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. GULP gulpfile.js structure 3 parts: - task loading - task configuration - task registration
110. GULP
111. GULP launch > gulp
112. SOUNDS FAMILIAR?
113. GULP differences 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.