my webapp workflow

21
MY WEBAPP WORKFLOW

Upload: revath-s-kumar

Post on 15-Jan-2015

3.513 views

Category:

Technology


0 download

DESCRIPTION

My webapp workflow with Yeoman, Grunt and Bower. From Kerala Ruby user Group meetup.

TRANSCRIPT

Page 1: My webapp workflow

MY WEBAPP WORKFLOW

Page 2: My webapp workflow

ABOUT MERubyist / JavaScripterYeoman team memberblog.revathskumar.comTwitter/Github - @revathskumar

Page 3: My webapp workflow

YEOMANOpinionated stack for web application development

Page 4: My webapp workflow

IDEA TO PROTOTYPE IN 10 MINUTES

Page 5: My webapp workflow

WHAT YEOMAN CAN DO 4 U?Create directory structure

Page 6: My webapp workflow

Boiler plate your code/*global define*/

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

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

return TodoModel;});

Page 7: My webapp workflow

Install dependencies

Page 8: My webapp workflow

Choose only what you needed

Page 9: My webapp workflow

INSTALLINSTALL YEOMAN

$ npm install -g yo

USAGE $ yo backbone

$ yo backbone:model Todo

$ yo backbone:collection Todos

$ yo backbone:view IndexView

$ yo backbone:router Todo

Page 10: My webapp workflow

OTHER HELPS!1. Install/Run/Update generators

Page 11: My webapp workflow

GRUNTThe JavaScript Task Runner

Page 12: My webapp workflow

WHY GRUNT?Task runner based on CLIAlternative to Rake/Cake/Make/Jake100+ pluginsLint, test, concat, watch, min etc ....Customize task as you wish!

Page 13: My webapp workflow

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

Page 14: My webapp workflow

TASKS$ grunt clean$ grunt uglify$ grunt build

OTHER TASKSlint, test, livereload, copy, compile templates

Page 15: My webapp workflow

BOWERPackage manager for the web

Page 16: My webapp workflow

MANAGE YOUR PACKAGES/DEPENDECIESFROM CLI

Page 17: My webapp workflow

FLOWCreate boilerplate code with yoInstall dependencies with bowerStart grunt server

Compiles coffeesciptCompiles sass/scssopen page in default web browserlive reload

Page 18: My webapp workflow

grunt lintgrunt testgrunt build

jslint, run testsconcat and minify your dependenciescopy assets to dist dir

Page 20: My webapp workflow

QUEST

Page 21: My webapp workflow