Re-engineering Workflows: Changing the Life Cycle of an Electronic ...
Engineering Modern Web Development Workflows
-
Upload
uxbert -
Category
Engineering
-
view
101 -
download
1
Transcript of Engineering Modern Web Development Workflows
How web applications used to be?✓ ADD HTML FILES
✓ ADD CSS FILES
✓ ADD SOME JAVASCRIPT IN ALL THIS
AND CALL IT A DAY...
Come Back 6 Months LaterAND TRY TO REMEMBER HOW TO
MAINTAIN YOUR CODE
MOVING FORWARD
Source: http://stackoverflow.com/research/developer-survey-2015#tech
JavaScript is the language of the web
JavaScript Development Tools/Workflows/NPM
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
Modern Web Development Cycle
Developing for Web today
Our tooling landscape isgetting more complex
How to Get Started?
“Yeoman kickstarts new projects, prescribing best practices and tools to help you stay productive”
Yeoman Generators
Over 3900+ available today
Anyone can write them
<Yeoman Friends />
Task Runners
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment
<gulpfile.js />
Gulp vs Grunt
Based on files
Configuration over code
Came out first
Based on streams
Code over configuration
Dependency Manager
<bower.json />
Scaffold, write less with YoBuild, preview and test with Grunt or GulpManage dependencies with Bower
<Iteration Workflow />
<atom-packages>
BrowserSync
Has plugin for Gulp, Grunt & Webpack
<demo />
Automation isn’t about being lazy. It's about being efficient.
If you aren’t using productivity toolsor task automation, you are workingtoo hard
<thank-you />
<?=questions ?>
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/#/