Large scale apps using tools in backbone.marionette

Transcript

3. NOPOINTLESSAPPS
5. • Jakob Dam Jensen • Web since 97 - JS was frightening • ASP, Servlets, PHP indtil 2007 • Since then a lot of mobile dev • But I’ve played with most client-side libs Who am I?
7. Backbone is great • Is small • Provides structure • Simple and elegant • I can fix bugs in it if I need to
8. Backbone can be a bitch • Because large scale apps are difficult to maintain • Can become a tightly coupled mess • Not Backbones fault • Software-engineering is hard
9. Large Backbone apps are hard to maintain…
17. Backbone Pain Points • Routing • Internal communication (App events) • It being small means that we’re on our own • Collection views etc. • View cleanup • No controllers.. really
18. But Backbone should be seen as the foundation
19. =)
20. You can fix all of this
21. But why should you?
23. Marionette to the rescue • Different view types + regions • App architecture and infrastructure • Message bus • Controllers
24. Different view types
25. • View • CollectionView • ItemView • Layout • CompositeView Different view types
31. Layout
38. App architecture
39. App Sup-App Sup-App Sup-App Sup-App
40. Blink Dashboard Members Calendar Account management List Show New List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
46. Keeping things loose
47. Blink (App) Dashboard Members Calendar Account management List Show New List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
48. Message bus: Commands • Can set command handler • App.commands.setHandler name, function • Can execute commands • App.execute ‘name’, [function_options]
49. • edit:calendar_events • index:calendar_events • list:calendar_events • new:calendar_events • show:calendar_events Calendar New List Edit Show Index Message bus: Commands
51. App.execute(‘index:calendar_events’, {event: event})
55. Message bus: Req Res • Can set request handlers • App.reqres.setHandler ‘name’, function • Can request objects • App.request ‘name’, [options]
58. Message bus: vent • Can observe vent event • App.vent.on ‘name’, callbackFunction • Can trigger vent event • App.vent.trigger ‘name’, [options]
59. Blink (App) Dashboard Members Calendar Account management List Show New List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
60. • Main app in module acts
 as facade • Commands set here • Routing set here Modules encapsulates responsibilities Calendar New List Edit Show Index
63. Blink (App) Dashboard Members Calendar Account management List Show New List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
65. What now?
67. Questions?
68. Anybody looking for freelance developers? =)
69. Thanks