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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. What are Web
   Components?
   

   View Slide

6. et·y·mol·o·gy
   the study of the origin of words and
   the way in which their meanings have
   changed throughout history.
   

   View Slide

7. Web
   

   View Slide

8. COM
   

   View Slide

9. Ents
   

   View Slide

10. That didn't help.
    

    View Slide

11. 
    

    View Slide

12. • What Components Are Not
    • Benefits of Components
    • Using Components Today
    

    View Slide

13. What Components
    Are Not
    

    View Slide

14. With React, I don't really see the point of
    Ember or Angular, they're basically zombie
    projects now.
    Hacker News
    

    View Slide

15. View Slide

16. View Slide

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.
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. API
    Web App
    Models
    App State
    Component Component
    Component Component
    

    View Slide

22. “Flows are just as important

    to good interfaces as
    individual screens are.”
    Ryan Singer
    Basecamp
    

    View Slide

23. View Slide

24. Web App
    Models
    App State
    Component
    Component
    App State
    Component
    Component
    App State
    Component
    Component
    API
    

    View Slide

25. View Slide

26. The philosophy that “Everything is an
    element” is core to understanding
    Polymer.
    

    View Slide

27. React is an extremely simple concept
    because it just describes the DOM with
    components, and components
    communicate along the DOM structure.
    

    View Slide

28. How do you manage
    which components are
    shown when?
    

    View Slide

29. “Flows are just as important

    to good interfaces as
    individual screens are.”
    Ryan Singer
    Basecamp
    

    View Slide

30. Web App
    Models
    App State
    Component
    Component
    App State
    Component
    Component
    App State
    Component
    Component
    API
    

    View Slide

31. View Slide

32. URLs
    

    View Slide

33. View Slide

34. Web App
    Models
    App State
    Component
    Component
    App State
    Component
    Component
    App State
    Component
    Component
    API
    

    View Slide

35. Component
    Component
    Component
    Component
    Component
    Component
    

    View Slide

36. Benefits of
    Components
    

    View Slide

37. • Reusable
    • Isolated
    • Use HTML
    • Reduce development time by 99%
    • Google pays $10 per Web Component used
    • Literally perfect
    Why Web Components?
    

    View Slide

38. View Slide

39. Extensible Web
    http://extensiblewebmanifesto.org/
    

    View Slide

40. Expose low-level capabilities that
    explain existing features, such as
    HTML and CSS, allowing authors
    to understand and replicate them.
    “
    http://extensiblewebmanifesto.org/
    

    View Slide

41. Data-Bound
    Elements
    

    View Slide

42. Who did it first?
    

    View Slide

43. Who did it first?
    

    View Slide

44. View Slide

45. View Slide

46. Bridge Imperative &
    Declarative Systems
    

    View Slide

47. View Slide

48. Inter-
    operability
    

    View Slide

49. Promises/A+
    

    View Slide

50. Q
    Promises/A+
    DOM Promises
    RSVP Sparrow
    Q.async
    async function
    ?
    ???
    Task.js
    

    View Slide

51. Bridge
    Ecosystems
    

    View Slide

52. ❤️
    

    View Slide

53. var button = new FancyButton();!
    button.bind('value', new PathObserver(model, 'fullName'));
    

    View Slide

54. Using Components
    Today
    

    View Slide

55. View Slide

56. • Super Easy
    • Amazing Tooling
    

    View Slide

57. Demo
    

    View Slide

58. • Super Easy
    • Amazing Tooling
    

    View Slide

59. emberjs.com/guides/components/
    

    View Slide

60. Thank you!
    direct compliments to @tomdale
    direct complaints & nitpicks to /dev/null
    

    View Slide