Save 37% off PRO during our Black Friday Sale! »

Getting the most out of Backbone with Marionette.js

Getting the most out of Backbone with Marionette.js

39faa5e8e938d2fbd92acc2e8ebdf65b?s=128

Stratos Pavlakis

December 20, 2013
Tweet

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

  24. None
  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

  56. None
  57. Domain Based

  58. None
  59. Packages

  60. None
  61. An Experiment

  62. Marionette + Postal.js Replace EventAggregator with Postal

  63. Questions ?

  64. None
  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