Upload
urbantech
View
325
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Slides from Colearn class with Sid Maestre: Building APPS with BACKBONE.JS & REQUIRE.JS When developing HTML5 application, your code is bound to get more complex over time. Employing design patterns like MVC are important for separating concerns and creating more modular and reusable code. Backbone.js is one of the more popular JavaScript frameworks to help you do this. Unfortunately, like most open source, the documentation is a work in progress. Don't worry, I'll walk you through a series of examples that build on each other as I show how the moving parts work together. We'll add the StackMob JavaScript SDK to extend backbone.js and persist your data in the cloud. We'll wrap up our session looking at how require.js allows you to break your backbone.js code into discreet modules during development. Once you are ready to deploy you can use require.js to build an optimized version of your javascript for production.
Citation preview
Saturday, June 22, 13
Sidney MaestrePlatform Evangelist
@SidneyAllenGitHub | Twitter
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
WHAT
Saturday, June 22, 13
WHY
Saturday, June 22, 13
WHY
Saturday, June 22, 13
Controller
Model View
Saturday, June 22, 13
Controller
Model View
Saturday, June 22, 13
Controller
Model View
Saturday, June 22, 13
Controller
Model View
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
MODEL
Saturday, June 22, 13
MODEL
Saturday, June 22, 13
HANDS ON01-model
Saturday, June 22, 13
MODEL
Wine = Backbone.Model.extend();
Saturday, June 22, 13
MODEL
Wine = Backbone.Model.extend();
Saturday, June 22, 13
MODEL
Wine = Backbone.Model.extend();
firstWine = new Wine({ winery : 'Clos Pegase', year : '2008', type : 'Chardonnay', size : '750ml',});
Saturday, June 22, 13
COLLECTION
Saturday, June 22, 13
HANDS ON02-collection
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});
wines = new Wines([ {winery : "Robert Mondovi"}, {winery : "CakeBread"}]);
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});
wines = new Wines([ {winery : "Robert Mondovi"}, {winery : "CakeBread"}]);
wines.each( function(model) { console.log(model.get('winery')); });
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ model: Wine, url: "#"});
wines = new Wines([ {winery : "Robert Mondovi"}, {winery : "CakeBread"}]);
wines.each( function(model) { console.log(model.toJSON()); });
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
Datastore
Geo Queries
Analytics
Load Balancing
Versioning
Push Notifications
CollaborationAccess
Controls Twitter
Amazon S3 User Authentication
Saturday, June 22, 13
Saturday, June 22, 13
Custom Code
Saturday, June 22, 13
and talk to any API
Saturday, June 22, 13
and talk to any API
Saturday, June 22, 13
Easy to use SDKs
Saturday, June 22, 13
Easy to use SDKs
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
DASHBOARD
Saturday, June 22, 13
CREATE APP
1
2
3Saturday, June 22, 13
COPY
Saturday, June 22, 13
HANDS ON03-stackmob-model
Saturday, June 22, 13
STACKMOB SDK
http://static.stackmob.com/js/stackmob-js-0.9.1-min.js"
Saturday, June 22, 13
INITStackMob.init({ publicKey: "814004dd-a72a-4425-9d2e-63d21d76588e", apiVersion: 0});
Saturday, June 22, 13
MODEL var Wine = StackMob.Model.extend({ schemaName: "wine"});
Saturday, June 22, 13
MODEL var Wine = StackMob.Model.extend({ schemaName: "wine"});
var wine = new Wine({name:‘Robert Mondavi});
wine.create({ success: function(model){
}});
Saturday, June 22, 13
MODEL var Wine = StackMob.Model.extend({ schemaName: "wine"});
var wine = new Wine({name:‘Robert Mondavi});
wine.create({ success: function(model){
}});
Saturday, June 22, 13
HANDS ON04-stackmob-collection
Saturday, June 22, 13
var Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});
COLLECTION
Saturday, June 22, 13
var Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});
var wines = new Wines();
wines.fetch({async: true});
COLLECTION
Saturday, June 22, 13
COLLECTIONvar Wine = StackMob.Model.extend({ schemaName: "wine"}); var Wines = StackMob.Collection.extend({ model: Wine});
var wines = new Wines();
wines.fetch({async: true});
console.log(wines.toJSON());
Saturday, June 22, 13
COLLECTION var Wine = StackMob.Model.extend({ schemaName: "wine"});
var Wines = StackMob.Collection.extend({ model: Wine});
var wines = new Wines();
wines.fetch({async: true});
var wine = new Wine({name:‘Robert Mondavi});
wine.create({ success: function(model){ wines.add(model); }});
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
VIEW
Saturday, June 22, 13
HANDS ON05-home-view
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({});
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({
render: function() { this.$el.append("<h1>Wine Cellar</h1>"); return this; }});
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({
initialize: function() { this.render(); },
render: function() {
this.$el.append("<h1>Wine Cellar</h1>"); return this; }});
Wine Cellar
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); },
render: function() {
this.$el.append("<h1>Wine Cellar</h1>"); return this; }});
Wine Cellar
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); },
render: function() {
this.$el.append("<h1>Wine Cellar</h1>"); return this; }});
Wine Cellar Wine Cellar Wine Cellar Wine Cellar Wine Cellar
Saturday, June 22, 13
VIEW
HomeView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); },
render: function() { this.$el.empty(); this.$el.append("<h1>Wine Cellar</h1>"); return this; }});
Wine Cellar
Saturday, June 22, 13
HANDS ON06-list-view
Saturday, June 22, 13
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; }});
Saturday, June 22, 13
Wine Cellar
VIEW
HomeView = Backbone.View.extend({ el: 'body', initialize: function() { this.render(); },
render: function() { this.empty(); this.$el.append("<h1>Wine Cellar</h1>");
this.listView = new ListView(); this.$el.append(this.listView.render().el);
return this; }});
Saturday, June 22, 13
HANDS ON07-basic-template
Saturday, June 22, 13
TEMPLATE<script type="text/template" id="listTemplate"> <li><%= winery %></li></script>
Saturday, June 22, 13
TEMPLATE<script type="text/template" id="listTemplate"> <li><%= winery %></li></script>
ListView = Backbone.View.extend({ tagName: 'ul', initialize: function() { this.template = _.template($('#listTemplate').html()); },
...
});
Saturday, June 22, 13
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; }});
Saturday, June 22, 13
HANDS ON08-collection-template
Saturday, June 22, 13
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; }});
Saturday, June 22, 13
ROUTER
Saturday, June 22, 13
ROUTER
Saturday, June 22, 13
HANDS ON09-basic-router
Saturday, June 22, 13
ROUTERAppRouter = Backbone.Router.extend({ routes:{ "":"home", "add":"add" },
home:function () { new HomeView(); }, add:function () { new AddView(); }});
Saturday, June 22, 13
ROUTERvar app = (function($){
...
var initialize = function() { wineApp = new AppRouter(); Backbone.history.start(); }
return { initialize : initialize }
}(jQuery));
$(document).ready(function () { app.initialize();});
Saturday, June 22, 13
HANDS ON10-adv-router
Saturday, June 22, 13
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}); }});
Saturday, June 22, 13
ROUTERvar initialize = function() { var wines = new Wines(); wines.fetch({async:true});
wineApp = new AppRouter({collection : wines}); Backbone.history.start();}
Saturday, June 22, 13
HANDS ON11-events
Saturday, June 22, 13
EVENTSAddView = Backbone.View.extend({ events: { "click #addBtn": "add", ... },
... add: function(e) { // do something... return this; }});
Saturday, June 22, 13
ADDadd: function(e) { var collection = this.collection;
var wine = new Wine({winery:$('#winery').val() });
wine.create({ success: function(model){ } }); return this;}
Saturday, June 22, 13
ADDadd: function(e) { var collection = this.collection;
var wine = new Wine({winery:$('#winery').val() });
wine.create({ success: function(model){ } }); return this;}
Saturday, June 22, 13
ADDadd: function(e) { var collection = this.collection;
var wine = new Wine({winery:$('#winery').val() });
wine.create({ success: function(model){ collection.add(model); } }); return this;}
Saturday, June 22, 13
ADDadd: function(e) { var collection = this.collection;
var wine = new Wine({winery:$('#winery').val() });
wine.create({ success: function(model){ collection.add(model); } }); return this;}
Saturday, June 22, 13
HANDS ON12-update
Saturday, June 22, 13
TEMPLATE<script type="text/template" id="listTemplate"> <li><a href="#update/<%= wine_id %>"><%= winery %></a></li></script>
Saturday, June 22, 13
ROUTERAppRouter = Backbone.Router.extend({ routes:{ "":"home", "add":"add", "update/:id":"update" },
...
update:function(e) { model = this.collection.get(e); new UpdateView({model: model}); }});
Saturday, June 22, 13
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; }});
Saturday, June 22, 13
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; }});
Saturday, June 22, 13
Saturday, June 22, 13
Saturday, June 22, 13
STRUCTURE
Saturday, June 22, 13
MODEL
Wine = Backbone.Model.extend();
Saturday, June 22, 13
MODEL
define([ 'backbone'], function(Backbone) {
var WineModel = Backbone.Model.extend(); return WineModel;
});
Saturday, June 22, 13
COLLECTION
Wine = Backbone.Model.extend(); Wines = Backbone.Collection.extend({ Model: Wine, url: "#"});
Saturday, June 22, 13
COLLECTION
define([ 'backbone', 'models/wine/Model'], function(Backbone,Model){
var WineCollection = Backbone.Collection.extend({ Model: Model, url: '#' });
return WineCollection;});
Saturday, June 22, 13
VIEW
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; }});
Saturday, June 22, 13
VIEW
define([ 'jquery', 'underscore', 'backbone', 'text!templates/wine/WineListTemplate.html'], function($, _, Backbone,WineListTemplate){
var WineListView = Backbone.View.extend({
...
});
return WineListView;});
Saturday, June 22, 13
HANDS ONrequire
Saturday, June 22, 13
BOOTSTRAP<script data-main="js/main" src="js/libs/require/require.js"></script>
Saturday, June 22, 13
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" } }});
Saturday, June 22, 13
MAIN.JSrequire(['jquery','app'], function( $, App ){
$(function(){ App.initialize(); });
});
Saturday, June 22, 13
APP.JSdefine([ 'jquery', 'underscore', 'backbone', 'router' // Request router.js], function($, _, Backbone, Router){
var initialize = function() { Router.initialize(); };
return { initialize: initialize };});
Saturday, June 22, 13
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 };});
Saturday, June 22, 13
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}) ); },
});
Saturday, June 22, 13
R.JS
Saturday, June 22, 13
BUILD.JS({ appDir: "../", baseUrl: "js", dir: "../../appdirectory-build", paths: { ... },
shim: { ... }, modules: [ { name: "main" } ]})
Saturday, June 22, 13
BUILDnode r.js -o build.js optimize=none
347k
Saturday, June 22, 13
OPTIMIZEnode r.js -o build.js
134k
Saturday, June 22, 13
Saturday, June 22, 13
HANDS ONjqm
Saturday, June 22, 13
HANDS ONjqm-template
Saturday, June 22, 13
HANDS ONdevelopment
Saturday, June 22, 13
HANDS ONmywine
Saturday, June 22, 13
Saturday, June 22, 13
Resourcesbit.ly/freebackbonejs
github.com/SidneyAllen
developer.stackmob.com
Saturday, June 22, 13
Q&ASaturday, June 22, 13