MODERN FRONTENDWORKFLOW

@revathskumar

ABOUTRubyist / JavaScripterYeoman Team Member@keralarb / @keralajsWorks at @whatznearBlog at blog.revathskumar.comTwitter/Github - @revathskumar+RevathSKumar

PAST : EVERYTHING WAS MANUALCreate directory structureDownload and setup js librariesMake change -> goto browser -> refresh.Compile CoffeeScript / SASS / LESSCode qualityPerformance optimizationsRunning unit tests

WE NEED BETTER TOOLS TO AUTOMATE THESETASKS

SCAFFOLD WITH YOBUILD WITH GRUNTMANAGE DEPENDENCIES WITH BOWER

TASK RUNNER BASED ON CLI

HUGE COMMUNITY : 2000+ PLUGINS

TASKSLintTestConcatWatchMinify& many more...

PACKAGE.JSON{ "name": "yeoman", "private": true, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0" }}

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

BOWER

PACKAGE MANAGER FOR THE WEB

INSTALL & UPDATE DEPENDENCIES FROM CLIbower install jquery --save

bower update jquery

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

Rails inspired generator system

Idea to rough prototype in 10 minutes

BYPASS ALL THE REPETATIVE SETUP WORK AT THE START OFA NEW PROJECT

CREATE DIRECTORY STRUCTURE

/*global define*/

define([ 'underscore', 'backbone'], function (_, Backbone) { 'use strict';

var TodoModel = Backbone.Model.extend({ defaults: { } });

return TodoModel;});

BOILER PLATE YOUR CODE

INSTALL DEPENDENCIES

Install/Run/Update generators

Search and find generators

Use as you need

WORKFLOW

INSTALLATIONnpm install -g yonpm install -g grunt-clinpm install -g bower

BOILERPLATEyo backbone

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

BACKBONE SUB GENERATORSyo backbone:modelyo backbone:collectionyo backbone:routeryo backbone:view

SOME OTHER GENERATORSyo chrome-extensionyo mariayo webappyo polymer& 620+ generators more

RUN DEV SERVER

grunt servePreprocess CoffeeScript / SASS / LESSOpen the page in default browserWatch the folder and reload browser as you change

BUILD

grunt buildLint for code qualityPreprocess CoffeeScript / SASS / LESSConcat & minifyRun the testsAssets versioning

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

REFERENCEShttp://yeoman.iohttp://gruntjs.comhttp://bower.io

THANK YOU.

KERALA JAVASCRIPTGroup : kerala-js@googlegroups.com

Twitter : @keralajs

keralajs.org

KERALA RUBYGroup : kerala-ruby-user-group@googlegroups.com

Twitter : @keralarb

krug.github.io

IRC : #krug.rb, #hackerala