Backbone and friends

  • 542 views
Uploaded on

 

  • 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
542
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
1

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Backbone.jsAND FRIENDS
  • 2. “Programs must be written for people toread and only incidentally for machinesto execute.”-H. Abelson and G. Sussman in “The Structure and Interpretation of Computer Programs”
  • 3. Javascript EssentialsJavaScript does not have classes.
  • 4. Javascript Essentials JavaScript is an Object Orientedlanguage where almost everything is an object, a set of key-value pairs.
  • 5. Javascript Essentials This lack of Classes makes it easy tofollow one of the Gang of Four’s rules; Prefer object composition over class inheritance.
  • 6. Javascript Essentials JavaScript is now being used to createcomplex applications. A little bit of thought, and a well planned architecture can help solve all sorts of problems down the line.
  • 7. Javascript Essentials“The secret to building large apps isto never build large apps. Break yourapplication into small pieces. Thenassemble those testable, bite-sizedpieces into your application.”-Justin Meyer
  • 8. Javascript EssentialsSoftware bugs are costly to fix, and the longer that you wait to fix them, the more costly they become.
  • 9. Javascript EssentialsBreak the monstrous code up into small,interchangeable modules that can easily be re-used.
  • 10. jQuery jQuery plays a much smaller role inlarge JavaScript applications than most developers realize.
  • 11. Problems from jQuery jQuery is only part of the solution: it does not provide anyrecommendations on how to structure your code.
  • 12. I learned to love the Pattern Patterns are proven solutions Patterns can be easily reused Patterns can be expressive Patterns are not exact solutions
  • 13. Callback Functionsvar shine = function() { // some action},rise = function(callback) { // .. do something callback(); // .. do something else}rise(shine);
  • 14. Immediate Functions(function foo() { alert(Watch Out!!);}()); This is great, but there’s no privacy.
  • 15. Immediate Functionsvar greeting = (function ( name ) { var days = [Sun, Mon, Tue, Wed, Thu, Fri,Sat], today = new Date(), msg = Hello, + name + Today is +days[today.getDay()] + , + today.getDate(); return msg;}(Aaron)); // Hello Aaron, Today is Sat, 17
  • 16. Observer“A way of notifying change to a number of classes to ensure consistency between classes.”
  • 17. Module Patternvar yetiModule = (function() { var lunch = ‘noms’; return{ eat: function(){ // om nom nom }, sleep: function(){ // ZZzzzzz } }});
  • 18. Revealing Module Patternvar yetiModule = (function() { var lunch = ‘noms’, eat = function(){ // om nom nom }; sleep = function(){ // ZZzzzzz }; return{ ‘eat’: eat, ‘sleep’: sleep }});
  • 19. Namespace Patternvar VAMPIRE = VAMPIRE || {};VAMPIRE.bite() = function ( food ) { // something groovy};VAMPIRE.sleep() = function ( ) { // Shhhhhh};
  • 20. Importing Globalsvar Module = (function(app, $) { // Code...})(MYAPP, jQuery);
  • 21. Application CoreManages the module lifecycle, It reacts to events passed to it and starts, stops, or restarts modules when necessary.
  • 22. Modules. If specific parts of your app fail, can it still function?How much do modules depend on others in the system? How much of this is instantly reusable? Can single modules exist on their own? Can single modules be tested independently? Is your application tightly coupled?
  • 23. “The more tied components are toeach other, the less reusable they willbe, and the more difficult it becomesto make changes to one withoutaccidentally affecting another”-Rebecca Murphey
  • 24. MVC for JavaScriptLuckily there are lots of solutions to providing structure.
  • 25. MV* for JavaScriptBut let’s not worry about pedantics. Architecture Patterns help define structure for an application
  • 26. MVC Models-Represent Knowledge and Data-Can be grouped in Collections-Isolated from views and controller-Responds to questions about state
  • 27. MVC ViewsIn most cases Views are consider the UI Multiple Views can exist for a single model
  • 28. MVC ControllersSits between Views and Models Performs business logic
  • 29. MV* for JavaScriptAll JavaScript libraries interpret MVC a little differently.Just make sure that you’re aware of it.
  • 30. Introducing Backbone-Flexible conventions for structuringapplications-Event-driven communication between viewsand models-Supports data bindings through manualevents
  • 31. Introducing BackboneModels: Domain-level dataViews: Extended User Interface ObjectsCollections: Groups of ModelsRouters: Map URLs to functions
  • 32. Backbone Modelvar User = Backbone.Model.extend({ initialize: function(name){ this.set({name: name}); }});var user = new User("Aaron Maturen");console.log(user.get(name)); //Aaron Maturen
  • 33. Backbone Model: Defaultsvar User = Backbone.Model.extend({ defaults: { suave: true, human: true }});
  • 34. Backbone Model: Validatevar User = Backbone.Model.extend({ validate: function(atts){ if(!atts.email || atts.email.length < 3) { return "email must be at least 3 characters"; } }});
  • 35. Backbone Collectionvar Users = Backbone.Collection.extend({ model: User});users.bind("change", function(user){ console.log("I feel a disturbance in the force.");});var user = users.get(some-id);var user = users.getByCid(some-cid);
  • 36. Backbone Collection: Comparevar Users = Backbone.Collection.extend({ model: User, comparator: function(user){ return user.get(name); }});
  • 37. Backbone Viewvar UserView = Backbone.View.extend({ model: "User", tagName: "span", className: "users", initialize: function() { //... }, render: function() { //... }});
  • 38. Backbone View : elvar UserView = Backbone.View.extend({ el: $("#users")});
  • 39. Backbone View: Templates<script type="text/template" class="template" id="user-template"> <h2>Hello <%= name %>,</h2> <p>Its nice to see you again.</p></script>var UserView = Backbone.View.extend({ template: _.template($("#user-template").html()); render: function(){ $(this.el).html(this.template(this.model.toJSON())); return this; }});
  • 40. Backbone View: Eventsvar UserView = Backbone.View.extend({ events:{ "change input[type=checkbox]" : "toggleActive", "click .destroy" : "deleteUser" }, toggleActive: function(e) { // … }, deleteUser: function(e) { // … }});
  • 41. Backbone View: Contextvar UserView = Backbone.View.extend({ initialize: function(){ _.bindAll(this, render, remove); this.model.bind(change, this.render); this.model.bind(delete, this.remove); }, remove: function(){ $(this.el).remove(); }});
  • 42. Backbone HistoryBackbone.history.start();Backbone.history.saveLocation("/page/" + this.model.id);
  • 43. Backbone Controllervar PageController = Backbone.Controller.extend({ routes:{ "": "index", "search/:query": "search", "search/:query/p:page": "search", "file/*path": "file" }, index: function(){ //... }, help: function(){ //... }, search: function(){ //... }});
  • 44. Backbone Controller: Regexvar PageController = Backbone.Controller.extend({ initialize: function(){ this.route(/pages/(d+)/, id, function(pageId){ // ... }); }});
  • 45. Backbone BenefitsEasier to maintain, when updates areneeded, it’s clear whether the changes aredata-centric, or visual.Decoupling models and views makes iteasier to right unit tests for business logic.Modularity allows developer teams to workon logic and user interfaces simultaneously.
  • 46. Backbone Server Verbsvar User = Backbone.model.extend({ url: /users}); Verb Action create POST /collection read GET /collection[/ update id] /collection/id PUT delete DELETE / collection/id
  • 47. Backbone Servervar user = new User();user.set({name: "Phillip"});user.bind(error, function(e){ //the server returns an error}user.save(null, { success: function() { // user saved successfully }, failure: function() { // user save failed }});
  • 48. Backbone Model : Refreshvar user = Users.get(1);user.fetch();
  • 49. Backbone Collection: Populatevar Users = Backbone.Collection.extend({ model: User, url: /users});Users.fetch();
  • 50. Custom BehaviorBackbone.sync = function(method, model, options){ console.log( method, model, options); options.success(model);} https://github.com/jeromegn/ Backbone.localStorage
  • 51. Always Be Ringo aaron.maturen@gmail.com github.com/aaronmaturen @atmaturen