Modern Web Application Development Workflow - EclipseCon France 2014

People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files in a text editor, putting them in a folder 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 and where the Eclipse Foundation's tools stand in this new world!

In this talk, we will start by having a look at all the new development tools that have appeared with the arrival of Node.js and how they are used by the web development community.

With tools like Bower used to manage the dependencies of a project, Grunt and Gulp used for the continuous integration and Yeoman used to kickstart web applications, web developers have dramatically increased their productivity.

After that, we will see what tools like the Eclipse IDE and Orion can offer to web developers in order to build and maintain their applications and finally how they could be improved to provide the features needed by web developers.

Transcript

1. MODERN WEB APPLICATION DEVELOPMENT WORKFLOW
2. FIRST, LET’S LOOK AT THE PAST
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
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. YEOMAN angular.js generator > npm install -g generator-angular
34. YEOMAN create 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. GRUNT configuration 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. GRUNT gruntfile.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. GULP gulpfile.js structure 3 parts: - task loading - task configuration - task registration
100. GULP
101. GULP differences 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.