Modern Web Application Development Workflow - EclipseCon US 2014

  • 4,690 views
Uploaded 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. …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,690
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
96
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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