The Web Component Ecosystem

Web Components give us the power to invent our own HTML elements, designed to be future-facing, interoperable, and beautiful on the multi-device web. With tools like Polymer and X-Tag, we can start taking advantage of this new technology today. Let’s take a look at some of the amazing elements that are already being produced, and explore how you can start leveraging them in your own projects.

Transcript

1. The Web Component Ecosystem
   A wonderful world of Web Components
   Rob Dodson
   Brazil - Aug, 2014
   

   View Slide

2. +RobDodson
   @rob_dodson
   

   View Slide

3. Agenda
   Web Components: Overview
   The ecosystem
   Join the revolution
   

   View Slide

4. Web Components: Overview
   

   View Slide

5. What problems are we solving?
   

   View Slide

6. View Slide

7. 
   !
   
   
   

   View Slide

8. http://drbl.in/esYL
   Building UI tabs
   should be easy!
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. 
    KNOWLEDGE
    HISTORY
    FOOD
    
    Less markup. Less JS. Less confusion.
    Web Components
    

    View Slide

15. How do they work?
    

    View Slide

16. 36
    Browser support
    Summer 2014
    

    View Slide

17. View Slide

18. Layers ·
    sugaring
    ·
    polymer.js: declarative, data-binding,
    ·
    property observation, gestures, …)
    ·
    components
    ·
    core elements, paper elements
    ·
    polyfills
    ·
    <br/>

    View Slide

19. Browser support
    Summer 2014 (with Polymer)
    

    View Slide

20. Browser support
    Summer 2014 (with Polymer)
    

    View Slide

21. Custom Elements
    define new HTML/DOM elements
    

    View Slide

22. View Slide

23. 
    Tab 1
    Tab 2
    Tab 3
    
    declarative, readable
    meaningful HTML
    common way to extend → reusable
    Custom Elements
    define new HTML
    

    View Slide

24. declarative, readable
    meaningful HTML
    common way to extend → reusable
    Custom Elements
    define new HTML
    var tabs = document.querySelector('paper-tabs');
    tabs.addEventListener('core-activate', function() {
    console.log(this.selected);
    });
    

    View Slide

25. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer
    
    …
    
    usage …
    // document.createElement(‘paper-tabs’);
    

    View Slide

26. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer
    
    …
    
    usage …
    // document.createElement(‘paper-tabs’);
    

    View Slide

27. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer
    
    …
    
    usage …
    // document.createElement(‘paper-tabs’);
    

    View Slide

28. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer
    
    …
    
    usage …
    // document.createElement(‘paper-tabs’);
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. Templates
    native client-side templating
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. Shadow DOM
    DOM/CSS scoping
    

    View Slide

39. 
    

    View Slide

40. 
    Actually Shadow DOM
    

    View Slide

41. 
    

    View Slide

42. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer
    
    
    
    I’m a profile-card
    
    
    

    View Slide

43. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer
    
    
    
    I’m a profile-card
    
    
    

    View Slide

44. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +

    “I’m a profile-card”;
    vanilla
    polymer
    
    
    
    I’m a profile-card
    
    
    

    View Slide

45. html5rocks.com/en/tutorials/webcomponents/shadowdom
    

    View Slide

46. HTML Imports
    loading web components
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. Custom Elements
    Create new HTML elements and extend existing ones
    Templates
    Native templating in the browser
    Shadow DOM
    Scoped CSS!!! + encapsulated markup
    HTML Imports
    Load custom element definitions and resources
    

    View Slide

54. The ecosystem
    

    View Slide

55. Elements
    

    View Slide

56. 
    !
    
    
    

    View Slide

57. 
    !
    
    
    

    View Slide

58. What if we designed HTML
    for the mobile web?
    

    View Slide

59. View Slide

60. 
    
    
    
    

    View Slide

61. http://bit.ly/1jkTo5c
    core-elements
    Image:
    

    View Slide

62. 
    
    
    
    
    
    Visual
    
    
    
    
    
    
    Non-visual
    And many more…
    Image: http://bit.ly/1kuX889,
    

    View Slide

63. 
    A basic container for controls
    like tabs or buttons
    MY APP
    

    View Slide

64. href=“core-toolbar.html”>
    
    A basic container for controls
    like tabs or buttons
    MY APP
    

    View Slide

65. 
    MY APP
    
    href=“core-toolbar.html”>
    
    A basic container for controls
    like tabs or buttons
    MY APP
    

    View Slide

66. 
    
    
    MY APP
    
    href=“core-toolbar.html”>
    
    A basic container for controls
    like tabs or buttons
    MY APP
    

    View Slide

67. A simple container with a header
    section and a content section
    
    
    
    
    
    MY APP
    
    …
    
    MY APP
    

    View Slide

68. A simple container with a header
    section and a content section
    
    
    
    
    MY APP
    
    …
    
    MY APP
    

    View Slide

69. A simple container with a header
    section and a content section
    
    
    
    
    MY APP
    
    …
    
    MY APP
    

    View Slide

70. A simple container with a header
    section and a content section
    
    
    
    
    MY APP
    
    …
    
    MY APP
    

    View Slide

