sid maestre: building apps with backbone.js & require.js

Saturday, June 22, 13

Sidney MaestrePlatform Evangelist

@SidneyAllenGitHub | Twitter

Controller

Model View

Controller

Model View

Controller

Model View

Controller

Model View

HANDS ON01-model

Wine = Backbone.Model.extend();

firstWine = new Wine({ winery : 'Clos Pegase', year : '2008', type : 'Chardonnay', size : '750ml',});

COLLECTION

HANDS ON02-collection

COLLECTION

Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});

COLLECTION

wines = new Wines([ {winery : "Robert Mondovi"}, {winery : "CakeBread"}]);

COLLECTION

wines.each( function(model) { console.log(model.get('winery')); });

COLLECTION

wines.each( function(model) { console.log(model.toJSON()); });

Datastore

Geo Queries

Facebook

Analytics

Load Balancing

Versioning

Push Notifications

CollaborationAccess

Controls Twitter

Amazon S3 User Authentication

Custom Code

and talk to any API

Easy to use SDKs

HANDS ONwww.stackmob.com

DASHBOARD

CREATE APP

3Saturday, June 22, 13

HANDS ON03-stackmob-model

STACKMOB SDK

http://static.stackmob.com/js/stackmob-js-0.9.1-min.js"

INITStackMob.init({ publicKey: "814004dd-a72a-4425-9d2e-63d21d76588e", apiVersion: 0});

MODEL var Wine = StackMob.Model.extend({ schemaName: "wine"});

var wine = new Wine({name:‘Robert Mondavi});

wine.create({ success: function(model){

HANDS ON04-stackmob-collection

var Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});

COLLECTION

var Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});

var wines = new Wines();

wines.fetch({async: true});

COLLECTION

COLLECTIONvar Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});

console.log(wines.toJSON());

COLLECTION var Wine = StackMob.Model.extend({ schemaName: "wine"});

var Wines = StackMob.Collection.extend({ model: Wine});

wine.create({ success: function(model){ wines.add(model); }});

HANDS ON05-home-view

HomeView = Backbone.View.extend({});

HomeView = Backbone.View.extend({

render: function() { this.$el.append("<h1>Wine Cellar</h1>"); return this; }});

HomeView = Backbone.View.extend({

initialize: function() { this.render(); },

render: function() {

this.$el.append("<h1>Wine Cellar</h1>"); return this; }});

Wine Cellar

HomeView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); },

Wine Cellar

Wine Cellar Wine Cellar Wine Cellar Wine Cellar Wine Cellar

render: function() { this.$el.empty(); this.$el.append("<h1>Wine Cellar</h1>"); return this; }});

Wine Cellar

HANDS ON06-list-view

ListView = Backbone.View.extend({ tagName: 'ul',

render: function() { this.$el.empty(); this.$el.append("<li>Wine 1</li>"); this.$el.append("<li>Wine 2</li>"); return this; }});

Wine Cellar

render: function() { this.empty(); this.$el.append("<h1>Wine Cellar</h1>");

this.listView = new ListView(); this.$el.append(this.listView.render().el);

return this; }});

HANDS ON07-basic-template

TEMPLATE<script type="text/template" id="listTemplate"> <li><%= winery %></li></script>

