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

Transcript

1. Little Opinions Big Possibilities @BackboneRails Brian Mann The Tools and Patterns for Building Large Scale Backbone Applications Atlanta, GA
4. What is a large scale application?
5. 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” “ “
6. 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” “ “
7. What is not a large scale application?
8. http://www.todomvc.com TodoMVC
9. Raising the Bar
10. Google Analytics WordPress Rdio Pandora
23. • Multiple Routers • View Management • Nesting • Cleanup • Complex Events • Lots of state changes • Many Entities (Models / Collections) Characteristics = Ton of JS Files
24. Overcoming the gap
25. Engineering is serious business
26. Stop blaming Backbone. <EMBRACE IT>
27. 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 “ “
28. Monolithic Frameworks Focused Small Tools
29. Leverage the Eco-system
30. 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
31. Application Architecture
32. 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)
33. 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)
34. 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)
35. 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)
36. 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)
37. 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)
38. • Application • App Modules • -Router • -Controllers • -Specialized Views • Components • Mixins • Entities • Config Specialized Objects
39. • Application • App Modules • -Router • -Controllers • -Specialized Views • Components • Mixins • Entities • Config Specialized Objects
40. • Application • App Modules • -Router • -Controllers • -Specialized Views • Components • Mixins • Entities • Config • Modules • Messaging Bus • Request • Command • Pub / Sub Specialized Objects
41. Visualize Our App ULTIMATE CONTAINER APPLICATION Application Entities Users Sales Items Contacts Notes Components Mixins Config
42. Visualize Our App ULTIMATE CONTAINER APPLICATION Application Entities Users Sales Items Contacts Notes Components Mixins Config
43. Visualize Our App ULTIMATE CONTAINER APPLICATION Application Entities Users Sales Items Contacts Notes Components Mixins Config
44. 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
45. New Controller Show Controller List Controller Visualize Our App RESOURCE AUTHORITY APP MODULE Application App Module Handlers <Requests> <Commands> <Pub / Sub > Router
46. 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
47. Visualize Our App Visual Composer Controller Item View Layout Collection View Application Controller App Module
48. 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
49. 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
50. 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
51. 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 })
52. 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
53. Visualize Our App Visual Composer Controller Item View Layout Collection View Application Controller App Module Requests Additional Services / Components Controller Concerns
54. 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
55. 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
56. Visualize Our App Visual Composer Controller Item View Layout Collection View Application Controller App Module Spinner COMPONENTS Grid Controller Concerns Item View
57. Visualize Our App Presentation Manager View Application Controller App Module View <DOM /> Template
58. 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
59. 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.
60. 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
61. 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
62. Visualize Our App Presentation Manager View Application Controller App Module View <DOM /> Template Specialized Views Item View Model Collection View Collection Layout
63. Visualize Our App Presentation Manager <DOM /> Template View Application Controller App Module View
64. Visualize Our App Presentation Manager <DOM /> Template View Application Controller App Module View
65. 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>
66. www.backplug.io
67. www.backplug.io
68. Marionette JS
69. • Application • App Router • Controllers • Specialized Views • Layouts & Regions • ItemView • Collection View • Composite View • Modules • Messaging Bus • Request • Command • Pub / Sub New Toys
70. Messaging Bus Controller Entities
71. APPLICATION USERS LIST SHOW NEW ENTITIES USER NOTE NOTES LIST NEW App Modules Shared Resources
72. 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
73. 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
74. Messaging Bus Controller Entities
75. Messaging Bus Controller Entities Application
76. Folder Organization backbone app.js
77. Folder Organization backbone app.js apps
78. Folder Organization backbone app.js apps config entities components mixins base
79. Folder Organization backbone app.js config entities components mixins base playlist playlist_songs album album_comments currently_playing apps
80. Folder Organization backbone app.js config entities components mixins base playlist playlist_songs album album_comments currently_playing apps
81. Playlist.List
83. Playlist.New
85. Playlist.Show
86. Playlist.Show
87. Playlist.Show
88. Playlist.Edit
89. PlaylistSongs.List
90. CurrentlyPlaying.Show
91. CurrentlyPlaying.List
92. CurrentlyPlaying.List
93. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list playlist_songs_app.js list currently_playing_app.js show
94. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list playlist_songs_app.js list currently_playing_app.js show
95. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list playlist_songs_app.js list currently_playing_app.js show
96. apps playlist playlist_songs list show currently_playing playlist_app.js edit new list playlist_songs_app.js list currently_playing_app.js show
97. The End @BackboneRails Brian Mann