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

1,336 views

Published on



I gave this talk July 31 at BackboneConf 2013 in Boston, MA
backboneconf.com

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

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,336
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

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

×