Engineering Modern Web Development Workflows
-
Upload
uxbert -
Category
Engineering
-
view
101 -
download
1
Transcript of Engineering Modern Web Development Workflows
![Page 1: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/1.jpg)
![Page 2: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/2.jpg)
![Page 3: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/3.jpg)
![Page 4: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/4.jpg)
![Page 5: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/5.jpg)
![Page 6: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/6.jpg)
![Page 7: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/7.jpg)
How web applications used to be?✓ ADD HTML FILES
✓ ADD CSS FILES
✓ ADD SOME JAVASCRIPT IN ALL THIS
AND CALL IT A DAY...
![Page 8: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/8.jpg)
Come Back 6 Months LaterAND TRY TO REMEMBER HOW TO
MAINTAIN YOUR CODE
![Page 9: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/9.jpg)
![Page 10: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/10.jpg)
MOVING FORWARD
![Page 11: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/11.jpg)
Source: http://stackoverflow.com/research/developer-survey-2015#tech
JavaScript is the language of the web
![Page 12: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/12.jpg)
JavaScript Development Tools/Workflows/NPM
![Page 13: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/13.jpg)
Characteristics of Ideal Development Workflow
✓ Helps you get started
✓ Setup file structure
✓ Maintain your dependencies
✓ Enforces best practices
✓ Prepares your tools
✓ Eases the release process
![Page 14: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/14.jpg)
Modern Web Development Cycle
![Page 15: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/15.jpg)
Developing for Web today
![Page 16: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/16.jpg)
Our tooling landscape isgetting more complex
![Page 17: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/17.jpg)
How to Get Started?
![Page 18: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/18.jpg)
![Page 19: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/19.jpg)
“Yeoman kickstarts new projects, prescribing best practices and tools to help you stay productive”
![Page 20: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/20.jpg)
![Page 21: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/21.jpg)
![Page 22: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/22.jpg)
Yeoman Generators
Over 3900+ available today
Anyone can write them
![Page 23: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/23.jpg)
![Page 24: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/24.jpg)
<Yeoman Friends />
![Page 25: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/25.jpg)
Task Runners
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment
![Page 26: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/26.jpg)
![Page 27: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/27.jpg)
![Page 28: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/28.jpg)
<gulpfile.js />
![Page 29: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/29.jpg)
Gulp vs Grunt
Based on files
Configuration over code
Came out first
Based on streams
Code over configuration
![Page 30: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/30.jpg)
Dependency Manager
![Page 31: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/31.jpg)
![Page 32: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/32.jpg)
![Page 33: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/33.jpg)
<bower.json />
![Page 34: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/34.jpg)
Scaffold, write less with YoBuild, preview and test with Grunt or GulpManage dependencies with Bower
![Page 35: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/35.jpg)
<Iteration Workflow />
![Page 36: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/36.jpg)
![Page 37: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/37.jpg)
<atom-packages>
![Page 38: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/38.jpg)
![Page 39: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/39.jpg)
BrowserSync
![Page 40: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/40.jpg)
![Page 41: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/41.jpg)
Has plugin for Gulp, Grunt & Webpack
![Page 42: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/42.jpg)
![Page 43: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/43.jpg)
<demo />
![Page 44: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/44.jpg)
Automation isn’t about being lazy. It's about being efficient.
![Page 45: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/45.jpg)
If you aren’t using productivity toolsor task automation, you are workingtoo hard
![Page 46: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/46.jpg)
<thank-you />
![Page 47: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/47.jpg)
<?=questions ?>
![Page 48: Engineering Modern Web Development Workflows](https://reader036.fdocuments.net/reader036/viewer/2022070601/5886f38b1a28abba528b755f/html5/thumbnails/48.jpg)
Resources
https://speakerdeck.com/addyosmani/automating-front-end-workflow
https://speakerdeck.com/addyosmani/front-end-tooling-workflows
http://www.slideshare.net/sbegaudeau/modern-web-application-development-workflow
https://github.com/mehcode/awesome-atom
http://todomvc.com/
http://whichcatisyourjavascriptframework.com/
http://rupl.github.io/frontend-testing/#/