Modern Web Application Development Workflow - EclipseCon Europe 2014
1 like•869 views
The document discusses modern web application development workflows. It begins by looking at past workflows that lacked structure and organization. It then introduces Node.js as a JavaScript runtime and describes how JavaScript tools like Yeoman, Bower, Grunt and Gulp help provide structure, manage dependencies, automate tasks and enforce best practices. The document provides an overview of how these tools work and how they can be used to improve development workflows.
![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'
}
});](https://image.slidesharecdn.com/webapplicationsdevelopmentworkflow-eclipseconeurope-141030053558-conversion-gate01/85/Modern-Web-Application-Development-Workflow-EclipseCon-Europe-2014-91-320.jpg)
Modern Web Application Development Workflow - EclipseCon Europe 2014
- 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
- 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
- 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
- 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. YEOMANangular.js generator > npm install -g generator-angular
- 35. YEOMANcreate an Angular project > yo angular
- 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?
- 52. BOWER
- 54. GRUNT
- 56. GULP
- 58. AND OTHERS
- 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
- 81. BUILD
- 83. GRUNT GULP
- 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. 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' } });
- 93. GRUNT Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore
- 94. GRUNTgruntfile.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'))
- 102. GULPgulpfile.js structure 3 parts: - task loading - task configuration - task registration
- 103. GULP
- 104. GULPdifferences with Grunt node.js streams (asynchronous by nature) nice and simple api less IO operations
- 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
- 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
- 130. SEARCH
- 132. PLUGINS
- 137. READY TO DEPLOY
- 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.