Backbone/Marionette introduction

5,740 views

Published on

This was the intro to a lunch and learn at Nulogy, introducing the team to backbone and backbone.marionette (and commonjs, and JSTs)

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,740
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
71
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Backbone/Marionette introduction

    1. 1. Let’s Learn Backbone.jsbuilding a re-usable table component
    2. 2. Key things to keep in mind fromthe Throne of JS talk✤ Clean code does not interleave concepts. Code that is around maintaining data should not be mixed with code messing with the DOM.✤ DOM code should be focused, and not know about about other bits of DOM code.✤ The source of truth should be in rich data structures, not embedded in the DOM.
    3. 3. Components of Backbone.js✤ The Model, an abstraction over a single REST resource✤ The Collection, an abstraction over a REST collection of resources✤ The View, a logical UI component✤ The Router, a way to maintain application state
    4. 4. The “real” pattern, MVP✤ Backbone is MVP, Model View Presenter✤ What backbone calls the view is actually the presenter, what it calls the template is actually the view✤ This is confusing, but unimportant
    5. 5. Model / Collection✤ Where the data goes✤ Emits events when things change✤ When in doubt, push it down
    6. 6. The View✤ Operates on a single tree of elements✤ Should never touch the html outside of its root element✤ Should either be changing model/collection based on user interaction, or reacting to data changing✤ Can be rendered without existing in the DOM✤ Can be composed of multiple sub views
    7. 7. The Router✤ When you have a “single page” application, you often still want the back button to work, and users to have the ability to “deep link”✤ The router accomplishes this via either tricks with hash marks, or with push state✤ Least fundamental of all the components
    8. 8. Thats it.
    9. 9. Backbone.Marionette✤ Created by Derick Bailey, to provide structure in building larger javascript applications✤ Philosophically very similar to backbone, just goes a few more steps✤ Eliminates a lot of common boilerplate in backbone code by providing slightly higher level view abstractions✤ Provides tools that become extremely useful when writing larger javascript applications
    10. 10. Marionette Views✤ Provides a additional convenience methods on top of what backbone gives you (ui hash, triggers hash, model events hash (added by me :)✤ Provides a model binder, to prevent zombie views✤ Frameworks away basic rendering code
    11. 11. Marionette Views✤ Item View, binds to a model✤ Collection View, binds to a collection✤ CompositeView, binds to a model and to a collection
    12. 12. Marionette Tools✤ Application Modules: Lets you group parts of the application, and start/stop them independently✤ Layouts/Regions: Manage the creation/displaying/disposing of parts of the page which are dynamic✤ Event Aggregator: Provides a module/application level event bus✤ AppRouter: Routers that delegate to external objects
    13. 13. Building a Table Editor
    14. 14. CommonJS (in the asset pipeline)✤ Using global scope is explicit✤ You bring in a module with var Reference = require(“path/to/ module”)✤ You choose what that Reference is by setting module.exports in the module✤ You should never need to introduce a global variable✤ Much nicer then ruby, but still behind a lot of other implementations (like python, clojure, scala, etc)
    15. 15. Function.apply✤ Inside a function, what “this” refers to is determined by the invocation✤ If invoked off of an object, “this” will refer to that object✤ If invoked in isolation, “this” will refer to the global scope✤ If invoked via apply (or call), “this” is specified by the caller✤ apply also lets you pass an array that will be used as arguments (you apply arguments to a function)
    16. 16. Misc✤ I have emacs set up to display function() as !(). This is purely cosmetic (it is still function when it saves) but I find it dramatically reduces the syntactic noise in the language.
    17. 17. What are our requirements?✤ Have a “new” row. It has a “create” button that when clicked, creates a resource on the server. When that resource is created, it creates a new row.✤ Rows can be edited and deleted.✤ Errors are shown, and edit boxes are highlighted✤ There should be a way to override things at any level✤ There should be a simple api for consumers to invoke
    18. 18. Time to Code

    ×