TOOLING &
WORKFLOWS

ACHAL VARMA

CS196, SP'16

TOOLING &
WORKFLOWS

AKA:
How not to hate yourself for being
a front-end developer in 2016

what front-end
development should be:

what front-end development IS LIKE:

Most COMMON COMPLAINTS:

Most COMMON COMPLAINTS:

• Time consuming

Most COMMON COMPLAINTS:

• Time consuming

• Mundane

Most COMMON COMPLAINTS:

• Time consuming

• Mundane

• Debugging is usually hell

DEVELOPER PRODUCTIVITY
IS IMPORTANT!

DEVELOPER PRODUCTIVITY
(and sanity)
IS IMPORTANT!

The Usual workflow

The Usual workflow

Scaffolding/Structuring the proJect

The Usual workflow

Scaffolding/Structuring the proJect

Adding libraries and dependencies

The Usual workflow

Scaffolding/Structuring the proJect

Adding libraries and dependencies

adding frameworks and hooking them in

ACTUALLY WRITING CODE

TESTING YOUR CODE

OPTIMIZING IMAGES, SCRIPTS AND CSS

DEPLOYING

ACTUALLY WRITING CODE

TESTING YOUR CODE

OPTIMIZING IMAGES, SCRIPTS AND CSS

DEPLOYING

RINSE AND REPEAT

Automate!

Don't pet sweaty things.

Automate!

Don't pet sweaty things.

Automate!

Don't SWEAT PETTY things.

The IDEAL workflow

SCAFFOLD

WRITE CODE

AUTOMATE THE BORING STUFF

DEPLOY

WHAT A WORKFLOW SHOULD DO:

• Limit time spent writing boilerplate code

• Improve OVERALL productivity

• REDUCE TIME B/W DEVELOPMENT and TESTING

AutomatION

ISN'T JUST ABOUT EFFICIENCY AND SPEED

AutomatION

ISN'T JUST ABOUT EFFICIENCY AND SPEED

IT'S ALSO ABOUT CONVENIENCE

CONVENIENCE

USE TOOLS WHICH DO SOME
HEAVY LIFTING FOR YOU

SASS

• Extension of CSS meant to make dev. easier

• Variables, Nested Rules, @Extend!

• easier to debug because of encapsulation

SASS

• Extension of CSS meant to make dev. easier

• Variables, Nested Rules, @Extend!

• easier to debug because of encapsulation
   

• reduces the amount of times you feel like bashing your head in

GULP

• simplE & Smart NODE.JS-based task runner 

• Use it to automate repetitive tasks

• EASY TO BUILD UPON AND EXTEND

GULP

• simplE & Smart NODE.JS-based task runner 

• Use it to automate repetitive tasks

• easy to build upon and Extend
   

• Also reduces the amount of times you feel like bashing your head in

Browsersync

• Live reload your changes!

• inject new content without reloading

• Test Across devices without deploying after every change!

Browsersync

• Live reload your changes!

• inject new content without reloading

• Test Across devices without deploying after every change!!!

Browsersync

• Live reload your changes!

• inject new content without reloading

• Test Across devices without deploying after every change!!!!!!!!!

Aight.
let's write
some code.