ListView = Backbone.View.extend({ tagName: 'ul', initialize: function() { this.template = _.template($('#listTemplate').html()); },

TEMPLATE<script type="text/template" id="listTemplate"> <li><%= value %></li></script>ListView = Backbone.View.extend({ tagName: 'ul', initialize: function() { this.template = _.template($('#listTemplate').html()); wines.bind('all', this.render,this); this.render(); },

render: function() { ... this.$el.append(this.template({value : "Cakebread"}));

return this; }});

HANDS ON08-collection-template

TEMPLATE<script type="text/template" id="listTemplate"> <li><%= value %></li></script>

ListView = Backbone.View.extend({ ... render: function() { var el = this.$el, template = this.template;

el.empty(); wines.each(function(wine){ el.append(template( wine.toJSON() )); });

return this; }});

ROUTER

HANDS ON09-basic-router

ROUTERAppRouter = Backbone.Router.extend({ routes:{ "":"home", "add":"add" },

home:function () { new HomeView(); }, add:function () { new AddView(); }});

ROUTERvar app = (function($){

var initialize = function() { wineApp = new AppRouter(); Backbone.history.start(); }

return { initialize : initialize }

}(jQuery));

$(document).ready(function () { app.initialize();});

HANDS ON10-adv-router

ROUTERAppRouter = Backbone.Router.extend({ routes:{ "":"home", "add":"add" },

initialize:function(options) { this.collection = options.collection; },

home:function () { new HomeView({collection:this.collection}); }, add:function () { new AddView({collection:this.collection}); }});

ROUTERvar initialize = function() { var wines = new Wines(); wines.fetch({async:true});

wineApp = new AppRouter({collection : wines}); Backbone.history.start();}

HANDS ON11-events

EVENTSAddView = Backbone.View.extend({ events: { "click #addBtn": "add", ... },

... add: function(e) { // do something... return this; }});

ADDadd: function(e) { var collection = this.collection;

var wine = new Wine({winery:$('#winery').val() });

wine.create({ success: function(model){ } }); return this;}

wine.create({ success: function(model){ collection.add(model); } }); return this;}

HANDS ON12-update

TEMPLATE<script type="text/template" id="listTemplate"> <li><a href="#update/<%= wine_id %>"><%= winery %></a></li></script>

ROUTERAppRouter = Backbone.Router.extend({ routes:{ "":"home", "add":"add", "update/:id":"update" },

update:function(e) { model = this.collection.get(e); new UpdateView({model: model}); }});

VIEWvar UpdateView = Backbone.View.extend({ ... initialize: function() { this.model = this.options.model; },

save: function(e) { this.model.save({winery:$('#winery').val()}, { success: function(model) { } }); return this; }});

VIEWvar UpdateView = Backbone.View.extend({ ... initialize: function() { this.model = this.options.model; },

save: function(e) { this.model.save({winery:$('#winery').val()}, { success: function(model) { } }); return this; }});

STRUCTURE

define([ 'backbone'], function(Backbone) {

var WineModel = Backbone.Model.extend(); return WineModel;

COLLECTION

Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ Model: Wine, url: "#"});

COLLECTION

define([ 'backbone', 'models/wine/Model'], function(Backbone,Model){

var WineCollection = Backbone.Collection.extend({ Model: Model, url: '#' });

return WineCollection;});

ListView = Backbone.View.extend({ ... render: function() { var el = this.$el, template = this.template;

el.empty(); wines.each(function(wine){ el.append(template( wine.toJSON() )); });

return this; }});

define([ 'jquery', 'underscore', 'backbone', 'text!templates/wine/WineListTemplate.html'], function($, _, Backbone,WineListTemplate){

var WineListView = Backbone.View.extend({

return WineListView;});

HANDS ONrequire

BOOTSTRAP<script data-main="js/main" src="js/libs/require/require.js"></script>

MAIN.JSrequire.config({ baseUrl: "/js/", paths: { jquery: 'libs/jquery/jquery-1.8.2', underscore: 'libs/underscore/underscore-1.4.4', backbone: 'libs/backbone/backbone-1.0.0', templates: '../templates', app: 'app' },

shim: { underscore: { exports: '_' }, backbone: { deps: ["underscore", "jquery"], exports: "Backbone" } }});

MAIN.JSrequire(['jquery','app'], function( $, App ){

$(function(){ App.initialize(); });

APP.JSdefine([ 'jquery', 'underscore', 'backbone', 'router' // Request router.js], function($, _, Backbone, Router){

var initialize = function() { Router.initialize(); };

return { initialize: initialize };});

ROUTERdefine([ 'jquery', 'underscore', 'backbone', 'views/home/HomeView', 'views/wine/AddView', 'collections/wine/WineCollection'], function($, _,Backbone, HomeView, AddView, UpdateView, Wines) { ...

var initialize = function(){ var wines = new Wines(); var app_router = new AppRouter({collection: wines});

Backbone.history.start(); }; return { initialize: initialize };});

ROUTERAppRouter = Backbone.Router.extend({ initialize: function(options) { this.collection = options.collection; },

routes:{ "":"home", "add":"add" },

home:function () { this.changePage( new HomeView({collection : this.collection}) ); },

add:function () { this.changePage( new AddView({collection : this.collection, router : this}) ); },

BUILD.JS({ appDir: "../", baseUrl: "js", dir: "../../appdirectory-build", paths: { ... },

shim: { ... }, modules: [ { name: "main" } ]})

BUILDnode r.js -o build.js optimize=none

OPTIMIZEnode r.js -o build.js

HANDS ONjqm

HANDS ONjqm-template

HANDS ONdevelopment

HANDS ONmywine

Resourcesbit.ly/freebackbonejs

github.com/SidneyAllen

developer.stackmob.com

Q&ASaturday, June 22, 13

sid maestre: building apps with backbone.js & require.js

modelvar wine

collectionvar wine

var wines

stackmob sdkhttp

hands on03stackmob

hands on04stackmob

new wineswines

appendwine cellarreturn

Education

appear iq - tutorials backbone.js

drupal backbone.js in the frontend

angularjs vs. ember.js vs. backbone.js

webapplikationen mit backbone.js

mastering backbone.js - sample chapter

javascript application architecture with backbone.js

intro to backbone.js

handlebars and require.js

jsday italy - backbone.js

basics of backbone.js

backbone.js slides

building backbone.js apps for scale

backbone.js - michał taberski (prug 2.0)

recipes with backboneintroduction x the next, chapter 4,...

backbone.js – an introduction

48 festival vallenato (carlos mendoza - ivan maestre - jesus...

javascript! that's sick! modules, amd, require.js

intro to backbone.js with rails

jsgeneve - backbone.js

introduction to backbone.js