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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

! The dream Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Hi! I'm Dominik Kundel! Developer Evangelist at ! dkundel.com " @dkundel # dkundel@twilio.com $ github/dkundel Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

! Diﬀerent approaches Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Approach 1: "Bootstrap" approach Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Approach 2: JavaScript API

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Approach 3: "Share button" style

(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')); Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 25

Slide 25 text

Approach 3: "Share button" style

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

! 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 reﬂected back into attributes but doesn't have to • Supports complex data (arrays, objects, etc.) Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 42

Slide 42 text

! 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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

! HTML Templates /* ... */

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

! 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

Slide 47

Slide 47 text

! Shadow DOM

I appear in the slot

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

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

✅ Support is there* * with Polyﬁlls Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

! Example 2: web-share-wrapper Share on Twitter Dominik Kundel | @dkundel | #ReactAlicante #webComponents #useThePlatform

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

! Extensible Web Manifesto • The standards process should focus on adding new low-level capabilities to the web platform that are secure and eﬃcient. • 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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

⚒ 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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

! 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

Slide 79

Slide 79 text

My ﬁrst 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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

! 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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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