Modern Web Application Development Workflow - EclipseCon France 2014

3,055 views

Published on

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.

Published in: Technology

Modern Web Application Development Workflow - EclipseCon France 2014

  1. 1. MODERN WEB APPLICATION DEVELOPMENT WORKFLOW
  2. 2. FIRST, LET’S LOOK AT THE PAST
  3. 3. THROW A BUNCH OF HTMLFILES
  4. 4. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES
  5. 5. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS
  6. 6. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS AND CALL IT A DAY...
  7. 7. COME BACK 6MONTHS LATER AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
  8. 8. Node.js ≠ Server-side JavaScript
  9. 9. Node.js stand alone JavaScript runtime
  10. 10. Node.js stand alone JavaScript runtime using v8, Chrome’s JavaScript engine
  11. 11. Node.js stand alone JavaScript applications
  12. 12. Node.js stand alone JavaScript applications created by JavaScript developers
  13. 13. Node.js stand alone JavaScript applications created by JavaScript developers for JavaScript developers
  14. 14. BRAND NEW WORLD
  15. 15. JAVASCRIPT DEVELOPMENT TOOLS
  16. 16. JAVASCRIPT DEVELOPMENT WORKFLOW
  17. 17. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED
  18. 18. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES
  19. 19. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES
  20. 20. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS
  21. 21. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS
  22. 22. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS
  23. 23. HOW TO GET STARTED?
  24. 24. YEOMAN Born in 2012 Various contributors (Employees from Google, Twitter, etc)
  25. 25. YEOMAN scaffolding - structure - compilation - static analysis - dependencies management - development tools - unit testing
  26. 26. YEOMAN download > npm install -g yo “-g” global install
  27. 27. YEOMAN Various generators: ○ Angular ○ Ember ○ Backbone And all the other popular frameworks...
  28. 28. YEOMANangular.js generator > npm install -g generator-angular
  29. 29. YEOMANcreate an Angular project > yo angular
  30. 30. Select some dependencies
  31. 31. Choose some options
  32. 32. It creates the project
  33. 33. It downloads half of the internet
  34. 34. It uses some dark magic
  35. 35. Enjoy the view, Yeoman takes care of everything…
  36. 36. What does the result look like?
  37. 37. STRUCTURE
  38. 38. CONTENT
  39. 39. DEPENDENCIES
  40. 40. DEV TOOLS
  41. 41. IT’S MAGIC! and it will be your job to maintain it...
  42. 42. HAPPY?
  43. 43. BUT HOW DOES IT WORK?
  44. 44. YEOMAN HAS FRIENDS
  45. 45. BOWER
  46. 46. GRUNT
  47. 47. GULP
  48. 48. AND OTHERS
  49. 49. DEPENDENCIES MANAGEMENT
  50. 50. BOWER
  51. 51. BOWER Package manager for the web Born in 2012 Created by Twitter and other contributors over time
  52. 52. BOWER Download > npm install -g bower
  53. 53. Find a package: bower search
  54. 54. Find more information: bower info
  55. 55. BOWER Add a specific dependency > bower install jquery#1.10.2 --save install jquery and save this new dependency
  56. 56. BOWER runtime dependencies in bower.json
  57. 57. DEPENDENCIES
  58. 58. BOWER Add all your dependencies > bower install
  59. 59. See your dependencies: bower list
  60. 60. BOWER Package management always comes with its set of problems:
  61. 61. BOWER Package management always comes with its set of problems: - how can I create a new package?
  62. 62. BOWER Package management always comes with its set of problems: - how can I create a new package? - how can I host a bower repository?
  63. 63. Create a bower package: bower init
  64. 64. BOWER Use bower with Git > bower install https://myrepository.git
  65. 65. BOWER Host multiple versions > git tag -a 1.4 -m 'version 1.4' > bower install https://myrepository.git#1.4
  66. 66. BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git
  67. 67. BOWER Registry https://github.com/bower/registry A simple web server listing Git repository URLs
  68. 68. BOWER Register > bower register myrepository https://…git > bower install myrepository
  69. 69. BUILD
  70. 70. GRUNT GULP
  71. 71. CONFIGURATION GULP CODE GRUNT
  72. 72. EQUALLY POWERFUL
  73. 73. GRUNT is a bit older so its ECOSYSTEM is more mature
  74. 74. Grunt and Gulp development tools dependencies in package.json >npm install
  75. 75. DEV TOOLS
  76. 76. GRUNT
  77. 77. 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' } });
  78. 78. GRUNT Configuration in Gruntfile.js
  79. 79. GRUNT Global install before Grunt 0.4 Updating Grunt cannot break existing projects anymore
  80. 80. GRUNTgruntfile.js structure 3 parts: -Task loading -Task configuration -Task registration
  81. 81. GRUNT An example: Static code analysis with JSHINT
  82. 82. GRUNT
  83. 83. HOW DO YOU USE IT? >grunt >grunt jshint:all
  84. 84. GULP
  85. 85. 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'))
  86. 86. GULP Configuration in Gulpfile.js
  87. 87. GULPgulpfile.js structure 3 parts: - task loading - task configuration - task registration
  88. 88. GULP
  89. 89. GULPdifferences with Grunt node.js streams (asynchronous by nature) nice and simple api less IO operations
  90. 90. BUILD TASKS
  91. 91. STATIC ANALYSIS grunt-contrib-jshint gulp-jshint Detect coding errors in your JavaScript files
  92. 92. STATIC ANALYSIS Various style of reports (checkstyle, html, etc) Configuration in .jshtinrc
  93. 93. MINIFICATION grunt-contrib-uglify gulp-uglify Reduce the size of JavaScript files
  94. 94. CSS TRIMMING grunt-uncss gulp-uncss-task Remove unused CSS rules
  95. 95. TESTING Frameworks: Jasmine & QUnit Runner: Karma Code Coverage: Istanbul
  96. 96. LIVE RELOAD grunt-contrib-watch gulp-livereload Reload automatically the web application if some files have been changed
  97. 97. init concat jshint min unit server endtoend watch WORKFLOW
  98. 98. Orion Eclipse project Introduced in 2011 in the Eclipse Foundation
  99. 99. Orion Two versions: Jetty or Node.js
  100. 100. Orion npm install orion node node_modules/orion/server.js /projectpath
  101. 101. PROJECTS MANAGEMENT
  102. 102. EDITOR
  103. 103. FIRST CLASS GIT SUPPORT
  104. 104. SEARCH
  105. 105. PLUGINS
  106. 106. READY TO DEPLOY
  107. 107. DOCKER SUPPORT SOON
  108. 108. WHAT ABOUT ECLIPSE?
  109. 109. Back-end Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc
  110. 110. Front-end ...
  111. 111. WHAT ABOUT OTHERS?
  112. 112. Back-end Lot of tooling for Java development Jetty, EclipseLink, Webtools, etc
  113. 113. TO SUM UP
  114. 114. 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.

×