Sid Maestre: Building APPS with BACKBONE.JS & REQUIRE.JS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sid Maestre: Building APPS with BACKBONE.JS & REQUIRE.JS

  • 603 views
Uploaded on

Slides from Colearn class with Sid Maestre: Building APPS with BACKBONE.JS & REQUIRE.JS ...

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
603
On Slideshare
603
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Saturday, June 22, 13
  • 2. Sidney MaestrePlatform Evangelist@SidneyAllenGitHub | TwitterSaturday, June 22, 13
  • 3. Saturday, June 22, 13
  • 4. Saturday, June 22, 13
  • 5. Saturday, June 22, 13
  • 6. WHATSaturday, June 22, 13
  • 7. WHYSaturday, June 22, 13
  • 8. WHYSaturday, June 22, 13
  • 9. ControllerModel ViewSaturday, June 22, 13
  • 10. ControllerModel ViewSaturday, June 22, 13
  • 11. ControllerModel ViewSaturday, June 22, 13
  • 12. ControllerModel ViewSaturday, June 22, 13
  • 13. Saturday, June 22, 13
  • 14. Saturday, June 22, 13
  • 15. MODELSaturday, June 22, 13
  • 16. MODELSaturday, June 22, 13
  • 17. HANDS ON01-modelSaturday, June 22, 13
  • 18. MODELWine = Backbone.Model.extend();Saturday, June 22, 13
  • 19. MODELWine = Backbone.Model.extend();Saturday, June 22, 13
  • 20. MODELWine = Backbone.Model.extend();firstWine = new Wine({winery : Clos Pegase,year : 2008,type : Chardonnay,size : 750ml,});Saturday, June 22, 13
  • 21. COLLECTIONSaturday, June 22, 13
  • 22. HANDS ON02-collectionSaturday, June 22, 13
  • 23. COLLECTIONWine = Backbone.Model.extend();Wines = Backbone.Collection.extend({model: Wine,url: "#"});Saturday, June 22, 13
  • 24. COLLECTIONWine = Backbone.Model.extend();Wines = Backbone.Collection.extend({model: Wine,url: "#"});Saturday, June 22, 13
  • 25. COLLECTIONWine = Backbone.Model.extend();Wines = Backbone.Collection.extend({model: Wine,url: "#"});wines = new Wines([{winery : "Robert Mondovi"},{winery : "CakeBread"}]);Saturday, June 22, 13
  • 26. COLLECTIONWine = 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
  • 27. COLLECTIONWine = 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
  • 28. Saturday, June 22, 13
  • 29. Saturday, June 22, 13
  • 30. Saturday, June 22, 13
  • 31. Saturday, June 22, 13
  • 32. Saturday, June 22, 13
  • 33. DatastoreGeo QueriesFacebookAnalyticsLoad BalancingVersioningPushNotificationsCollaborationAccessControlsTwitterAmazon S3UserAuthenticationSaturday, June 22, 13
  • 34. Saturday, June 22, 13
  • 35. Custom CodeSaturday, June 22, 13
  • 36. and talk to any APISaturday, June 22, 13
  • 37. and talk to any APISaturday, June 22, 13
  • 38. Easy to use SDKsSaturday, June 22, 13
  • 39. Easy to use SDKsSaturday, June 22, 13
  • 40. Saturday, June 22, 13
  • 41. Saturday, June 22, 13
  • 42. HANDS ONwww.stackmob.comSaturday, June 22, 13
  • 43. DASHBOARDSaturday, June 22, 13
  • 44. CREATE APP123Saturday, June 22, 13
  • 45. COPYSaturday, June 22, 13
  • 46. HANDS ON03-stackmob-modelSaturday, June 22, 13
  • 47. STACKMOB SDKhttp://static.stackmob.com/js/stackmob-js-0.9.1-min.js"Saturday, June 22, 13
  • 48. INITStackMob.init({    publicKey: "814004dd-a72a-4425-9d2e-63d21d76588e",    apiVersion: 0});Saturday, June 22, 13
  • 49. MODELvar Wine = StackMob.Model.extend({schemaName: "wine"});Saturday, June 22, 13
  • 50. MODELvar Wine = StackMob.Model.extend({schemaName: "wine"});var wine = new Wine({name:‘Robert Mondavi});wine.create({success: function(model){}});Saturday, June 22, 13
  • 51. MODELvar Wine = StackMob.Model.extend({schemaName: "wine"});var wine = new Wine({name:‘Robert Mondavi});wine.create({success: function(model){}});Saturday, June 22, 13
  • 52. HANDS ON04-stackmob-collectionSaturday, June 22, 13
  • 53. var Wine = StackMob.Model.extend({schemaName: "wine"});var Wines = StackMob.Collection.extend({model: Wine});COLLECTIONSaturday, June 22, 13
  • 54. var Wine = StackMob.Model.extend({schemaName: "wine"});var Wines = StackMob.Collection.extend({model: Wine});var wines = new Wines();wines.fetch({async: true});COLLECTIONSaturday, June 22, 13
  • 55. 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
  • 56. COLLECTIONvar 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
  • 57. Saturday, June 22, 13
  • 58. Saturday, June 22, 13
  • 59. VIEWSaturday, June 22, 13
  • 60. HANDS ON05-home-viewSaturday, June 22, 13
  • 61. VIEWHomeView = Backbone.View.extend({});Saturday, June 22, 13
  • 62. VIEWHomeView = Backbone.View.extend({render: function() {this.$el.append("<h1>Wine Cellar</h1>");return this;}});Saturday, June 22, 13
  • 63. VIEWHomeView = Backbone.View.extend({initialize: function() {this.render();},render: function() {this.$el.append("<h1>Wine Cellar</h1>");return this;}});Wine CellarSaturday, June 22, 13
  • 64. VIEWHomeView = Backbone.View.extend({el: body,initialize: function() {this.render();},render: function() {this.$el.append("<h1>Wine Cellar</h1>");return this;}});Wine CellarSaturday, June 22, 13
  • 65. VIEWHomeView = Backbone.View.extend({el: body,initialize: function() {this.render();},render: function() {this.$el.append("<h1>Wine Cellar</h1>");return this;}});Wine CellarWine CellarWine CellarWine CellarWine CellarSaturday, June 22, 13
  • 66. VIEWHomeView = Backbone.View.extend({el: body,initialize: function() {this.render();},render: function() {this.$el.empty();this.$el.append("<h1>Wine Cellar</h1>");return this;}});Wine CellarSaturday, June 22, 13
  • 67. HANDS ON06-list-viewSaturday, June 22, 13
  • 68. VIEWListView = 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
  • 69. Wine CellarVIEWHomeView = 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
  • 70. HANDS ON07-basic-templateSaturday, June 22, 13
  • 71. TEMPLATE<script type="text/template" id="listTemplate"><li><%= winery %></li></script>Saturday, June 22, 13
  • 72. 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
  • 73. 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
  • 74. HANDS ON08-collection-templateSaturday, June 22, 13
  • 75. 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
  • 76. ROUTERSaturday, June 22, 13
  • 77. ROUTERSaturday, June 22, 13
  • 78. HANDS ON09-basic-routerSaturday, June 22, 13
  • 79. ROUTERAppRouter = Backbone.Router.extend({routes:{"":"home","add":"add"},home:function () {new HomeView();},add:function () {new AddView();}});Saturday, June 22, 13
  • 80. 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
  • 81. HANDS ON10-adv-routerSaturday, June 22, 13
  • 82. 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
  • 83. ROUTERvar initialize = function() {var wines = new Wines();wines.fetch({async:true});wineApp = new AppRouter({collection : wines});Backbone.history.start();}Saturday, June 22, 13
  • 84. HANDS ON11-eventsSaturday, June 22, 13
  • 85. EVENTSAddView = Backbone.View.extend({events: {"click #addBtn": "add",...},...add: function(e) {// do something...return this;}});Saturday, June 22, 13
  • 86. 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
  • 87. 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
  • 88. 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
  • 89. 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
  • 90. HANDS ON12-updateSaturday, June 22, 13
  • 91. TEMPLATE<script type="text/template" id="listTemplate"><li><a href="#update/<%= wine_id %>"><%= winery %></a></li></script>Saturday, June 22, 13
  • 92. 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
  • 93. 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
  • 94. 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
  • 95. Saturday, June 22, 13
  • 96. Saturday, June 22, 13
  • 97. STRUCTURESaturday, June 22, 13
  • 98. MODELWine = Backbone.Model.extend();Saturday, June 22, 13
  • 99. MODELdefine([backbone], function(Backbone) {var WineModel = Backbone.Model.extend();return WineModel;});Saturday, June 22, 13
  • 100. COLLECTIONWine = Backbone.Model.extend();Wines = Backbone.Collection.extend({Model: Wine,url: "#"});Saturday, June 22, 13
  • 101. COLLECTIONdefine([backbone,models/wine/Model], function(Backbone,Model){var WineCollection = Backbone.Collection.extend({Model: Model,url: #});return WineCollection;});Saturday, June 22, 13
  • 102. VIEWListView = 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
  • 103. VIEWdefine([jquery,underscore,backbone,text!templates/wine/WineListTemplate.html], function($, _, Backbone,WineListTemplate){var WineListView = Backbone.View.extend({...});return WineListView;});Saturday, June 22, 13
  • 104. HANDS ONrequireSaturday, June 22, 13
  • 105. BOOTSTRAP<script data-main="js/main" src="js/libs/require/require.js"></script>Saturday, June 22, 13
  • 106. 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
  • 107. MAIN.JSrequire([jquery,app], function( $, App ){$(function(){App.initialize();});});Saturday, June 22, 13
  • 108. APP.JSdefine([jquery,underscore,backbone,router // Request router.js], function($, _, Backbone, Router){var initialize = function() {Router.initialize();};return {initialize: initialize};});Saturday, June 22, 13
  • 109. 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
  • 110. 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
  • 111. R.JSSaturday, June 22, 13
  • 112. BUILD.JS({appDir: "../",baseUrl: "js",dir: "../../appdirectory-build",paths: {...},shim: {...},modules: [{name: "main"}]})Saturday, June 22, 13
  • 113. BUILDnode r.js -o build.js optimize=none347kSaturday, June 22, 13
  • 114. OPTIMIZEnode r.js -o build.js134kSaturday, June 22, 13
  • 115. Saturday, June 22, 13
  • 116. HANDS ONjqmSaturday, June 22, 13
  • 117. HANDS ONjqm-templateSaturday, June 22, 13
  • 118. HANDS ONdevelopmentSaturday, June 22, 13
  • 119. HANDS ONmywineSaturday, June 22, 13
  • 120. Saturday, June 22, 13
  • 121. Resourcesbit.ly/freebackbonejsgithub.com/SidneyAllendeveloper.stackmob.comSaturday, June 22, 13
  • 122. Q&ASaturday, June 22, 13