This was presented at GUG Prague js dev meetup www.gug.cz/cs/akce/reactive-type-safe-webcomponents/terminy/1 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

1. Reactive
Type-safe
WebComponents
with @skate_js
Martin Hochel
@martin_hotell

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

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

17. So can I write whole apps with
vanilla WebComponents ?

18. You can! but It will/may hurt

19. WHAT
is a WebComponent

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>

22. Custom
Elements
Shadow
DOM
JS
Modules
WebComponents
Templates

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

55. <script type="module">
import './src/app.js'
</script>
<my-app></my-app>
JS
Modules

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

62. WC App
architecture

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

69. HOW
frameworks/libraries Interop with
WebComponents

70. 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}
/>

71. https://custom-elements-everywhere.com

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

76. From Imperative
to Declarative
rendering

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

102. <sk-app>
github.com/Hotell/reactive-typesafe-webcomponents

103. Vanilla
vs
Skate
Vanilla With skateJS

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 !

108. Keep in touch
github.com/skatejs/skatejs
@skate_js
@treshugart
@martin_hotell

109. What did
we learn ?

110. Are WebCompoents
The Future of web ?

111. The Future is now

112. KEEP CALM
and
USE
WEBCOMPONENTS

113. Thank you ! Martin Hochel
@martin_hotell