Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Road to Web Components

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.

9bf3a766e037b9d5a4da0a6f9d0f4f68?s=128

tomdale

May 05, 2014
Tweet

Transcript

  1. The Road to Web Components

  2. None
  3. None
  4. None
  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
  15. None
  16. None
  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.
  18. None
  19. None
  20. None
  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
  23. None
  24. Web App Models App State Component Component App State Component

    Component App State Component Component API
  25. None
  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
  31. None
  32. URLs

  33. None
  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?
  38. None
  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?

  44. None
  45. None
  46. Bridge Imperative & Declarative Systems

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

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