Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications

Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications

I gave this talk July 31 at BackboneConf 2013 in Boston, MA. Video of presentation can be found here: http://youtu.be/qWr7x9wk6_c

Backbone has been used to build some of the greatest web apps in the world. Chances are, you have one running in your tabs. But the gap from first starting Backbone to building a large application is enormous. In this talk, Brian Mann will focus on closing that gap, and pave the way for creating powerful and highly scalable Backbone Apps.

One of the biggest pain points of Backbone is dealing with its boilerplate code. Let’s face it; Backbone is notorious for being small and un-opinionated. While an attractive feature, it unfortunately means automation and workflow falls on developer’s shoulders. This often results in bloated code bases, reinvented patterns, frustration, and wasted time.

Instead of building your application’s infrastructure from scratch, Brian will show you how to become a much happier Backbone developer by demonstrating how to build modular Backbone apps using Marionette JS.

For videos and screencasts visit:
http://www.backbonerails.com

Brian Mann

July 31, 2013
Tweet

More Decks by Brian Mann

Other Decks in Programming

Transcript

  1. Little Opinions Big Possibilities @BackboneRails Brian Mann The Tools and

    Patterns for Building Large Scale Backbone Applications Atlanta, GA
  2. In my view, large-scale Javascript apps are non-trivial applications requiring

    significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser. Addy Osmani “Patterns For Large-Scale JavaScript Application Architecture” “ “
  3. If working on a significantly large Javascript application, remember to

    dedicate sufficient time to planning the underlying architecture that makes the most sense. It's often more complex than you may initially imagine. Addy Osmani “Patterns For Large-Scale JavaScript Application Architecture” “ “
  4. • Multiple Routers • View Management • Nesting • Cleanup

    • Complex Events • Lots of state changes • Many Entities (Models / Collections) Characteristics = Ton of JS Files
  5. The essential premise at the heart of Backbone has always

    been to try and discover the minimal set of data-structuring (Models and Collections) and user interface (Views and URLs) primitives that are useful when building web applications with JavaScript. ...In an ecosystem where overarching, decides- everything-for-you frameworks are commonplace, and many libraries require your site to be restructured to suit their look, feel, and default behavior — Backbone should continue to be a tool that gives you the freedom to design the full experience of your web application. Jeremy Ashkenas Releasing Backbone v1.0 “ “
  6. Pick the Right Tool • 2-way Data-Binding • Nested Collections

    • Advanced Querying • Filtering / Sorting • Grids • View Models and Computed Properties Stickit / Rivets BB.Associations BB.Query BB.Projections BackGrid BB.Mutators / BB.Computed Fields
  7. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  8. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  9. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  10. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  11. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  12. What we get • Routers • Views • Events class

    Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
  13. • Application • App Modules • -Router • -Controllers •

    -Specialized Views • Components • Mixins • Entities • Config Specialized Objects
  14. • Application • App Modules • -Router • -Controllers •

    -Specialized Views • Components • Mixins • Entities • Config Specialized Objects
  15. • Application • App Modules • -Router • -Controllers •

    -Specialized Views • Components • Mixins • Entities • Config • Modules • Messaging Bus • Request • Command • Pub / Sub Specialized Objects
  16. Visualize Our App ULTIMATE CONTAINER APPLICATION Application Entities Users Sales

    Items Contacts Notes Components Mixins Config APPLICATION INSTANCE #header-region #main-region #footer-region Application Regions Storing Entities and Resources
  17. New Controller Show Controller List Controller Visualize Our App RESOURCE

    AUTHORITY APP MODULE Application App Module Handlers <Requests> <Commands> <Pub / Sub > Router
  18. New Controller Show Controller List Controller Visualize Our App RESOURCE

    AUTHORITY APP MODULE Application App Module Handlers <Requests> <Commands> <Pub / Sub > Router THE GATEKEEPER USERS LIST SHOW NEW ADMIN USERS LIST EDIT DASHBOARD USERS LIST <App Request> <App Command> /users /users/:id /users/new
  19. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Controller Concerns It Giveth Life layout = new List.Layout Layout
  20. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Understands View Dependencies usersCollection = App.request "user:entities" Layout Controller Concerns USERS COLLECTION
  21. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module USERS COLLECTION Listens & Responds to View Events Controller Concerns Layout
  22. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module USERS COLLECTION Listens & Responds to View Events Controller Concerns Layout @listenTo layout, "show", => @listUsers(usersCollection) listUsers: (users) -> new List.CollectionView({ collection: users })
  23. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Collection View Controller Concerns Layout USERS COLLECTION + layout.usersRegion.show(collectionView) Layout
  24. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Requests Additional Services / Components Controller Concerns
  25. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Spinner COMPONENTS Form OK Name: Address: Grid Controller Concerns Item View
  26. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Spinner COMPONENTS Form OK Name: Address: Grid Controller Concerns Item View
  27. Visualize Our App Visual Composer Controller Item View Layout Collection

    View Application Controller App Module Spinner COMPONENTS Grid Controller Concerns Item View
  28. Visualize Our App Presentation Manager View Application Controller App Module

    View <DOM /> Template Event Method When This Event Triggers before:render onBeforeRender before view’s $el has been rendered into the DOM render onRender view’s $el has been inserted, allowing you to work with the DOM show onShow a!er a view has been inserted by a region into the DOM dom:refresh onDomRefresh a!er a view has been shown but has been re-rendered at a later time before:close onBeforeClose view has been told to close. return false to prevent it from closing close onClose a!er view is closed. run custom code such as additional cleanup
  29. Visualize Our App Presentation Manager View Application Controller App Module

    View <DOM /> Template class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point.
  30. Visualize Our App Presentation Manager View Application Controller App Module

    View <DOM /> Template class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point. initialize: -> someModel = new App.Models.someModel
  31. Visualize Our App Presentation Manager View Application Controller App Module

    View <DOM /> Template class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point. initialize: -> someModel = new App.Models.someModel
  32. Visualize Our App Presentation Manager View Application Controller App Module

    View <DOM /> Template Specialized Views Item View Model Collection View Collection Layout
  33. Visualize Our App Presentation Manager <DOM /> Template View Application

    Controller App Module View <section> <div id="git-comment"><%= @comment %></div> <div id="git-author"> Authored by <%= @author %> on <%= @date %> </div> <div id="git-diff"> Showing <%= @num_changed %> changed files with <%= @num_additions %> additions. </div> </section>
  34. • Application • App Router • Controllers • Specialized Views

    • Layouts & Regions • ItemView • Collection View • Composite View • Modules • Messaging Bus • Request • Command • Pub / Sub New Toys
  35. Messaging Bus Controller Entities ## backbone/apps/users/list/list_controller.js @App.module "UsersApp.List", (List, App,

    Backbone, Marionette, $, _) -> class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code... ## backbone/apps/entities/user.js @App.module "Entities", (Entities, App, Backbone, Marionette, $, _) -> class User extends Entities.Model class UsersCollection extends Entities.Collection model: User App.reqres.setHandler "user:entities", -> users = new UsersCollection users.fetch() users
  36. Messaging Bus Controller Entities ## backbone/apps/users/list/list_controller.js @App.module "UsersApp.List", (List, App,

    Backbone, Marionette, $, _) -> class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code... ## backbone/apps/entities/user.js @App.module "Entities", (Entities, App, Backbone, Marionette, $, _) -> class User extends Entities.Model class UsersCollection extends Entities.Collection model: User App.reqres.setHandler "user:entities", -> users = new UsersCollection users.fetch() users
  37. Folder Organization backbone app.js config entities components mixins base playlist

    playlist_songs album album_comments currently_playing apps
  38. Folder Organization backbone app.js config entities components mixins base playlist

    playlist_songs album album_comments currently_playing apps
  39. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list

    playlist_songs_app.js list currently_playing_app.js show
  40. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list

    playlist_songs_app.js list currently_playing_app.js show
  41. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list

    playlist_songs_app.js list currently_playing_app.js show
  42. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list

    playlist_songs_app.js list currently_playing_app.js show