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

React Alicante '18 - 2018 - The Year of Web Components

React Alicante '18 - 2018 - The Year of Web Components

Talk about web components given at React Alicante in 2018. Example code:
github.com/dkundel/emoji-rating
github.com/dkundel/vote-my-talk-react

Dominik Kundel

September 14, 2018
Tweet

More Decks by Dominik Kundel

Other Decks in Programming

Transcript

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

    View Slide

  2. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  3. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  4. ! "
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  5. ! " #
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  6. !
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

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

    View Slide

  9. ! The dream



    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  11. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  12. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  13. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  14. Hi!
    I'm Dominik Kundel!
    Developer Evangelist at
    ! dkundel.com
    " @dkundel
    # [email protected]
    $ github/dkundel
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  15. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  16. ! "
    How do you share UI between projects?
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  17. !
    Different approaches
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  18. Approach !
    The "Bootstrap" approach
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  19. Approach 1: "Bootstrap" approach

    rel="stylesheet"
    href="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">


    src="https: //code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous">

    src="https: //cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous">

    src="https: //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous">

    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  20. Approach 1: "Bootstrap" approach

    Well done!
    Aww yeah, you successfully read this important alert message


    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.


    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  21. Approach !
    The JavaScript API
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  22. Approach 2: JavaScript API

    <br/>var map;<br/>function initMap() {<br/>map = new google.maps.Map(document.getElementById('map'), {<br/>center: {lat: -34.397, lng: 150.644},<br/>zoom: 8<br/>});<br/>}<br/>
    async defer>
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  23. Approach !
    "Share button" style
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  24. Approach 3: "Share button" style

    (function(d, s, id) {<br/>var js, fjs = d.getElementsByTagName(s)[0];<br/>if (d.getElementById(id)) return;<br/>js = d.createElement(s); js.id = id;<br/>js.src = 'https: //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=APP_ID&autoLogAppEvents=1';<br/>fjs.parentNode.insertBefore(js, fjs);<br/>}(document, 'script', 'facebook-jssdk'));
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  25. Approach 3: "Share button" style
    data-layout="button_count"
    data-size="small"
    data-mobile-iframe="true">
    href="https: // www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
    class="fb-xfbml-parse-ignore">Share

    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  26. !
    Poor Developer Experience
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  27. !"
    Hey Dom!
    You are doing it wrong!
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  28. Use React!
    import React, { Component } from 'react';
    import FacebookProvider, { ShareButton } from 'react-facebook';
    export default class Example extends Component {
    render() {
    return (



    );
    }
    }
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  29. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  30. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  31. !
    Wrapper Components
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  32. Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  33. !
    What if we could extend HTMLElement
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  34. ! ! !
    Web Components
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  35. Spec No. !
    ! Custom Elements
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

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

    View Slide

  38. ! Custom Elements Usage




    // via JavaScript
    document.createElement('date-picker');
    document.createElement('input', { is: 'date-picker' });
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  39. ! Custom Elements
    Attributes/Properties
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  40. ! Custom Elements Attributes

    • Allows you to pass information to the component
    • Only supports "simple" data
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  41. ! 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 | #ReactAlicante #webComponents #useThePlatform

    View Slide

  42. ! 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 | #ReactAlicante #webComponents #useThePlatform

    View Slide

  43. Spec No. !
    ! HTML Templates
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  44. ! HTML Templates

    <br/>/* ... */<br/>




    const tmpl = document.querySelector('#date-picker-template');
    tmpl.content.cloneNode( /*deep: */ true);
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  45. Spec No. !
    ! Shadow DOM
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  46. ! Shadow DOM
    class DatePicker extends HTMLElement {
    constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(tmpl.content.cloneNode(true));
    }
    }
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  47. ! Shadow DOM
    I appear in the slot

    #shadow-root
    <br/>/* "global" styles are limited to this root */<br/>




    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  48. Spec No. !
    ! HTML Imports
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  49. Spec No. !
    !" HTML Imports
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  50. !
    Support?
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide


  51. Support is there*
    * with Polyfills
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  53. !
    You develop a UI component
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  54. !
    Same tools for everyone
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  55. !
    Better Developer Experience
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  56. ! Example 1
    WebVR with a-frame
    ! glitch.com/~aframe-basic-guide
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  57. ! Demo!
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  58. ! Example 2
    Progressive Enhancement
    ! web-share-wrapper by Phil Nash
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  59. ! Example 2: 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"
    >

    Share on Twitter


    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  60. ! Why not earlier? "
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  61. !
    Browser Support
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  62. !
    Low Level API
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  64. ! 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 | #ReactAlicante #webComponents #useThePlatform

    View Slide

  65. ! "
    How The Web Sausage Gets Made
    by Monica Dinculescu (@notwaldorf)
    youtube.com/watch?v=326SIMmRjc8
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  66. !
    Tooling
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  67. ! Tooling Past
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  68. ! Tooling Now (a few...)
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  69. Pick Your Favorite... !
    and
    Let Others Pick Theirs! !
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  71. ! Let's build:
    the last datepicker
    a rating component
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  72. ! OnesieJS !
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  73. !!!!!

    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  75. ⚒ 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 | #ReactAlicante #webComponents #useThePlatform

    View Slide

  76. ! Let's start!
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  77. !
    What about
    Stencil
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  78. ! 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 | #ReactAlicante #webComponents #useThePlatform

    View Slide

  79. My first Stencil Component
    import { Component, Prop } from '@stencil/core';
    @Component({
    tag: 'my-first-component',
    styleUrl: 'my-first-component.scss',
    })
    export class MyComponent {
    // Indicate that name should be a public property on the component
    @Prop()
    name: string;
    render() {
    return My name is {this.name} ;
    }
    }
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  80. !
    I love React though!
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  81. ! I love React though!
    class XSearch extends HTMLElement {
    connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    const name = this.getAttribute('name');
    const url = 'https: // www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render({name} , mountPoint);
    }
    }
    customElements.define('x-search', XSearch);
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  82. !
    Let's use a web component!
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  86. Pick Your Favorite... !
    and
    Let Others Pick Theirs! !
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  88. webcomponents.org
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  89. custom-elements-everywhere.com
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

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

    View Slide

  91. Resources
    • ! d-k.im/webcomp-stencil
    • " d-k.im/webcomp-reactalicante
    • #$ github.com/dkundel/emoji-rating
    • webcomponents.org
    • ✅ custom-elements-everywhere.com
    • & github.com/shprink/web-components-todo
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  92. ! Let me know what you think!
    ! vote-react.dkundel.com
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  93. Thank You!
    ! Dominik Kundel
    " vote-react.dkundel.com
    # d-k.im/webcomp-reactalicante
    $ @dkundel
    % [email protected]
    & github/dkundel
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide

  94. ! d-k.im/vote-react-backup
    Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

    View Slide