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.
Made with Slides.com