71. 
    
    
    
    MY APP
    
    …
    
    Toolbar will scroll with the page
    
    

    View Slide

72. A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.
    
    
    Drawer panel...
    Main panel...
    
    

    View Slide

73. 
    Drawer panel...
    Main panel...
    
    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.
    
    

    View Slide

74. 
    Drawer panel...
    Main panel...
    
    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.
    
    

    View Slide

75. View Slide

76. Material design
    

    View Slide

77. Preview @ Google I/O
    

    View Slide

78. paper-elements
    

    View Slide

79. label="Type only numbers... (floating)"
    validate="^[0-9]*$"
    error="Input is not a number!">
    
    

    View Slide

80. 
    

    View Slide

81. 
    
    
    
    A reactive ink effect for indicating touch
    and mouse actions
    
    

    View Slide

82. 
    
    
    
    A dynamic shadow for conveying
    z-depth and spatial relationships
    
    

    View Slide

83. polymer-project.org/apps/topeka/
    

    View Slide

84. View Slide

85. polymer-project.org
    

    View Slide

86. We’re not alone
    

    View Slide

87. Mozilla Brick
    

    View Slide

88. brick-appbar
    brick-deck
    brick-tabbar
    

    View Slide

89. core-icon
    x-instagram
    (not shown)
    

    View Slide

90. Web Components
    can work together
    

    View Slide

91. Not just browser makers
    

    View Slide

92. …?
    

    View Slide

93. 
    github.com/mvaldetaro/twbs-grid
    
    .bs-col-md-8
    .bs-col-md-4
    
    

    View Slide

94. 
    github.com/erikringsmuth/app-router
    my-site.com/order/:id
    
    
    
    !
    
    
    
    

    View Slide

95. 
    github.com/addyosmani/page-er
    >">
    !
    var pager = document.querySelector("page-er");
    document.addEventListener("polymer-ready", function() {
    pager.data = model.items;
    });
    

    View Slide

96. 
    github.com/garstasio/ajax-form
    Full Name
    Country City
    Join newsletter
    √
    
    Full Name
    
    
    …
    
    

    View Slide

97. Apps
    

    View Slide

98. polymer-project.org
    

    View Slide

99. chromestatus.com
    

    View Slide

100. polymer-project.org/tools/designer/
     

     View Slide

101. View Slide

102. View Slide

103. APIs
     

     View Slide

104. APIs (as elements)
     

     View Slide

105. I want to add a marker
     to a Google map.
     

     View Slide

106. <br/>#map {<br/>height: 400px;<br/>}<br/>
     !
     
     !
     <br/>
     <br/>var marker = null;<br/>function getCurrentLocation(callback) {<br/>navigator.geolocation.watchPosition(callback);<br/>}<br/>!<br/>function addMarker(opts, info) {<br/>var marker = new google.maps.Marker(opts);<br/>!<br/>var infoWindow = new google.maps.InfoWindow({content: info});<br/>!<br/>google.maps.event.addListener(marker, 'click', function() {<br/>infoWindow.open(opts.map, marker);<br/>});<br/>!<br/>return marker;<br/>}<br/>!<br/>function mapReady() {<br/>var container = document.querySelector('#map');<br/>var map = new google.maps.Map(container, {<br/>zoom: 14, disableDefaultUI: true<br/>});<br/>getCurrentLocation(function(pos) {<br/>var current = new google.maps.LatLng(pos.coords.latitude,<br/>pos.coords.longitude);<br/>map.setCenter(current);<br/>!<br/>// Re-position marker or create new one.<br/>if (marker) {<br/>marker.setPosition(map.getCenter());<br/>} else {<br/>marker = addMarker({<br/>position: current, map: map, title: 'Your location'<br/>}, '<b>Your location</b>');<br/>}<br/>});<br/>}<br/>
     So much code for
     one map marker!
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. googlewebcomponents.github.io
     github.com/GoogleWebComponents
     

     View Slide

115. youtube.com/watch?v=eORqFaf_QzM
     

     View Slide

116. github.com/ForceDotComLabs/mobile-ui-elements
     github.com/ForceDotComLabs
     

     View Slide

117. View Slide

118. Join the revolution
     

     View Slide

119. Learn
     

     View Slide

120. View Slide

121. polymer-project.org
     

     View Slide

122. Build
     

     View Slide

123. YO ELEMENT
     npm install -g generator-element
     

     View Slide

124. YO POLYMER
     npm install -g generator-polymer
     

     View Slide

125. Start with
     github.com/PolymerLabs/seed-element
     

     View Slide

126. View Slide

127. youtube.com/watch?v=2toYLLcoY14
     

     View Slide

128. Share!
     

     View Slide

129. customelements.io
     

     View Slide

130. {
     "name": "my-element",
     "version": "0.0.0",
     "description": "My awesome Custom Element",
     "license": "MIT",
     "keywords": [
     "web-components"
     ],
     "ignore": [
     "**/.*",
     "node_modules",
     "bower_components"
     ]
     }
     bower.json
     

     View Slide

131. EXPLORE
     

     View Slide

132. 
     +RobDodson
     @rob_dodson
     

     View Slide