1. MODERN FRONTEND
WORKFLOW
@revathskumar

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

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. 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
{
"name":"yeoman",
"private":true,
"devDependencies":{
"grunt":"~0.4.1",
"grunt-contrib-copy":"~0.4.1",
"grunt-contrib-clean":"~0.5.0"
}
}

12. 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']);
}

13. BOWER

14. PACKAGE MANAGER FOR THE WEB

15. INSTALL & UPDATE DEPENDENCIES FROM CLI
bowerinstalljquery--save
bowerupdatejquery

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

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. /*globaldefine*/
define([
'underscore',
'backbone'
],function(_,Backbone){
'usestrict';
varTodoModel=Backbone.Model.extend({
defaults:{
}
});
returnTodoModel;
});
BOILER PLATE YOUR CODE

22. INSTALL DEPENDENCIES

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

24. WORKFLOW

25. INSTALLATION
npm install -g yo
npm install -g grunt-cli
npm install -g bower

26. BOILERPLATE
yo backbone

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
grunt serve
Preprocess CoffeeScript/SASS /LESS
Open the page in defaultbrowser
Watch the folder and reload browser as you change

31. BUILD
grunt build
Lintfor 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