Reactive Type safe Webcomponents with skateJS
2 likes592 views
The document discusses the creation of reactive, type-safe web components using the Skate.js library, focusing on building reusable and interoperable widgets. It explores the concepts of custom elements, shadow DOM, and the custom elements API, illustrating how to implement and manage web components with various JavaScript frameworks. Additionally, it highlights the need for improved developer experiences in working with vanilla web components and presents Skate.js as a solution for more efficient development.
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-26-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-27-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-28-320.jpg)
![// $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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-29-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-30-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-31-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-32-320.jpg)
![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](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-65-320.jpg)
![index.html
<sk-user
name="Martin"
age="100"
tricks=""[{"foo":"bar"}]""
></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}
/>](https://image.slidesharecdn.com/typesafereactivewebcomponents-171024184953/85/Reactive-Type-safe-Webcomponents-with-skateJS-70-320.jpg)
Reactive Type safe Webcomponents with skateJS
- 2. Martin Hochel SE, Prague / Czech Republic @martin_hotell github.com/Hotell Hello Prague ! ▪ @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.7 kB 4.9 kB 3.9 kB Implementation size 4.2 kB 4.12 kB 2.2kB MINIFIED + GZIPPED 32.7kB MINIFIED + GZIPPED
- 9. Problem set I1: Create Interoperable Widget
- 10. Problem I1 Create Interoperable widget ALPHA BETA GAMMA DELTA Widget
- 13. WebComponents ?
- 17. So can I write whole apps with vanilla WebComponents ?
- 18. You can! but It will/may hurt
- 20. “ Platform new primitive for building Reusable Interoperable Encapsulated Widgets
- 21. <sk-user name="Martin" age="100"> <img src="./assets/skate-deck.jpg"> </sk-user>
- 23. 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
- 24. Custom Elements API Attributes / Properties Events Life Cycle hooks
- 25. // $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
- 26. 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
- 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 $0.age = 18 $0.age 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.setAttribute('age','18') Custom Elements API Attributes & Properties Primitive Data
- 29. // $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
- 30. 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
- 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. // $0 === User instance $0.addEventListener('learntrick',(event)=>{ /* ... */ }) // Imperative (JS) Nope // Declarative (HTML) Custom Elements API Events
- 34. 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
- 35. 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
- 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. <template> <template id="view"> <style> :host { display: flex } div { color: blue; } </style> <h2>Hello World!</h2> <p>Yo what’s up dough?</p> <slot></slot> </template> // user.template.html
- 41. <template> <template id="view"> <style> :host { display: flex } div { color: blue; } </style> <h2>Hello World!</h2> <p>Yo what’s up dough?</p> <slot></slot> </template> // user.template.html
- 42. <template> <template id="view"> <style> :host { display: flex } div { color: blue; } </style> <h2>Hello World!</h2> <p>Yo what’s up dough?</p> <slot></slot> </template> // user.template.html
- 43. <template> <template id="view"> <style> :host { display: flex } div { color: blue; } </style> <h2>Hello World!</h2> <p>Yo what’s up dough?</p> <slot></slot> </template> // user.template.html
- 44. <template> export class User extends HTMLElement { constructor() { super() const template = document.querySelector('#view') const view = template.content.cloneNode(true) this.appendChild(view) } } // user.component.html
- 45. Shadow DOM <sk-user name="Martin" age="30"> <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 <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 <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> LIGHT
- 50. 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>
- 51. 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>
- 52. 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>
- 53. Shadow DOM constructor() { super() const shadowRoot = this.attachShadow({ mode: 'open' }) shadowRoot.appendChild(template.content.cloneNode(true)) }
- 54. Shadow DOM Isolated sandbox API -> projection -> <slot/> scoped CSS
- 56. WHAT ✅ is a WebComponent
- 57. Hey! What about browser support?
- 58. Browser support
- 59. HOW to build a WebComponent Reactive Type-safe
- 60. <sk-app>
- 61. WC App Demo
- 63. WC App Reactive data-flow sk-app sk-user name: string age: number tricks: Array<Trick> learntrick: CustomEvent<Trick> removetrick: CustomEvent<Trick>
- 64. 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> <input name="trickName" value=""> <select id="trickDifficulty" class="form-control"> </form> ` // user.component.ts
- 65. 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
- 66. 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
- 67. 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
- 72. “ So what’s the problem with vanilla WebComponents ?
- 73. “ UNFORTUNATELY THE DEVELOPER EXPERIENCE OF BUILDING AN APPLICATION WITH WEB COMPONENTS TODAY IS QUITE PAINFUL SAM SACCONE
- 75. “ Eventually You’ll build some kind of abstraction
- 77. lit-html HTML templates, via JavaScript template literals
- 78. const sayHello = (name: string) => html`<div>Hello ${name}!</div>` lit-html const container = document.querySelector('#container') render(sayHello('Steve'), container) // renders <div>Hello Steve!</div> to container render(sayHello('Kevin'), container); // renders <div>Hello Kevin!</div> to container
- 79. class App extends HTMLElement { connectedCallback() { console.log('App mounted') this.render() } render() { const { tricks, logs } = this const template = html` <ul class="log"> ${logs.map(item => CreateLogEvent(item))} </ul> <sk-user name="Martin" age="30" tricks="${tricks}" on-learnTrick="${this.handleNewTrick}" on-removeTrick="${this.handleRemoveTrick}" ><sk-user> ` render(template, this.shadowRoot) } } lit-html
- 80. Building API via composition & mixins
- 81. export const withShadow = <TBase>(Base: TBase) => class WithShadow extends Base { constructor(...args: Array<any>) { super(...args) this.attachShadow({ mode: 'open' }) } } JS mixins class App extends withShadow(HTMLElement) { } class App extends withRender(withShadow(HTMLElement)) { }
- 82. Good news !
- 83. Skate JSSkate JS
- 84. Skate JSSkate JS What is
- 85. skateJS Reactive Pluggable WebComponents Micro-library Stable 4.x Beta 5.x 2200+ ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
- 86. Reactive ? props View Logic render Action ( click, keypress ) state
- 87. Pluggable ? - mixins - custom renderers - fine grained LC hooks
- 88. Micro library ?
- 89. HOW to build a WebComponent with skateJS
- 90. Core Tricks
- 91. skateJS Renderers - renderer-preact - renderer-react - renderer-lit-html - renderer-vue ( TODO ) - custom
- 92. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
- 93. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
- 94. import { withComponent } from 'skatejs'; import withPreact from '@skatejs/renderer-preact'; export const Component = withComponent(withPreact()) Choose renderer
- 95. 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
- 96. 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
- 97. 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
- 98. 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
- 99. 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
- 100. 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
- 104. Advanced Tricks
- 105. Advanced Tricks - State like React - No default renderer in core ✅ - Mixins for everything - ✅ - API for turning off ShadowDOM - ✅ - Server side rendering - ✅ - Testing with Jest - ✅
- 106. @skatejs ecoystem ● ssr ● val ● bore
- 107. Support us !
- 109. What did we learn ?
- 110. Are WebCompoents The Future of web ?
- 111. The Future is now
- 113. Thank you ! Martin Hochel @martin_hotell