Modern Frontend Workflow

Modern Frontend Workflow with Yeoman, Grunt and Bower

Transcript

1. MODERN FRONTEND WORKFLOW @revathskumar
2. ABOUT Rubyist / JavaScripter Yeoman Team Member @keralarb / @keralajs Works at @whatznear Blog at blog.revathskumar.com Twitter/Github - @revathskumar +RevathSKumar
3. 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
4. WE NEED BETTER TOOLS TO AUTOMATE THESE TASKS
6. SCAFFOLD WITH YO BUILD WITH GRUNT MANAGE DEPENDENCIES WITH BOWER
8. TASK RUNNER BASED ON CLI
9. HUGE COMMUNITY : 2000+ PLUGINS
10. TASKS Lint Test Concat Watch Minify & many more...
11. 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 " } }
12. 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 ' ] ) ; }
13. BOWER
14. PACKAGE MANAGER FOR THE WEB
15. 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
16. 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 " : { } }
18. Rails inspired generator system Idea to rough prototype in 10 minutes
19. BYPASS ALL THE REPETATIVE SETUP WORK AT THE START OF A NEW PROJECT
20. CREATE DIRECTORY STRUCTURE
21. / * 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
22. INSTALL DEPENDENCIES
23. Install/Run/Update generators Search and find generators Use as you need
24. WORKFLOW
25. 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
26. BOILERPLATE y o b a c k b o n e
27. BACKBONE GENERATOR : OPTIONS --coffee --requirejs --template-framework=handlebars --test-framework=jasmine
28. BACKBONE SUB GENERATORS yo backbone:model yo backbone:collection yo backbone:router yo backbone:view
29. SOME OTHER GENERATORS yo chrome-extension yo maria yo webapp yo polymer & 620+ generators more
30. 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
31. 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
32. https://twitter.com/iamdevloper/status/431764751610548225
33. REFERENCES http://yeoman.io http://gruntjs.com http://bower.io
34. THANK YOU.
35. KERALA JAVASCRIPT Group : kerala-js@googlegroups.com Twitter : @keralajs keralajs.org KERALA RUBY Group : kerala-ruby-user-group@googlegroups.com Twitter : @keralarb krug.github.io IRC : #krug.rb, #hackerala