Interop! Building a better Backbone.View

Transcript

1. Interop! Building a better Backbone.View rj zaworski, versal inc. · @rjzaworski · github.com/rjz
2. Let’s Talk Backbone MVC (but mostly “M”) ★ Views: the DOM ★ Controllers: ?
3. Let’s Talk Backbone Models are: ★ consistent (RESTful) ★ small ★ event-driven
4. Let’s Talk Backbone For everything else, frameworks ★ Thorax (templating, structure, data-binding) ★ Marionette (structure) ★ ...and a cast of thousands
5. The Goal 1. Composable 2. Transparent 3. Data-driven 4. Portable
6. Composable Large UIs built of smaller components ★ focused concerns ★ predictable life-cycles
7. Transparent Both concern and implementation are readily apparent and easy to follow
8. Data-driven ★ State lives in the model ★ Views respond to model changes
9. Portable Views can be reused ★ outside the host application ★ outside each other ★ outside Backbone
10. Ex. 1: Backbone Goal: render a <figure> from a Backbone.Model .
11. Ex. 1: Backbone Goal: render a <figure> from a Backbone.Model . var template = _.template([ '<img src="<%- image %>" />', '<figcaption><%- title % ></figcaption>' ].join('')) var FigureView = Backbone.View.extend({ tagName: 'figure', render: function () { var attrs = this.model.toJSON(); this.el.innerHTML = template(attrs); return this; } });
12. Ex. 1: Backbone Goal: decompose <figure> into an <img> and a <figcaption>
13. Ex. 1: Backbone Goal: decompose <figure> into an <img> and a <figcaption> var Image = Backbone.View.extend({ tagName: 'img', // ... }); var Figcaption = Backbone.View.extend({ tagName: 'figcaption', // ... }); // in parent's render() method this.$el.empty() .append(imageView.render().el) .append(figcaptionView.render().el);
14. Ex. 1: Backbone ★ manipulate DOM directly ★ what about old state? var Image = Backbone.View.extend({ tagName: 'img', // ... }); var Figcaption = Backbone.View.extend({ tagName: 'figcaption', // ... }); // in parent's render() method this.$el.empty() .append(imageView.render().el) .append(figcaptionView.render().el);
15. Ex. 1: Backbone Goal: update <figcaption> when model changes
16. Ex. 1: Backbone Goal: update <figcaption> when model changes var Figcaption = Backbone.View.extend({ initialize: function () { this.listenTo( this.model, 'change', this.onModelChange ); }, onModelChange: function () { alert('changed'); this.render(); }, // ...
17. Ex. 1: Backbone What if we remove the parent view? var Figure = Backbone.View.extend({ events: { 'click .js-close': 'onCloseClick' }, onCloseClick: function (e) { e.preventDefault(); this.$el.remove(); }, // ... }
18. Ex. 1: Backbone What if we remove the parent view? Events stay bound! var Figcaption = Backbone.View.extend({ initialize: function () { this.listenTo( this.model, 'change', this.onModelChange ); }, onModelChange: function () { alert('changed'); this.render(); }, // ...
19. Back to the goal... 1. Composable? 2. Transparent? 3. Data-driven? 4. Portable?
20. We can make our lives easier Interop!
21. React.js ★ UI-centric ★ The “V” in MVC - no models ★ We don’t need JSX
22. React.js Advantages ★ One-way data flow ★ Managed lifecycle ★ Immediate mode
23. Ex. 2: Backbone + React React Children... var ImageView = React.createClass({ render: function () { return React.DOM.img({ src: this.props.image }); } }); var FigcaptionView = React.createClass({ render: function () { return React.DOM.figcaption(null, this.props.title ); } });
24. Ex. 2: Backbone + React ...with a Backbone.View parent var imageEl = $('<div />')[0]; var figcaptionEl = $('<div />')[0]; this.$el.empty() .append(imageEl) .append(figcaptionEl); React.renderComponent( ImageView(this.model.toJSON()), imageEl ); React.renderComponent( FigcaptionView(this.model.toJSON()), figcaptionEl );
25. Ex. 2: Backbone + React Container <div> aside, ★ Complexity contained in parent ★ Children are easy to work with! ★ No child zombies
26. Wire Backbone data to React UI It’s just an “M” and a “V”: ★ Make friends with toJSON() ★ Keep the interface small
27. Ex. 3: React Goal: render a (React-powered) <figure> from a Backbone.Model . var FigureView = React.createClass({ render: function () { return React.DOM.figure({}, [ ImageView(this.props), FigcaptionView(this.props) ]); } }); var props = model.toJSON(); React.renderComponent( new FigureView(props), document.querySelector('.container') );
28. Ex. 3: React ★ Complexity contained in top-level app ★ All views are easy to work with! ★ No zombies
29. Ex. 3: React ...and the interface is tiny! var FigureView = React.createClass({ render: function () { return React.DOM.figure({}, [ ImageView(this.props), FigcaptionView(this.props) ]); } }); var props = model.toJSON(); React.renderComponent( new FigureView(props), document.querySelector('.container') );
30. Back to the goal... 1. Composable? 2. Transparent? 3. Data-driven? 4. Portable?
31. Web Components Our simple view fits into the DOM <figure> <img src="images/milo.jpg" /> <figcaption>Milo</figcaption> </figure>
32. Web Components What if we could wrap any view up like this? <figure> <img src="images/milo.jpg" /> <figcaption>Milo</figcaption> </figure> <my-figure title="Milo" image="images/milo.jpg"> </my-figure>
33. Web Components “...encapsulated and interoperable custom elements that extend HTML itself” (https://www.polymer-project.org/)
34. Web Components The bad news: they’re not ready yet ★ Limited native support ★ Implemented via Polymer, X-Tags
35. Ex. 4: Web Components Register <my-figure> var proto = Object.create(HTMLElement.prototype); document.registerElement('my-figure', { prototype: proto });
36. Ex. 4: Web Components proto.createdCallback = function () { var img = this.img = document.createElement('img'); var shadow = this.createShadowRoot(); shadow.appendChild(img); }; proto.attributeChangedCallback = function (key) { switch (key) { case 'image': this.img.setAttribute('src', this.getAttribute('image')); break; } };
37. Ex. 4: Web Components Sending in the model... var figure = document.createElement('my-figure'); figure.setAttribute('image', model.get('image')); $('body').appendChild(figure);
38. Ex. 4: Web Components Sending in the model... var figure = document.createElement('my-figure'); figure.setAttribute('image', model.get('image')); $('body').appendChild(figure); <body> <my-figure image="images/milo.jpg"></my-figure> </body>
39. Ex. 4: Web Components Just like that, we’re back to the DOM. model.on('change', function () { $('my-figure').attr(model.toJSON()); });
40. Back to the goal... 1. Composable? 2. Transparent? 3. Data-driven? 4. Portable?
41. Thank you! rj zaworski · @rjzaworski · github.com/rjz Code samples: github.com/rjz/backbone-interop