Download as PDF, PPTX
Uploaded byStรฉphane Bรฉgaudeau
Modern Web Application Development Workflow - EclipseCon US 2014
The document outlines the evolution of web application development workflows, highlighting the transition from manual HTML file management to using modern tools like Yeoman, Bower, Grunt, and Gulp. It emphasizes the importance of a structured development workflow that includes dependency management, static analysis, and efficient build processes. The document also discusses the roles and functionalities of various tools used in the modern development environment, showcasing their capabilities in managing processes and improving code quality.
More Related Content
Modern Web Application Development Workflow - EclipseCon US 2014
- 1.
- 2. FIRST, LETโS LOOK ATTHE PAST
- 3. HOW WEB APPLICATIONS USED TOBE DONE?
- 4. THROW A BUNCHOF HTMLFILES
- 5. THROW A BUNCHOF HTMLFILES ADD A COUPLE OF CSSFILES
- 6. THROW A BUNCHOF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS
- 7. THROW A BUNCHOF HTMLFILES ADD A COUPLE OF CSSFILES PUT SOME JAVASCRIPTIN ALL THIS AND CALL IT A DAY...
- 8. COME BACK 6MONTHSLATER AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
- 10.
- 11.
- 12.
- 13.
- 14. Node.js stand alone JavaScriptapplications
- 15. Node.js stand alone JavaScriptapplications created by JavaScript developers
- 16. Node.js stand alone JavaScriptapplications created by JavaScript developers for JavaScript developers
- 17.
- 18.
- 19.
- 20. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED
- 21. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED -MAINTAINS YOUR DEPENDENCIES
- 22. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES
- 23. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS
- 24. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS
- 25. A GOOD DEVELOPMENT WORKFLOW -HELPS YOUGET STARTED -MAINTAINS YOUR DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS
- 26. HOW TO GETSTARTED?
- 28. YEOMAN Born in 2012 Variouscontributors (Employees from Google, Twitter, etc)
- 29. YEOMAN scaffolding - structure -compilation - static analysis - dependencies management - development tools - unit testing
- 30. YEOMAN download > npminstall -g yo โ-gโ global install
- 31. YEOMAN Various generators: โ Angular โEmber โ Backbone And all the other popular frameworks...
- 32. YEOMANbootstrapping You can alsouse Yeoman to generate an Yeoman generator project
- 33. YEOMANangular.js generator > npminstall -g generator-angular
- 34. YEOMANcreate an Angularproject > yo angular
- 35.
- 36.
- 37. YEOMANit creates theproject
- 38. YEOMANit downloads theinternet
- 39. YEOMANit uses somedark magic
- 40. Enjoy the view,Yeoman takes care of everythingโฆ
- 42. What does theresult look like?
- 43.
- 44.
- 45.
- 46.
- 47. YEOMANevolution over time >yo angular:controller myController create the code and its unit test
- 48. ITโS MAGIC! and itwill be your job to maintain it...
- 49.
- 50. BUT HOW DOESIT WORK?
- 51.
- 52.
- 54.
- 56.
- 58.
- 59.
- 60.
- 62. BOWER Package manager forthe web Born in 2012 Created by Twitter and other contributors over time
- 63. BOWER Download > npminstall -g bower
- 64. BOWER Find apackage > bower search jquery
- 65. BOWER Find theversions available > bower info jquery
- 66. BOWER Add aspecific dependency > bower install jquery#1.10.2 --save install jquery and save this new dependency
- 67. BOWER runtime dependencies inbower.json
- 68.
- 69.
- 70. BOWER Add allyour dependencies > bower install
- 71. BOWER See yourdependencies > bower list
- 72. BOWER Package management alwayscomes with its set of problems:
- 73. BOWER Package management alwayscomes with its set of problems: - how can I create a new package?
- 74. BOWER Package management alwayscomes with its set of problems: - how can I create a new package? - how can I host a bower repository?
- 75. BOWER Package management alwayscomes 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?
- 76. BOWER Create abower package > bower init
- 77. BOWER Host abower repository
- 78. BOWER Host abower repository > git init
- 79. BOWER Host abower repository > git init > git add .
- 80. BOWER Host abower repository > git init > git add . > git commit -m โInitial commit.โ
- 81. BOWER Host abower repository > git init > git add . > git commit -m โInitial commit.โ > git remote add origin โฆ
- 82. BOWER Host abower repository > git init > git add . > git commit -m โInitial commit.โ > git remote add origin โฆ > git push origin master
- 83. BOWER Host abower repository SVN support has been added with bower 1.3 for those who careโฆ.
- 84. BOWER Use bowerwith Git > bower install https://myrepository.git
- 85. BOWER Host multipleversions > git tag -a 1.4 -m 'version 1.4' > bower install https://myrepository.git#1.4
- 86. BOWER Host multipleversions Use semantic versioning to easily let your consumers handle API breakages
- 87. BOWER Download > bowerinstall jquery > bower install git://github.com/jquery/jquery.git
- 88. BOWER Download > bowerinstall jquery > bower install git://github.com/jquery/jquery.git How do this work?
- 89. BOWER Registry https://github.com/bower/registry A simpleweb server listing Git repository URLs
- 90. BOWER Register > bowerregister myrepository https://โฆgit > bower install myrepository
- 91.
- 93.
- 94.
- 95.
- 96. GRUNT is abit older so its ECOSYSTEM is more mature
- 97. Grunt and Gulp developmenttools dependencies in package.json >npm install
- 98.
- 99.
- 101.
- 102. GRUNTgruntfile.js structure 3 parts: -Taskloading -Task configuration -Task registration
- 103. GRUNT An example: Staticcode analysis with JSHINT
- 104.
- 105. HOW DO YOUUSE IT? >grunt >grunt jshint:all
- 106.
- 108.
- 109. GULPgulpfile.js structure 3 parts: -task loading - task configuration - task registration
- 110.
- 111.
- 112.
- 113. GULPdifferences with Grunt node.jsstreams (asynchronous by nature) nice and simple api concurrent execution with Orchestrator
- 114.
- 115. STATIC ANALYSIS grunt-contrib-jshint gulp-jshint Detect codingerrors in your JavaScript files (Checkstyle-like reports)
- 116. RESPONSIVE IMAGES grunt-responsive-images gulp-responsive-images Produce imagesat different sizes for responsive websites
- 117.
- 118.
- 119.
- 120. WHY SASS? - import -extends - function - mixins - variables - compilation errors
- 121. MINIFICATION grunt-contrib-uglify gulp-uglify Reduce the sizeof JavaScript files
- 122.
- 123.
- 124. TESTING Frameworks: Jasmine, Mocha,QUnit Runner: Karma Code Coverage: Istanbul
- 125.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133. DEMONSTRATION Murphyโs Law: Anythingthat can go wrong โ will go wrong
- 134. BACKUP SLIDES (if everythingfailed, you still have some pictures)
- 139. KARMA + GRUNT/GULP Testyour application on various devices
- 141.
- 142. YEOMAN + BOWER+ GRUNT/GULP and their pluginsโฆ = AWESOME
- 143.
- 144. 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.