Modern Web Application Development Workflow - EclipseCon Europe 2014

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. 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. YEOMAN angular.js generator > npm install -g generator-angular
35. YEOMAN create 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. 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' } });
92. GRUNT Configuration in Gruntfile.js
93. GRUNT Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore
94. GRUNT gruntfile.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. GULP gulpfile.js structure 3 parts: - task loading - task configuration - task registration
103. GULP
104. GULP differences 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.