modern frontend workflow
DESCRIPTION
TRANSCRIPT
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 : [email protected]
Twitter : @keralajs
keralajs.org
KERALA RUBYGroup : [email protected]
Twitter : @keralarb
krug.github.io
IRC : #krug.rb, #hackerala