Backbone & Marionette - Ordena tu Javascript

Charla sobre nuestra experiencia con Backbone y Marionette en CityHeroes. Ventajas, patrones, arquitectura.

Transcript

1. Backbone & Marionette Ordena tu Javascript.
2. /maurotrigo cityhero.es amerpages.com boliviaclick.com fiebredelibros.com citronvision.com crecer nacer
3. DOMinar el DOM: - Animaciones - Validaciones - Forms DOM: jquery, dojo, mootols...
4. Mapas Cargar/guardar datos google (maps, analytics, otros) ajax! APIs (RPC > REST)
5. WTF
6. MV*, data binding, routing REST APIs Single Page Apps
7. MV*, data binding, routing REST APIs Single Page Apps
8. Backbone.js Models Collections Views Events Routing REST APIs MV* Data binding / Pub Sub S.P.A.
9. Backbone.js NO es un framework Liviano No restrictivo MV-algo Underscore! Comunidad
10. hola var Zoo = Backbone.Collection.extend({ model: Animal, url: '/zoo' }); var zoologicoMunicipal = new Zoo([ { type: 'bufeo', sound: 'eee, eee' }, { type: 'tapir', sound: '???' }, ]); zoologicoMunicipal.get(0).shout(); // eee, eee Models / Collections var Animal = Backbone.Model.extend({ defaults: { type: 'shark', sound: 'roarr' }, shout: function() { alert(this.get('sound')); } }); // Herencia / Extensión var Cat = Animal.extend({ type: 'cat', sound: 'miau' }); var garfield = new Cat();
11. Views var AnimalRow = Backbone.View.extend({ initialize: function() { this.listenTo( this.model, // manual data binding 'change', this.render ); }, tagName: 'li', template: _.template('...'), render: function() { this.$el.html( this.template(this.model.attributes) ); return this; } }); ... events: { 'dblclick': 'open', 'click .js-select': 'select' }, open: function() { window.open(this.model.get('public_url')); }, select: function() { this.model.set({selected: true}); } ...
12. Un nuevo reto Single Page App? - API-centric company - JS > server-side code - Actions per minute++ - Load to dwell++
13. WTF!!!
14. Arquitectura - Desacoplar - Encapsular - Bus de eventos
15. Arquitectura Módulo 1 Módulo 2 Módulo 3 Bus de eventos Aplicación
16. Marionette.js - Boilerplate code-- - Marionette Views - Módulos - Eventos - Aplicación
17. Boilerplate code-- var AnimalRow = Backbone.View.extend({ initialize: function() { this.listenTo( this.model, // manual data binding 'change', this.render ); }, tagName: 'li', template: _.template('...'), render: function() { this.$el.html( this.template(this.model.attributes) ); return this; } }); var AnimalRow = Marionette.ItemView.extend({ tagName: 'li', template: _.template('...') }); // Booyakasha!
18. - ItemView - CollectionView - CompositeView - LayoutView - Behaviors var AnimalRow = Marionette.ItemView.extend({ tagName: 'li', template: _.template('...') }); Marionette Views
19. - ItemView - CollectionView - CompositeView - LayoutView - Behaviors var AnimalList = Marionette.CollectionView.extend({ tagName: 'ul', childView: AnimalRow }); var zoologicoMunicipal = new Zoo([ { type: 'bufeo', sound: 'eee, eee' }, { type: 'tapir', sound: '???' }, ]); var zooList = new AnimalList({ collection: zoologicoMunicipal }); Marionette Views
20. - ItemView - CollectionView - CompositeView - LayoutView - Behaviors CollectionView + model, template Marionette Views
21. - ItemView - CollectionView - CompositeView - LayoutView - Behaviors Marionette Views
22. - ItemView - CollectionView - CompositeView - LayoutView - Behaviors Marionette Views Behaviors.Printable = Marionette.Behavior.extend({ ui: { printableArea: '.js-printable-area' }, events: { 'click .js-print': 'print' }, print: function() { var printOptions = { mode : 'iframe', popClose : close, retainAttr : true }; this.ui.printableArea.printArea(printOptions); } });
23. App.module('MiModulo', function(MiModulo, App) { // Funcionalidad del módulo aquí }); Módulos - Modelos - Colecciones - Vistas - Eventos - Routing
24. Eventos - Events - Commands - Requests - Channels trigger / listenTo command / comply request / reply var notificationsChannel = Backbone.Radio.channel('notif');
25. - Contenedor del código - Startup var app = new Marionette.Application(); Aplicación
26. Stack en CityHeroes - Backbone - Marionette - RequireJS - Bootstrap - Handlebars - Moment - Backbone Associations - Grunt - Gitflow - Trello - JS Hint
27. Inspiración, fuentes 1. Amy Palamountain Unsuck Your Backbone 2. David Sulc Marionette Book Series 3. Addy Osmani Patterns For Large-Scale JavaScript Application Architecture 4. Laurie Voss ‘Stuff Everybody Knows Except You’
28. Preguntas?
29. Marionette.js vs. - Thorax (thoraxjs.org) - Chaplin (chaplinjs.org)