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/#/