jsPoland '18 - 2018 - The Year of Web Components

Components are hot. Every view library or framework seems to be based on components these days. But when you write your React component you can't share it with an Angular developer. Your Vue components can't be used in Preact. The result: fragmentation. The cost: reinventing the wheel for every library.

We've had the answer for years, though. Web components are the standards based solution, but they've never seemed ready for the big time. Until now.

In this talk we'll look at why 2018 is finally the year of web components, the tools and libraries that we can use to build with web components and how you can get started building shareable, compatible, standards based components.

Transcript

1. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
2. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Did you ever write front-end code?
3. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Did you ever write a date picker?
4. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform That’s the problem!
5. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Over 1200 Date Pickers!
6. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform The Dream <date-picker> </date-picker> <video> </video> <input type="text" />
7. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
8. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
9. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
10. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
11. Dominik Kundel | @dkundel | #jsPolandConf | console.log(` Hi! I’m Dominik Kundel `); dkundel.com @dkundel dkundel@twilio.com github/dkundel Developer Evangelist && JavaScript Hacker #webComponents #useThePlatform
12. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform I’m not Polish Photo by Kamil Gliwiński on Unsplash
13. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform
14. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform How do you share UI between projects?
15. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Different approaches
16. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Approach 1: “Bootstrap” approach <!-- Bootstrap CSS --> <link rel="stylesheet" href="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https: //code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="https: //cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script>
17. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Approach 1: “Bootstrap” approach <div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done! </h4> <p>Aww yeah, you successfully read this important alert message </p> <hr> <p class="mb-0"> Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </div>
18. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Approach 2: JavaScript API <div id="map"> </div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https: //maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap" async defer> </script>
19. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Approach 3: “Share button” style <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https: //connect.facebook.net/en_US/ sdk.js#xfbml=1&version=v2.12&appId=APP_ID&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
20. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Approach 3: “Share button” style <div class="fb-share-button" data-href="https: //developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"> <a target="_blank" href="https: // www.facebook.com/sharer/sharer.php? u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share </a> </div>
21. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Poor Development Experience
22. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Wrapper Components
23. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Library Fragmentation
24. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform What if we could extend HTMLElement
25. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Web Components
26. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Spec No. 1 Custom Elements
27. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Custom Elements Definition class DatePicker extends HTMLElement { constructor() { super(); // ... } } customElements.define('date-picker', DatePicker);
28. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Custom Elements Usage <!-- normal custom element --> <date-picker> </date-picker> // via JavaScript document.createElement('date-picker');
29. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Spec No. 2 HTML Templates
30. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform HTML Templates <template id="date-picker-template"> <style> /* ... */ </style> <div> <!-- some markup --> </div> <slot> </slot> <div> <!-- more markup --> </div> </template> const tmpl = document.querySelector('#date-picker-template'); tmpl.content.cloneNode( /*deep: */ true)
31. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Spec No. 3 Shadow DOM
32. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Shadow DOM class DatePicker extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(tmpl.content.cloneNode(true)); } }
33. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Shadow DOM <date-picker><p>I appear in the slot </p> </date-picker> <date-picker> #shadow-root <style> /* "global" styles are limited to this root */ </style> <div> <!-- some markup --> </div> <slot> <!-- paragraph appears here --> </slot> <div> <!-- more markup --> </div> </date-picker>
34. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Spec No. 4 HTML Imports
35. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Spec No. 4 HTML Imports
36. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Support?
37. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform * with Polyfills It’s well supported!*
38. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Why would I care?
39. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform You develop a UI component
40. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Same tools for everyone
41. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Better Developer Experience
42. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 1: WebVR with a-frame
43. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform glitch.com/~aframe-basic-guide
44. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 1: WebVR with a-frame <body> <script src="https: //aframe.io/releases/0.5.0/aframe.min.js"> </script> <a-scene> <a-assets> <img id="boxTexture" src=“https: //i.imgur.com/mYmmbrp.jpg”> </a-assets> <a-box position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture"> <a-animation attribute="position" direction="alternate" dur="2000" repeat="indefinite" to="0 2.2 -5"> </a-animation> </a-box> <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"> </a-sky> <a-light type="ambient" color="#445451"> </a-light> <a-light type="point" intensity="2" position="2 4 4"> </a-light> <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"> </a-plane> <a-text value="Hello, A-Frame!" color="#BBB" position="-0.9 0.2 -3" scale="1.5 1.5 1.5"> </a-text> <a-camera> <a-cursor color="#FAFAFA"> </a-cursor> </a-camera> </a-scene> </body>
45. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 1: WebVR with a-frame <a-text value="Hello, A-Frame!" color="#BBB" position="-0.9 0.2 -3"scale="1.5 1.5 1.5"> </a-text>
46. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 1: WebVR with a-frame <a-text value="Hello, jsPoland!" color="#BBB" position="-0.9 0.2 -3"scale="1.5 1.5 1.5"> </a-text>
47. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 2: Progressive Enhancement
48. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Example 2: web-share-wrapper <web-share-wrapper text="Share this" sharetitle="This amazing thing was shared" sharetext="You should really click on the link to learn more" shareurl="http: //example.com/amazing" > <a href="https: //twitter.com/intent/tweet?text=Share+Text&amp;url=SHARE_URL"> Share on Twitter </a> </web-share-wrapper>
49. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Other Examples github.com/valdrinkoshi/virtual-scroller github.com/GoogleWebComponents/model-viewer
50. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Why not earlier?
51. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform 1. Browser Support
52. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform 2. Low Level API
53. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Extensible Web Manifesto extensiblewebmanifesto.org
54. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Extensible Web Manifesto • The standards process should focus on adding new low-level capabilities to the web platform that are secure and efficient • The web platform should expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them.
55. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform How The Web Sausage Gets Made by Monica Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8
56. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform 3. Tooling
57. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Tooling Past
58. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Tooling Now (a few…)
59. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Pick Your Favorite… Let Others Pick Theirs! and
60. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Let’s build: the last date picker
61. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Let’s build: the last date picker a rating component
62. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Let’s build: I built: the last date picker a rating component
63. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform OnesieJS
64. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform <emoji—rating value="4"> </emoji-rating>
65. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform My tool of choice: LitElement
66. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform About LitElement • Written by the Polymer Team • “A simple base class for creating custom elements rendered with lit-html” • Uses web standards (no compilation)* • lit-html is powered by HTML templates *Except module bundling https: //github.com/Polymer/lit-element
67. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Let’s Take A Look!
68. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Summary Photo by Jan Kahánek on Unsplash
69. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Web Components for any shared UI Think about
70. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Web Components won’t limit your framework choices
71. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Pick Your Favorite… Let Others Pick Theirs! and
72. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform webcomponents.org
73. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform custom-elements-everywhere.com
74. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform custom-elements-everywhere.com
75. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform github.com/shprink/web-components-todo
76. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform Resources • d-k.im/webcomp-stencil • d-k.im/jspoland • github.com/dkundel/emoji-rating • webcomponents.org • ✅ custom-elements-everywhere.com • github.com/shprink/web-components-todo
77. Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform vote.dkundel.com Let me know what you think!
78. console.log(` Thank You! `); dkundel.com @dkundel dkundel@twilio.com github/dkundel d-k.im/jspoland Dominik Kundel | @dkundel | #jsPolandConf | #webComponents #useThePlatform