Getting the most out of Backbone with Marionette.js

Transcript

1. Marionette Getting the most out Backbone.js @th3hunt
2. Backbone.js • models with key-value binding and custom events • collections with a rich API of enumerable functions • views with declarative event handling • connects to your existing API over a RESTful JSON interface.
3. Backbone Rocks but is NOT a complete framework
4. it works on a Micro Level
5. Let’s see why
6. View • el //div.character • ‘click .kill’: ‘kill’ • kill: function () {…} Model { name: Ned surname: Stark } • urlRoot: ‘/characters’ Template <span>{{name}} {{surname}}</span> <a class=‘btn kill’>kill</a> ~ part of a Collection
7. 1 collection of 3 models behind 3 views Component Level
8. But what about…
9. Component B Component C Component D Sub Component A Sub Component A Sub Component A Component A
10. Coarse grained Views?
11. Then we did nothing View’s EL becomes our new DOM root
12. Each component also a View?
13. 30,000 feet view
14. – Me :) “It would be like a town with beautiful apartments and terrible street planning”
15. and there is more to it
16. bootstrapping a new project you find yourself in front of a blank slate
17. day one
18. Application Structure Initialize / Shutdown Componentization Messaging Files Layout
19. 28 days later
20. Boilerplate Nesting Views Swapping Views Collaboration of Components Enforcing Sensible Defaults Factoring out Practices
21. 3 months later
22. Component Sharing Memory Leaks Performance Events Mayhem
23. 6 months later
25. build scalable Backbone.js applications by Derick Bailey
26. Application Structure
27. App Sub-App Sub-App Sub-App Sub-App
28. Marionette.Application Module Module Module Module View | Module | Mediator Component Level
29. Components
30. Infrastructure
31. Marionette.Application
32. swap views initialization event bus
33. Marionette.Module
34. encapsulation initialization shutdown
35. –Phil Karlton “There are only two hard things in Computer Science: cache invalidation and naming things”
36. Marionette.Controller A general purpose object for controlling modules, routers, views and implementing a mediator pattern / public API for components
37. initialization shutdown Public API
38. View Management
39. View ItemView Collection View Composite View Layout
40. Backbone.View
41. boilerplate boilerplate
42. Marionette.ItemView
43. declarative Boilerplate Gone !
44. Marionette.CollectionView
45. ItemView CollectionView ItemView ItemView ItemView ItemView <ul> <li> <li> <li> <li> <li>
46. sensible defaults
47. Marionette.CompositeView
48. CompositeView ItemView ItemView ItemView … … <table> <thead> <tfoot> <tbody> <tr> <tr> <tr>
49. Marionette.Layout
50. #logo #navigation #header #main Composite Another Layout Item Collection
51. Events / Messaging
52. Events ! On/Trigger Commands ! Handle/Execute Requests ! Handle/Request
53. Files Layout
54. componentization guides our files layout
55. Rails Style
57. Domain Based
59. Packages
61. An Experiment
62. Marionette + Postal.js Replace EventAggregator with Postal
63. Questions ?
65. Stratos Pavlakis! pavlakis.stratos@gmail.com th3hunt References! ! http://backbonejs.org/ https://github.com/marionettejs/backbone.marionette http://lostechies.com/derickbailey/2011/11/18/is-there-an-idiomatic-command-pattern-implementation-for-javascript/ http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/ https://github.com/addyosmani/backbone-fundamentals