Modern Web Application Development Workflow - EclipseCon France 2014
13 likes3,471 views
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.
![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-eclipseconfrance-140620025410-phpapp02/85/Modern-Web-Application-Development-Workflow-EclipseCon-France-2014-88-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (16)
Ad
Similar to Modern Web Application Development Workflow - EclipseCon France 2014 (20)
Ad
Recently uploaded (20)
Modern Web Application Development Workflow - EclipseCon France 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
- 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. YEOMANangular.js generator > npm install -g generator-angular
- 34. YEOMANcreate an Angular project > yo angular
- 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?
- 50. BOWER
- 52. GRUNT
- 54. GULP
- 56. AND OTHERS
- 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
- 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. 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' } });
- 90. GRUNT Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore
- 91. GRUNTgruntfile.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'))
- 99. GULPgulpfile.js structure 3 parts: - task loading - task configuration - task registration
- 100. GULP
- 101. GULPdifferences 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
- 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
- 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.