Modern frontend workflow

1,416 views

Published on

Published in: Software, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,416
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Modern frontend workflow

  1. 1. MODERN FRONTEND WORKFLOW @revathskumar
  2. 2. ABOUT Rubyist/JavaScripter Yeoman Team Member @keralarb /@keralajs Works at@whatznear Blogatblog.revathskumar.com Twitter/Github -@revathskumar +RevathSKumar
  3. 3. PAST : EVERYTHING WAS MANUAL Create directorystructure Download and setup js libraries Make change -> goto browser -> refresh. Compile CoffeeScript/SASS /LESS Code quality Performance optimizations Runningunittests
  4. 4. WE NEED BETTER TOOLS TO AUTOMATE THESE TASKS
  5. 5. SCAFFOLD WITH YO BUILD WITH GRUNT MANAGE DEPENDENCIES WITH BOWER
  6. 6. TASK RUNNER BASED ON CLI
  7. 7. HUGE COMMUNITY : 2000+ PLUGINS
  8. 8. TASKS Lint Test Concat Watch Minify & many more...
  9. 9. PACKAGE.JSON { "name":"yeoman", "private":true, "devDependencies":{ "grunt":"~0.4.1", "grunt-contrib-copy":"~0.4.1", "grunt-contrib-clean":"~0.5.0" } }
  10. 10. GRUNTFILE . JS module.exports=function(grunt){ grunt.initConfig({ uglify:{ dist:{ files:{ "dist/scripts/app.js":"app/scripts/*.js" } } }, clean:['dist/*'], }); grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-clean"); grunt.registerTask('build',['clean','uglify']); }
  11. 11. BOWER
  12. 12. PACKAGE MANAGER FOR THE WEB
  13. 13. INSTALL & UPDATE DEPENDENCIES FROM CLI bowerinstalljquery--save bowerupdatejquery
  14. 14. BOWER.JSON { "name":"yeoman", "version":"0.0.0", "dependencies":{ "sass-bootstrap":"~3.0.0", "jquery":"~1.9.0", "underscore":"~1.4.3", "backbone":"~1.0.0", }, "devDependencies":{} }
  15. 15. Rails inspired generator system Idea to rough prototype in 10 minutes
  16. 16. BYPASS ALL THE REPETATIVE SETUP WORK AT THE START OF A NEW PROJECT
  17. 17. CREATE DIRECTORY STRUCTURE
  18. 18. /*globaldefine*/ define([ 'underscore', 'backbone' ],function(_,Backbone){ 'usestrict'; varTodoModel=Backbone.Model.extend({ defaults:{ } }); returnTodoModel; }); BOILER PLATE YOUR CODE
  19. 19. INSTALL DEPENDENCIES
  20. 20. Install/Run/Update generators Search and find generators Use as you need
  21. 21. WORKFLOW
  22. 22. INSTALLATION npm install -g yo npm install -g grunt-cli npm install -g bower
  23. 23. BOILERPLATE yo backbone
  24. 24. BACKBONE GENERATOR : OPTIONS --coffee --requirejs --template-framework=handlebars --test-framework=jasmine
  25. 25. BACKBONE SUB GENERATORS yo backbone:model yo backbone:collection yo backbone:router yo backbone:view
  26. 26. SOME OTHER GENERATORS yo chrome-extension yo maria yo webapp yo polymer & 620+ generators more
  27. 27. RUN DEV SERVER grunt serve Preprocess CoffeeScript/SASS /LESS Open the page in defaultbrowser Watch the folder and reload browser as you change
  28. 28. BUILD grunt build Lintfor code quality Preprocess CoffeeScript/SASS /LESS Concat&minify Run the tests Assets versioning
  29. 29. https://twitter.com/iamdevloper/status/431764751610548225
  30. 30. REFERENCES http://yeoman.io http://gruntjs.com http://bower.io
  31. 31. THANK YOU.
  32. 32. 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

×