MODERN FRONTEND WORKFLOW @revathskumar 

ABOUT Rubyist / JavaScripter Yeoman Team Member @keralarb / @keralajs Works at @whatznear Blog at blog.revathskumar.com Twitter/Github - @revathskumar +RevathSKumar 

PAST : EVERYTHING WAS MANUAL Create directory structure Download and setup js libraries Make change -> goto browser -> refresh. Compile CoffeeScript / SASS / LESS Code quality Performance optimizations Running unit tests 

WE NEED BETTER TOOLS TO AUTOMATE THESE TASKS 

No content

SCAFFOLD WITH YO BUILD WITH GRUNT MANAGE DEPENDENCIES WITH BOWER 

No content

TASK RUNNER BASED ON CLI 

HUGE COMMUNITY : 2000+ PLUGINS 

TASKS Lint Test Concat Watch Minify & many more... 

PACKAGE.JSON { " n a m e " : " y e o m a n " , " p r i v a t e " : t r u e , " d e v D e p e n d e n c i e s " : { " g r u n t " : " ~ 0 . 4 . 1 " , " g r u n t - c o n t r i b - c o p y " : " ~ 0 . 4 . 1 " , " g r u n t - c o n t r i b - c l e a n " : " ~ 0 . 5 . 0 " } } 

GRUNTFILE . JS m o d u l e . e x p o r t s = f u n c t i o n ( g r u n t ) { g r u n t . i n i t C o n f i g ( { u g l i f y : { d i s t : { f i l e s : { " d i s t / s c r i p t s / a p p . j s " : " a p p / s c r i p t s / * . j s " } } } , c l e a n : [ ' d i s t / * ' ] , } ) ; g r u n t . l o a d N p m T a s k s ( " g r u n t - c o n t r i b - u g l i f y " ) ; g r u n t . l o a d N p m T a s k s ( " g r u n t - c o n t r i b - c l e a n " ) ; g r u n t . r e g i s t e r T a s k ( ' b u i l d ' , [ ' c l e a n ' , ' u g l i f y ' ] ) ; } 

BOWER 

PACKAGE MANAGER FOR THE WEB 

INSTALL & UPDATE DEPENDENCIES FROM CLI b o w e r i n s t a l l j q u e r y - - s a v e b o w e r u p d a t e j q u e r y 

BOWER.JSON { " n a m e " : " y e o m a n " , " v e r s i o n " : " 0 . 0 . 0 " , " d e p e n d e n c i e s " : { " s a s s - b o o t s t r a p " : " ~ 3 . 0 . 0 " , " j q u e r y " : " ~ 1 . 9 . 0 " , " u n d e r s c o r e " : " ~ 1 . 4 . 3 " , " b a c k b o n e " : " ~ 1 . 0 . 0 " , } , " d e v D e p e n d e n c i e s " : { } } 

No content

Rails inspired generator system Idea to rough prototype in 10 minutes 

BYPASS ALL THE REPETATIVE SETUP WORK AT THE START OF A NEW PROJECT 

CREATE DIRECTORY STRUCTURE 

/ * g l o b a l d e f i n e * / d e f i n e ( [ ' u n d e r s c o r e ' , ' b a c k b o n e ' ] , f u n c t i o n ( _ , B a c k b o n e ) { ' u s e s t r i c t ' ; v a r T o d o M o d e l = B a c k b o n e . M o d e l . e x t e n d ( { d e f a u l t s : { } } ) ; r e t u r n T o d o M o d e l ; } ) ; BOILER PLATE YOUR CODE 

INSTALL DEPENDENCIES 

Install/Run/Update generators Search and find generators Use as you need 

WORKFLOW 

INSTALLATION n p m i n s t a l l - g y o n p m i n s t a l l - g g r u n t - c l i n p m i n s t a l l - g b o w e r 

BOILERPLATE y o b a c k b o n e 

BACKBONE GENERATOR : OPTIONS --coffee --requirejs --template-framework=handlebars --test-framework=jasmine 

BACKBONE SUB GENERATORS yo backbone:model yo backbone:collection yo backbone:router yo backbone:view 

SOME OTHER GENERATORS yo chrome-extension yo maria yo webapp yo polymer & 620+ generators more 

RUN DEV SERVER g r u n t s e r v e Preprocess CoffeeScript / SASS / LESS Open the page in default browser Watch the folder and reload browser as you change 

BUILD g r u n t b u i l d Lint for code quality Preprocess CoffeeScript / SASS / LESS Concat & minify Run the tests Assets versioning 

https://twitter.com/iamdevloper/status/431764751610548225 

REFERENCES http://yeoman.io http://gruntjs.com http://bower.io 

THANK YOU. 

KERALA JAVASCRIPT Group : [email protected] Twitter : @keralajs keralajs.org KERALA RUBY Group : [email protected] Twitter : @keralarb krug.github.io IRC : #krug.rb, #hackerala