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

SinnerSchrader Tech Session '18 - 2018 - The Year of Web Components

SinnerSchrader Tech Session '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.

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

October 11, 2018
Tweet

Transcript

  1. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  2. ! " Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  3. ! " # Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  4. ! Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  5. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  6. ! The dream <date-picker> </date-picker> <video> </video> <input type="text" />

    Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  7. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  8. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  9. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  10. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  11. Hi! I'm Dominik Kundel! Developer Evangelist at ! dkundel.com "

    @dkundel # dkundel@twilio.com $ github/dkundel Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  12. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  13. ! " How do you share UI between projects? Dominik

    Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  14. ! Different approaches Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  15. Approach ! The "Bootstrap" approach Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  16. 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  17. 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  18. Approach ! The JavaScript API Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  19. 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  20. Approach ! "Share button" style Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  21. 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  22. 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  23. ! Poor Developer Experience Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  24. ! Wrapper Components Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  25. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  26. ! What if we could extend HTMLElement Dominik Kundel |

    @dkundel | #s2techsession #webComponents #useThePlatform
  27. ! ! ! Web Components Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  28. Spec No. ! ! Custom Elements Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  29. ! Custom Elements Definition class DatePicker extends HTMLElement { constructor()

    { super(); // ... } } customElements.define('date-picker', DatePicker); Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  30. ! Custom Elements Definition class DatePicker extends HTMLInputElement { constructor()

    { super(); // ... } } customElements.define('date-picker', DatePicker, { extends: 'input' }); Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  31. ! Custom Elements Usage <!-- normal custom element --> <date-picker>

    </date-picker> <!-- extended custom element --> <input is="date-picker" /> // via JavaScript document.createElement('date-picker'); document.createElement('input', { is: 'date-picker' }); Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  32. ! Custom Elements Attributes/Properties Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  33. ! Custom Elements Attributes <date-picker value="5" disabled> </date-picker> • Allows

    you to pass information to the component • Only supports "simple" data Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  34. ! Custom Elements Properties const el = document.querySelector('date-picker'); el.value =

    99; el.disabled = false; el.range = ['2018-01-01', '2019-01-01']; • Access via JavaScript • Typically reflected back into attributes but doesn't have to • Supports complex data (arrays, objects, etc.) Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  35. ! Custom Elements Properties class DatePicker extends HTMLElement { //

    ... get disabled() { return this.hasAttribute('disabled'); } set disabled(val) { // Reflect the value of `disabled` as an attribute. if (val) { this.setAttribute('disabled', ''); } else { this.removeAttribute('disabled'); } } // ... } Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  36. Spec No. ! ! HTML Templates Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  37. ! 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) Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  38. Spec No. ! ! Shadow DOM Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  39. ! Shadow DOM class DatePicker extends HTMLElement { constructor() {

    super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(tmpl.content.cloneNode(true)); } } Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  40. ! 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  41. Spec No. ! ! HTML Imports Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  42. Spec No. ! !" HTML Imports Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  43. ! Support? Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  44. ✅ Support is there* * with Polyfills Dominik Kundel |

    @dkundel | #s2techsession #webComponents #useThePlatform
  45. ! " Why do I care? Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  46. ! You develop a UI component Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  47. ! Same tools for everyone Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  48. ! Better Developer Experience Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  49. ! Example 1 WebVR with a-frame ! glitch.com/~aframe-basic-guide Dominik Kundel

    | @dkundel | #s2techsession #webComponents #useThePlatform
  50. ! Demo! Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  51. ! Example 2 Progressive Enhancement ! web-share-wrapper by Phil Nash

    Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  52. ! 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> Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  53. ! Why not earlier? " Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  54. ! Browser Support Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  55. ! Low Level API Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  56. ! Extensible Web Manifesto github.com/extensibleweb/manifesto Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  57. ! 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. Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  58. ! " How The Web Sausage Gets Made by Monica

    Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8 Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  59. ! Tooling Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  60. ! Tooling Past Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  61. ! Tooling Now (a few...) Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  62. Pick Your Favorite... ! and Let Others Pick Theirs! !

    Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  63. ! Let's build: the last datepicker Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  64. ! Let's build: the last datepicker a rating component Dominik

    Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  65. ! OnesieJS ! Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  66. !!!!! <emoji-rating value="5"> </emoji-rating> Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  67. ⚒ Our tool of choice: LitElement Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  68. ⚒ 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 • ! https://github.com/Polymer/lit-element * Except module bundling Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  69. ! Let's start! Dominik Kundel | @dkundel | #s2techsession #webComponents

    #useThePlatform
  70. ! What about Stencil Dominik Kundel | @dkundel | #s2techsession

    #webComponents #useThePlatform
  71. ! What about Stencil • Stencil was written by the

    Ionic Team • "compiler that generates web components" • Built to bring Ionic to more frameworks than Angular • Inspired by Angular, React and others • Uses TypeScript, decorators, and JSX • ! stenciljs.com Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  72. ! Let's use a web component! Dominik Kundel | @dkundel

    | #s2techsession #webComponents #useThePlatform
  73. ! Let's wrap it up! Dominik Kundel | @dkundel |

    #s2techsession #webComponents #useThePlatform
  74. Think about Web Components for any shared UI Dominik Kundel

    | @dkundel | #s2techsession #webComponents #useThePlatform
  75. Web Components won't limit your framework choices Dominik Kundel |

    @dkundel | #s2techsession #webComponents #useThePlatform
  76. Pick Your Favorite... ! and Let Others Pick Theirs! !

    Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  77. ! One datepicker to rule !em a" ! Dominik Kundel

    | @dkundel | #s2techsession #webComponents #useThePlatform
  78. webcomponents.org Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  79. custom-elements-everywhere.com Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  80. github.com/shprink/web-components-todo Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform

  81. Resources • ! d-k.im/webcomp-stencil • " d-k.im/webcomp-s2techsession • #$ github.com/dkundel/emoji-rating

    • webcomponents.org • ✅ custom-elements-everywhere.com • & github.com/shprink/web-components-todo Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  82. ! Let me know what you think! ! vote.dkundel.com Dominik

    Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  83. Thank You! ! Dominik Kundel " vote.dkundel.com # d-k.im/webcomp-s2techsession $

    @dkundel % dkundel@twilio.com & github/dkundel Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform
  84. ! d-k.im/vote-backup Dominik Kundel | @dkundel | #s2techsession #webComponents #useThePlatform