Modern Frontend Workflow

Modern Frontend Workflow

Modern Frontend Workflow with Yeoman, Grunt and Bower

Fb7edc7cc7a53c903af74d07dcecf9dc?s=128

Revath S Kumar

April 13, 2014
Tweet

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

  5. None
  6. SCAFFOLD WITH YO BUILD WITH GRUNT MANAGE DEPENDENCIES WITH BOWER

  7. None
  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 " : { } }
  17. None
  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