RuhrJS '18 - 2018 - The Year of Web Components

RuhrJS '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 13, 2018
Tweet

Transcript

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

  2. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Did

    you ever write front-end code?
  3. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Did

    you ever write a date picker?
  4. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform That’s

    the problem!
  5. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Over

    1200 Date Pickers!
  6. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform The

    Dream <date-picker> </date-picker> <video> </video> <input type="text" />
  7. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform

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

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

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

  11. Dominik Kundel | @dkundel | #ruhrjs | 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 | #ruhrjs | #webComponents #useThePlatform

  13. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform How

    do you share UI between projects?
  14. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Different

    approaches
  15. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 1.

    The “Bootstrap” approach
  16. Dominik Kundel | @dkundel | #ruhrjs | #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 | #ruhrjs | #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 | #ruhrjs | #webComponents #useThePlatform 2.

    The JavaScript API
  19. Dominik Kundel | @dkundel | #ruhrjs | #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>
  20. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 3.

    “Share button” style
  21. Dominik Kundel | @dkundel | #ruhrjs | #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>
  22. Dominik Kundel | @dkundel | #ruhrjs | #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>
  23. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Poor

    Development Experience
  24. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Wrapper

    Components
  25. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Library

    Fragmentation
  26. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform What

    if we could extend HTMLElement
  27. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Web

    Components
  28. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Spec

    No. 1 Custom Elements
  29. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Custom

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

    Elements Definition class DatePicker extends HTMLInputElement { constructor() { super(); // ... } } customElements.define( 'date-picker', DatePicker, { extends: 'input' } );
  31. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 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' });
  32. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Custom

    Elements Attributes vs Properties
  33. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Custom

    Elements Attributes • Allows you to pass information to the component • Only supports “simple” data <date-picker value="5" disabled> </date-picker>
  34. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Custom

    Elements Properties • Access via JavaScript • Typically reflected back into attributes but doesn't have to • Supports complex data (arrays, objects, etc.) const el = document.querySelector('date-picker'); el.value = 99; el.disabled = false; el.range = ['2018-01-01', '2019-01-01'];
  35. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 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'); } } // ... }
  36. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Spec

    No. 2 HTML Templates
  37. Dominik Kundel | @dkundel | #ruhrjs | #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)
  38. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Spec

    No. 3 Shadow DOM
  39. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Shadow

    DOM class DatePicker extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(tmpl.content.cloneNode(true)); } }
  40. Dominik Kundel | @dkundel | #ruhrjs | #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>
  41. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Spec

    No. 4 HTML Imports
  42. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Spec

    No. 4 HTML Imports
  43. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Support?

  44. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform *

    with Polyfills It’s well supported!*
  45. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Why

    would I care?
  46. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform You

    develop a UI component
  47. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Same

    tools for everyone
  48. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Better

    Developer Experience
  49. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Example

    1: WebVR with a-frame
  50. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform glitch.com/~aframe-basic-guide

  51. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Example

    2: Progressive Enhancement
  52. Dominik Kundel | @dkundel | #ruhrjs | #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>
  53. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Why

    not earlier?
  54. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 1.

    Browser Support
  55. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 2.

    Low Level API
  56. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Extensible

    Web Manifesto
  57. Dominik Kundel | @dkundel | #ruhrjs | #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.
  58. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform How

    The Web Sausage Gets Made by Monica Dinculescu (@notwaldorf) youtube.com/watch?v=326SIMmRjc8
  59. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 3.

    Tooling
  60. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Tooling

    Past
  61. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Tooling

    Now (a few…)
  62. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Pick

    Your Favorite… Let Others Pick Theirs! and
  63. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Let’s

    build: the last date picker
  64. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Let’s

    build: the last date picker a rating component
  65. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform OnesieJS

  66. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform <emoji—rating

    value="4"> </emoji-rating>
  67. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Our

    tool of choice: LitElement
  68. Dominik Kundel | @dkundel | #ruhrjs | #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
  69. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Let’s

    Start!
  70. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform What

    about… Stencil
  71. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform 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 https: //stenciljs.com
  72. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Summary

    Photo by Jan Kahánek on Unsplash
  73. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Web

    Components for any shared UI Think about
  74. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Web

    Components won’t limit your framework choices
  75. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Pick

    Your Favorite… Let Others Pick Theirs! and
  76. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform webcomponents.org

  77. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform custom-elements-everywhere.com

  78. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform custom-elements-everywhere.com

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

  80. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Resources

    • d-k.im/webcomp-stencil • d-k.im/ruhrjs • github.com/dkundel/emoji-rating • webcomponents.org • ✅ custom-elements-everywhere.com • github.com/shprink/web-components-todo
  81. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform vote.dkundel.com

    Let me know what you think!
  82. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform hacktoberfest.digitalocean.com

  83. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform www.twilio.com/quest

  84. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform Stickers!!

  85. Dominik Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform vote.dkundel.com

    Let me know what you think!
  86. console.log(` Thank You! `); dkundel.com @dkundel dkundel@twilio.com github/dkundel d-k.im/ruhrjs Dominik

    Kundel | @dkundel | #ruhrjs | #webComponents #useThePlatform