Reactive Type safe Webcomponents with skateJS

You know the drill right? new cool framework/library appears... boom! new Datepicker in that framework follows and soon enough whole UI libraries, again and again....

It's 2017 and it's time to stop this madness once and for all! How you ask?

In this talk I will do an overview of component creation in terms of re-usability followed up with real life examples how to create performant, reactive, small and type-safe web components with tiny superpowered library called SkateJS.

Write once, use everywhere by using the platform.

Source code: https://github.com/Hotell/reactive-typesafe-webcomponents
SkateJS: https://github.com/skatejs/skatejs

Transcript

1. Reactive Type-safe WebComponents
2. Martin Hochel SE, Prague / Czech Republic @martin_hotell github.com/Hotell Hello Warsaw ! ▪ @ngPartyCz meetup founder ▪ Author of ngMetadata ▪ Member of @skate_js ▪ ▪
3. Today’s talk Will be all about Skateboarding
4. This is how you do an Ollie
6. Problem set 1: Create a reusable widget
7. Problem 1 Create reusable widget Library size 10.0 kB 4.0 kB 4.0 kB Implementation size 4.0 kB 4.0 kB
8. Problem 1 Create reusable widget FUTURE JS
9. Problem set I1: Create Interoperable Widget
10. Problem I1 Create Interoperable widget ALPHA BETA GAMMA DELTA Widget
13. WebComponents ?
14. WHY WHAT HOW WebComponents
15. WHY WebComponents
16. WHY WebComponents Reusable Interoperable Problem I + I1 Solved
18. So can I write whole apps with vanilla WebComponents ?
19. You can! but It will/may hurt
20. WHAT is a WebComponent
21. “ Platform new primitive for building Reusable Interoperable Encapsulated Widgets
22. <sk-user name="Martin" age="100"> <img src="./assets/skate-deck.jpg"> </sk-user>
23. Custom Elements Shadow DOM JS Modules WebComponents Templates
24. Custom Elements class User extends HTMLElement {} // user.component.js <sk-user></sk-user> // index.html // Global registry window.customElements.define('sk-user', User) window.customElements.get('sk-user') // User
25. Custom Elements API Attributes / Properties Events Life Cycle hooks
26. // $0 === User instance $0.setAttribute('age','18') $0.age = 18 // Imperative (JS) <sk-user age="100"></sk-user> // Declarative (HTML) Custom Elements API Attributes & Properties Primitive Data
27. export class User extends HTMLElement { static get observedAttributes() { return ['age'] } _age = 0 set age(value) { this._age = Number(value) this.render() } get age() { return this._age } attributeChangedCallback(name, oldValue, newValue) { this.age = newValue } render() {} } // user.component.js Custom Elements API Attributes & Properties Primitive Data
28. export class User extends HTMLElement { static get observedAttributes() { return ['age'] } _age = 0 set age(value) { this._age = Number(value) this.render() } get age() { return this._age } attributeChangedCallback(name, oldValue, newValue) { this.age = newValue } render() {} } // user.component.js $0.age = 18 $0.age Custom Elements API Attributes & Properties Primitive Data
29. export class User extends HTMLElement { static get observedAttributes() { return ['age'] } _age = 0 set age(value) { this._age = Number(value) this.render() } get age() { return this._age } attributeChangedCallback(name, oldValue, newValue) { this.age = newValue } render() {} } // user.component.js $0.setAttribute('age','18') Custom Elements API Attributes & Properties Primitive Data
30. // $0 === User instance $0.tricks = [ { name: 'ollie', difficulty: 'easy' }, { name: 'kickflip', difficulty: 'medium' }, { name: 'hardflip', difficulty: 'hard' }, ] // Imperative (JS) <sk-user hobbies="[{ "name": "ollie", "difficulty ": "easy" }]"></sk-user> // Declarative (HTML) Custom Elements API Attributes & Properties Rich Data
31. export class User extends HTMLElement { _tricks = [] set tricks(value) { this._tricks = value this.render() } get tricks() { return this._tricks } render() {} } // user.component.js Custom Elements API Attributes & Properties Rich Data
32. export class User extends HTMLElement { _tricks = [] set tricks(value) { this._tricks = value this.render() } get tricks() { return this._tricks } render() {} } // user.component.js Custom Elements API Attributes & Properties Rich Data
33. export class User extends HTMLElement { _tricks = [] set tricks(value) { this._tricks = value this.render() } get tricks() { return this._tricks } render() {} } // user.component.js Custom Elements API Attributes & Properties Rich Data
34. // $0 === User instance $0.addEventListener('learntrick',(event)=>{ /* ... */ }) // Imperative (JS) Nope // Declarative (HTML) Custom Elements API Events
35. export class User extends HTMLElement { emitLearnTrick(trick) { const eventConfig = { bubble: true, composed: false, detail: trick } const event = new CustomEvent('learntrick', eventConfig) this.dispatchEvent(event) } } // user.component.js Custom Elements API Events
36. export class User extends HTMLElement { constructor() { super() } attributeChangedCallback(name, oldValue, newValue) { // do some stuff } connectedCallback() { console.log('component mounted!') } disconnectedCallback() { console.log('goodbye!') } render() {} } // user.component.js Custom Elements API Life Cycle Hooks
37. export class User extends HTMLElement { constructor() { super() } attributeChangedCallback(name, oldValue, newValue) { // do some stuff } connectedCallback() { console.log('component mounted!') } disconnectedCallback() { console.log('goodbye!') } render() {} } // user.component.js Custom Elements API Life Cycle Hooks
38. export class User extends HTMLElement { constructor() { super() } attributeChangedCallback(name, oldValue, newValue) { // do some stuff } connectedCallback() { console.log('component mounted!') } disconnectedCallback() { console.log('goodbye!') } render() {} } // user.component.js Custom Elements API Life Cycle Hooks
39. export class User extends HTMLElement { constructor() { super() } attributeChangedCallback(name, oldValue, newValue) { // do some stuff } connectedCallback() { console.log('component mounted!') } disconnectedCallback() { console.log('goodbye!') } render() {} } // user.component.js Custom Elements API Life Cycle Hooks
40. export class User extends HTMLElement { constructor() { super() } attributeChangedCallback(name, oldValue, newValue) { // do some stuff } connectedCallback() { console.log('component mounted!') } disconnectedCallback() { console.log('goodbye!') } render() {} } // user.component.js Custom Elements API Life Cycle Hooks
41. Templates <template> <style> :host { display: flex } ul { margin: 1rem; } </style> <div> <ul> <li>Name: <b id="name"></b></li> <li>Age: <b id="age"></b></li> </ul> <div> <slot></slot> </div> </div> </template> // user.template.html // user.component.js const template = document.querySelector('template') const view = template.content.cloneNode(true)
42. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user>
43. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
44. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
45. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
46. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
47. Shadow DOM <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
48. Shadow DOM <style></style> <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
49. Shadow DOM <style></style> <sk-user name="Martin" age="30"> <img src="./assets/skate-deck.jpg"> </sk-user> <sk-user name="Martin" age="30"> #shadow-root(open) <style></style> <div> <ul> <li>Age</li> </ul> <slot>#refToImg</slot> </div> <img src="./assets/skate-deck.jpg"> </sk-user>
50. Shadow DOM constructor() { super() const shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.appendChild(template.content.cloneNode(true)) }
51. Shadow DOM Isolated sandbox API -> projection -> <slot/> Truly scoped CSS
52. <script type="module"> import './src/app.js' </script> <my-app></my-app> JS Modules
53. WHAT ✅ is a WebComponent
54. Hey! What about browser support?
55. Browser support
56. HOW to build a WebComponent Reactive Type-safe
57. <sk-app>
58. WC App Demo
59. WC App architecture
60. WC App Reactive data-flow sk-app sk-user name: string age: number tricks: Array<Trick> learntrick: CustomEvent<Trick> removetrick: CustomEvent<Trick>
61. export type Trick = { name: string difficulty: 'easy' | 'medium' | 'hard' } sk-user Implementation Types, template type Attrs = 'name' | 'age' type Props = { name: string age: number tricks: Array<Trick> } const template = document.createElement('template') template.innerHTML = ` <style> :host { … } </style> <header> Hello <b id="name"></b>! Let's skate! </header> <div> Only <b id="age"></b> years old? Time to learn new tricks! </div> <form autocomplete="off"> <input name="trickName" value=""> <select id="trickDifficulty" class="form-controll"> </form> ` // user.component.ts
62. export class User extends HTMLElement implements Props { set name(value: string) {} get name() {} set age(value: number) {} get age() {} set tricks(value: Array<Trick>) {} get tricks() { private _tricks: Array<Trick> = [] private view: { form: HTMLFormElement trickList: HTMLUListElement age: HTMLElement name: HTMLElement } } sk-user Implementation Define Properties window.customElements.define('sk-user', User) // user.component.ts
63. export class User extends HTMLElement implements Props { constructor() { super() const shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.appendChild(template.content.cloneNode(true)) this.view = { form: shadowRoot.querySelector('form'), trickList: shadowRoot.querySelector('#trick-list'), age: shadowRoot.querySelector('#age'), name: shadowRoot.querySelector('#name'), } this.view.form.addEventListener( 'submit', this.handleNewTrickAddition ) } } sk-user Implementation construction // user.component.ts
64. export class User extends HTMLElement implements Props { attributeChangedCallback( name: Attrs, oldValue: string | null, newValue: string | null ) { this.render() } connectedCallback() { this.render() } } sk-user Implementation Reactions, Rendering // user.component.ts
66. HOW frameworks/libraries Interop with WebComponents
67. index.html <sk-user name="Martin" age="100" ></sk-user> app.component.html <sk-user [attr.name]="model.name" [attr.age]="model.age" [tricks]="model.tricks" ></sk-user> App.vue <sk-user :name="model.name" :age="model.age" :tricks.prop="model.tricks" ></sk-user> App.tsx <sk-user name={this.state.user.name} age={this.state.user.age} tricks={this.state.user.tricks} />
68. https://custom-elements-everywhere.com
69. “ So what’s the problem with vanilla WebComponents ?
70. Imperative data binding Imperative ShadowDOM Imperative/scattered re-render State mutation Boilerplate bad DX
72. “ Eventually You’ll build some kind of abstraction
73. Skate JS Skate JS
74. Skate JS Skate JS What is
75. skateJS Reactive Pluggable WebComponents Micro-library Stable 4.x Beta 5.x 2200+ ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
76. Reactive ? props View Logic render user action
77. Pluggable ? - mixins - custom renderers - fine grained LC hooks
78. Micro library ?
79. HOW to build a WebComponent with skateJS
80. Core Tricks
81. Default Renderer PREACT
82. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
83. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
84. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
85. import { h } from 'preact' import { props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { static readonly props = { name: props.string, } renderCallback() { const { name } = this.props return <span>Hello, {name}!</span> } } customElements.define('x-hello', Hello) Implement Component
86. import { h } from 'preact' import { props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { static readonly props = { name: props.string, } renderCallback() { const { name } = this.props return <span>Hello, {name}!</span> } } customElements.define('x-hello', Hello) Implement Component
87. import { h } from 'preact' import { props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { static readonly props = { name: props.string, } renderCallback() { const { name } = this.props return <span>Hello, {name}!</span> } } customElements.define('x-hello', Hello) Implement Component
88. import { h } from 'preact' import { props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { static readonly props = { name: props.string, } renderCallback() { const { name } = this.props return <span>Hello, {name}!</span> } } customElements.define('x-hello', Hello) Implement Component
89. import { h } from 'preact' import { props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { static readonly props = { name: props.string, } renderCallback() { const { name } = this.props return <span>Hello, {name}!</span> } } customElements.define('x-hello', Hello) Implement Component
90. import { h, props } from 'skatejs' import { Component } from './base' type Props = { name: string } class Hello extends Component<Props> { } declare global { namespace JSX { interface IntrinsicElements { 'x-hello': Props } } } Implement Component
92. <sk-app> github.com/Hotell/reactive-typesafe-webcomponents
93. Vanilla vs Skate Vanilla With skateJS
94. Advanced Tricks
95. @skatejs ecoystem • ssr • val • bore
96. Skate Roadmap - 5.0 stable - No default renderer in core ( choose what you want ) ✅ - Mixins for everything - ✅ - API for turning off ShadowDOM - ✅ - Server side rendering - ✅ - Testing with Jest - ✅
97. “ Skate 5.0 ?
98. Support us !
99. Keep in touch github.com/skatejs/skatejs @skate_js @treshugart @martin_hotell
100. What did we learn ?
101. WebComponents panel Round table session 15:40 - 16:40
102. Thank you !