Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Marionette talk 2016

492 views

Published on

My talk for Morning Lohika @ Romania event, in Cluj

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Marionette talk 2016

  1. 1. MARIONETTE SHALL WE DANCE?
  2. 2. KSENIA REDUNOVA
  3. 3. BACKBONE.JS PROS & CONS
  4. 4. • Simple & flexible • Event-driven architecture • Model/Collection implementation for REST • MVW PROS
  5. 5. • Simple :) • Too easy to go in wrong direction • No main Application class • No nesting of views • No layouts (header/footer/sidebar/content etc) • Method render does nothing by default • Memory management CONS
  6. 6. MARIONETTE Complex lib intended for large-scale apps development
  7. 7. • Has a bunch of common design patterns • Lowers amount of standard code because of view types • Has nested views • Manages memory • Combines event-driven architecture and event aggregator
  8. 8. Marionette.Application • App management - start, stop, and other functionality • Modularity • “application” is just an object
  9. 9. MODULE Is deprecated! use AMD/CommonJS/ES6 modules
  10. 10. MARIONETTE VIEW MAGIC
  11. 11. MARIONETTE VIEW MAGIC • Rendering connected to model changes • Template management • Has UI object • Has .close() method • Extensible
  12. 12. TEMPLATE HELPERS
  13. 13. TEMPLATE HELPERS
  14. 14. Marionette.ItemView • View is rendered based on model data • “model” attribute • “template” attribute • is rendered automatically • modelEvents – view methods are called on model events
  15. 15. UI OBJECT UI hash in the view maps UI elements by their jQuery selectors
  16. 16. Marionette.CollectionView • View is rendered based on Collection data • Automatic re-render on add/remove/reset/etc events • childView attribute is automatically instantiated and linked with model
  17. 17. COLLECTION VIEWS
  18. 18. Marionette.CompositeView • CompositeView = CollectionView + template • combination of ItemView and CollectionView • renders elements of Backbone.Collection inside wrapper • inherits Marionette.CollectionView
  19. 19. MODEL EVENTS & COLLECTION EVENTS
  20. 20. ZOMBIE APOCALYPSE
  21. 21. REGION • View intended to manage the lifecycle of other views • Renders view instance and adds it to DOM • It’s a bridge between DOM and backbone • Nested regions - LayoutView class
  22. 22. DISPLAY A VIEW IN A REGION
  23. 23. LAYOUT • Unlike ItemView it contains regions • Is good to be a widget with several views
  24. 24. LAYOUT
  25. 25. BACKBONE.WREQR & BACKBONE.RADIO
  26. 26. MESSAGING BUS • Event - app-level events • Commands - run commands • Request/Response - request of specific values/states
  27. 27. EVENT AGGREGATOR • pub/sub • trigger/bind • Notifies the app about events in different parts (“user:logged-in”) • App level events are like global function calls • Different event types, namespaces define the semantics
  28. 28. EVENT AGGREGATOR
  29. 29. COMMANDS Commands are used to make any component tell another component to perform an action without a direct reference to it. • Subscribe for a command - only once • Example: Save command • cmd-s • Clicking a toolbar button • Choosing File => Save from the menubar
  30. 30. COMMANDS
  31. 31. REQUEST / RESPONSE • Request Response is a means for any component to request information from another component without being tightly coupled. • For app level data (e. g. shopping cart status) • Requests have intention • The requests are 'one-to-one'
  32. 32. REQUEST / RESPONSE
  33. 33. Backbone.Radio.channel // Get a reference to the channel named 'user' var userChannel = Backbone.Radio.channel('user'); userChannel.on('some:event', function() { console.log('An event has happened!'); }); userChannel.reply('some:request', 'food is good'); userChannel.trigger('some:event'); Combination of Backbone.Events and Radio.Requests
  34. 34. SUMMARY MESSAGING BUS • Application.vent - instance of Backbone.Wreqr.EventAggregator. pub/sub. • Application.commands - instance of Backbone.Wreqr.Commands. Subscribe to command execution - once • Application.reqres - instance of Backbone.Wreqr.RequestResponse. Only one subscriber performs the request • Backbone.Radio.channel
  35. 35. • Child views - Backbone.BabySitter • Marionette.RegionManager • Marionette.TemplateCache OTHER COOL THINGS FOR VIEWS MANAGEMENT
  36. 36. LINKS MarionetteJS.com (Derick Bailey) BackboneRails.com (Brian Mann) “Marionette: gentle introduction” by David Sulc http://benmccormick.org/2015/01/26/backbone-radio/
  37. 37. THANK YOU!

×