Successfully reported this slideshow.

Modern Web Application Development Workflow - EclipseCon US 2014

16,377 views

Published on

People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor 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!

We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet.

Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it.

This talk has been presented during EclipseCon North America 2014 in San Francisco

Modern Web Application Development Workflow - EclipseCon US 2014

  1. 1. MODERN WEB APPLICATION DEVELOPMENT WORKFLOW
  2. 2. FIRST, LET’S LOOK AT THE PAST
  3. 3. HOW WEB APPLICATIONS USED TO BE DONE?
  4. 4. THROW A BUNCH OF HTMLFILES
  5. 5. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES
  6. 6. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS
  7. 7. THROW A BUNCH OF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS AND CALL IT A DAY...
  8. 8. COME BACK 6MONTHS LATER AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
  9. 9. MOVING FORWARD
  10. 10. A NODE.JS WORLD
  11. 11. Node.js ≠ Server-side JavaScript
  12. 12. Node.js stand alone JavaScript runtime
  13. 13. Node.js stand alone JavaScript applications
  14. 14. Node.js stand alone JavaScript applications created by JavaScript developers
  15. 15. Node.js stand alone JavaScript applications created by JavaScript developers for JavaScript developers
  16. 16. BRAND NEW WORLD
  17. 17. JAVASCRIPT DEVELOPMENT TOOLS
  18. 18. JAVASCRIPT DEVELOPMENT WORKFLOW
  19. 19. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED
  20. 20. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES
  21. 21. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES
  22. 22. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS
  23. 23. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS
  24. 24. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS
  25. 25. HOW TO GET STARTED?
  26. 26. YEOMAN Born in 2012 Various contributors (Employees from Google, Twitter, etc)
  27. 27. YEOMAN scaffolding - structure - compilation - static analysis - dependencies management - development tools - unit testing
  28. 28. YEOMAN download > npm install -g yo “-g” global install
  29. 29. YEOMAN Various generators: ○ Angular ○ Ember ○ Backbone And all the other popular frameworks...
  30. 30. YEOMANbootstrapping You can also use Yeoman to generate an Yeoman generator project
  31. 31. YEOMANangular.js generator > npm install -g generator-angular
  32. 32. YEOMANcreate an Angular project > yo angular
  33. 33. YEOMANselect some dependencies
  34. 34. YEOMANchoose some options
  35. 35. YEOMANit creates the project
  36. 36. YEOMANit downloads the internet
  37. 37. YEOMANit uses some dark magic
  38. 38. Enjoy the view, Yeoman takes care of everything…
  39. 39. What does the result look like?
  40. 40. STRUCTURE
  41. 41. CONTENT
  42. 42. DEPENDENCIES
  43. 43. DEV TOOLS
  44. 44. YEOMANevolution over time > yo angular:controller myController create the code and its unit test
  45. 45. IT’S MAGIC! and it will be your job to maintain it...
  46. 46. HAPPY?
  47. 47. BUT HOW DOES IT WORK?
  48. 48. YEOMAN HAS FRIENDS
  49. 49. BOWER
  50. 50. GRUNT
  51. 51. GULP
  52. 52. AND OTHERS
  53. 53. DEPENDENCIES MANAGEMENT
  54. 54. BOWER
  55. 55. BOWER Package manager for the web Born in 2012 Created by Twitter and other contributors over time
  56. 56. BOWER Download > npm install -g bower
  57. 57. BOWER Find a package > bower search jquery
  58. 58. BOWER Find the versions available > bower info jquery
  59. 59. BOWER Add a specific dependency > bower install jquery#1.10.2 --save install jquery and save this new dependency
  60. 60. BOWER runtime dependencies in bower.json
  61. 61. DEPENDENCIES
  62. 62. LOCATION
  63. 63. BOWER Add all your dependencies > bower install
  64. 64. BOWER See your dependencies > bower list
  65. 65. BOWER Package management always comes with its set of problems:
  66. 66. BOWER Package management always comes with its set of problems: - how can I create a new package?
  67. 67. BOWER Package management always comes with its set of problems: - how can I create a new package? - how can I host a bower repository?
  68. 68. BOWER Package management always comes with its set of problems: - how can I create a new package? - how can I host a bower repository? - what kind of exotic tools will I have to use?
  69. 69. BOWER Create a bower package > bower init
  70. 70. BOWER Host a bower repository
  71. 71. BOWER Host a bower repository > git init
  72. 72. BOWER Host a bower repository > git init > git add .
  73. 73. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.”
  74. 74. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.” > git remote add origin …
  75. 75. BOWER Host a bower repository > git init > git add . > git commit -m “Initial commit.” > git remote add origin … > git push origin master
  76. 76. BOWER Host a bower repository SVN support has been added with bower 1.3 for those who care….
  77. 77. BOWER Use bower with Git > bower install https://myrepository.git
  78. 78. BOWER Host multiple versions > git tag -a 1.4 -m 'version 1.4' > bower install https://myrepository.git#1.4
  79. 79. BOWER Host multiple versions Use semantic versioning to easily let your consumers handle API breakages
  80. 80. BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git
  81. 81. BOWER Download > bower install jquery > bower install git://github.com/jquery/jquery.git How do this work?
  82. 82. BOWER Registry https://github.com/bower/registry A simple web server listing Git repository URLs
  83. 83. BOWER Register > bower register myrepository https://…git > bower install myrepository
  84. 84. BUILD
  85. 85. GRUNT GULP
  86. 86. CONFIGURATION GULP CODE GRUNT
  87. 87. EQUALLY POWERFUL
  88. 88. GRUNT is a bit older so its ECOSYSTEM is more mature
  89. 89. Grunt and Gulp development tools dependencies in package.json >npm install
  90. 90. DEV TOOLS
  91. 91. GRUNT
  92. 92. GRUNT Configuration in Gruntfile.js
  93. 93. GRUNTgruntfile.js structure 3 parts: -Task loading -Task configuration -Task registration
  94. 94. GRUNT An example: Static code analysis with JSHINT
  95. 95. GRUNT
  96. 96. HOW DO YOU USE IT? >grunt >grunt jshint:all
  97. 97. GULP
  98. 98. GULP Configuration in Gulpfile.js
  99. 99. GULPgulpfile.js structure 3 parts: - task loading - task configuration - task registration
  100. 100. GULP
  101. 101. GULP launch > gulp
  102. 102. SOUNDS FAMILIAR?
  103. 103. GULPdifferences with Grunt node.js streams (asynchronous by nature) nice and simple api concurrent execution with Orchestrator
  104. 104. BUILD TASKS
  105. 105. STATIC ANALYSIS grunt-contrib-jshint gulp-jshint Detect coding errors in your JavaScript files (Checkstyle-like reports)
  106. 106. RESPONSIVE IMAGES grunt-responsive-images gulp-responsive-images Produce images at different sizes for responsive websites
  107. 107. COMPRESS IMAGES grunt-contrib-imagemin gulp-imagemin Compress and optimize images
  108. 108. COFFEESCRIPT grunt-contrib-coffee gulp-coffee Compile CoffeeScript source code to JavaScript
  109. 109. SASS grunt-contrib-sass gulp-sass Compile SASS to CSS
  110. 110. WHY SASS? - import - extends - function - mixins - variables - compilation errors
  111. 111. MINIFICATION grunt-contrib-uglify gulp-uglify Reduce the size of JavaScript files
  112. 112. CSS TRIMMING grunt-uncss gulp-uncss-task Remove unused CSS rules
  113. 113. TESTING
  114. 114. TESTING Frameworks: Jasmine, Mocha, QUnit Runner: Karma Code Coverage: Istanbul
  115. 115. TESTING Hudson/Jenkins integration? karma-junit-reporter karma-coverage (Cobertura reports)
  116. 116. CHROME DEVTOOLS
  117. 117. WORKSPACE
  118. 118. SNIPPETS
  119. 119. AUDITS
  120. 120. TIMELINE
  121. 121. REMOTE DEBUGGING
  122. 122. DEMONSTRATION Murphy’s Law: Anything that can go wrong — will go wrong
  123. 123. BACKUP SLIDES (if everything failed, you still have some pictures)
  124. 124. KARMA + GRUNT/GULP Test your application on various devices
  125. 125. TO SUM UP
  126. 126. YEOMAN + BOWER + GRUNT/GULP and their plugins… = AWESOME
  127. 127. QUESTIONS?
  128. 128. 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.

×