The Road to Web Components

The web is abuzz with excitement for Web Components. Is it just hype?

In this presentation, I'll talk about how Ember's Components bring many of the features of Web Components to developers today, and provide some real-world examples of how components have made Ember developers more productive.

Lastly, I'll talk about how Web Components can bridge the worlds of Ember, Angular and Polymer to create an ecosystem of reusable components that can work across libraries and frameworks.

Transcript

1. The Road to Web Components
5. What are Web Components?
6. et·y·mol·o·gy the study of the origin of words and the way in which their meanings have changed throughout history.
7. Web
8. COM
9. Ents
10. That didn't help.
11. <fancy-button value="{{fullName}}"></fancy-button>
12. • What Components Are Not • Benefits of Components • Using Components Today
13. What Components Are Not
14. With React, I don't really see the point of Ember or Angular, they're basically zombie projects now. Hacker News
17. Build anything from a button to a c o m p l e t e a p p l i c a t i o n a s a n encapsulated, reusable element that works across desktop and mobile.
21. API Web App Models App State Component Component Component Component
22. “Flows are just as important
 to good interfaces as individual screens are.” Ryan Singer Basecamp
24. Web App Models App State Component Component App State Component Component App State Component Component API
26. The philosophy that “Everything is an element” is core to understanding Polymer.
27. React is an extremely simple concept because it just describes the DOM with components, and components communicate along the DOM structure.
28. How do you manage which components are shown when?
29. “Flows are just as important
 to good interfaces as individual screens are.” Ryan Singer Basecamp
30. Web App Models App State Component Component App State Component Component App State Component Component API
32. URLs
34. Web App Models App State Component Component App State Component Component App State Component Component API
35. Component Component Component Component Component Component
36. Benefits of Components
37. • Reusable • Isolated • Use HTML • Reduce development time by 99% • Google pays $10 per Web Component used • Literally perfect Why Web Components?
39. Extensible Web http://extensiblewebmanifesto.org/
40. Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them. “ http://extensiblewebmanifesto.org/
41. Data-Bound Elements
42. Who did it first?
43. Who did it first?
46. Bridge Imperative & Declarative Systems
48. Inter- operability
49. Promises/A+
50. Q Promises/A+ DOM Promises RSVP Sparrow Q.async async function ? ??? Task.js
51. Bridge Ecosystems
52. ❤️
53. var button = new FancyButton();! button.bind('value', new PathObserver(model, 'fullName'));
54. Using Components Today
56. • Super Easy • Amazing Tooling
57. Demo
58. • Super Easy • Amazing Tooling
59. emberjs.com/guides/components/
60. Thank you! direct compliments to @tomdale direct complaints & nitpicks to /dev/null