stencil the time for vanilla web components has arrived
TRANSCRIPT
![Page 1: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/1.jpg)
Stencil: The Time for Vanilla Web Components has Arrived
Gil Fink
sparXys CEO
@gilfink / www.gilfink.net
![Page 2: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/2.jpg)
Typical Application Web Page Design
![Page 3: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/3.jpg)
From Design to Implementation
Session List
Session details
Speaker details
Session filters
Component
Child component
Child component
Child component
<session-list />
<session-details />
<speaker-details />
<session-filters />
![Page 4: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/4.jpg)
How would you build that page?
![Page 5: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/5.jpg)
Do we really need all these frameworks/libraries?
![Page 6: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/6.jpg)
What if we could teach the browser new elements?
![Page 7: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/7.jpg)
Each Element Instance
• Will be a DOM element
• Creates its own DOM tree
• Can be accessed and manipulated using DOM functions or its own API
• Is a JavaScript object
• Is this possible?
![Page 8: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/8.jpg)
This is where our journey begins
![Page 9: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/9.jpg)
About Me
• sparXys CEO and senior consultant
• Microsoft MVP in the last 8 years
• Pro Single Page Application Development (Apress) co-author
• 4 Microsoft Official Courses (MOCs) co-author
• GDG Rishon and AngularUP co-organizer
![Page 10: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/10.jpg)
Agenda
• The Problems We Faced
• Web Components APIs
• Stencil
![Page 11: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/11.jpg)
Undescriptive Markup
Markup Example
![Page 12: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/12.jpg)
Poor Separation of Concerns
You want HTML, CSS andJavaScript to work together
You end up with a mess
The wiring gets in your way!
![Page 13: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/13.jpg)
Bundling is Hard
• You want to bundle a complex component
The component includes HTML, CSS and JavaScript
how would you do that?• Use a server side mechanism?
• Bundler? (Webpack/Browserify)
![Page 14: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/14.jpg)
Web Components Standard to The Rescue
• Natively-supported, standardized JavaScript components
• Some general goals:
Code Reuse EncapsulationSeparation of
ConcernsComposition Theming Expressive Semantic
![Page 15: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/15.jpg)
The Web Components Standard
• Reusable DOM fragmentsTemplates
• Load HTML declarativelyImports
• DOM encapsulationShadow DOM
• Create your own elementsCustom
Elements
![Page 16: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/16.jpg)
Custom Elements
• Enable to extend or create custom HTML elements
• Defined using the customElements.define function:
or extend an existing element:
var myInput = window.customElements.define(‘my-input’, class x extends HTMLElement {…});
var myInput = window.customElements.define(‘my-input’, class y extends HTMLInputElement {...});
![Page 17: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/17.jpg)
Custom Elements – Usage
• Use the element in your DOM:
or use the createElement function:
<my-input></my-input>
var elm = document.createElement(‘my-input’);
![Page 18: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/18.jpg)
Custom Element Life Cycle Events
• connectedCallback
• disconnectedCallback
• attributeChangedCallback
class MyInput extends HTMLElement {constructor() {
super(); // your initialization code goes here
}connectedCallback() {…}disconnectedCallback() {…}attributeChangedCallback() {…}
}
![Page 19: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/19.jpg)
DemoCustom Elements
![Page 20: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/20.jpg)
A Problem with Web Development Today
• Catholic wedding with frameworks/libraries
• Infrastructure is based on a framework/library
• Infrastructure isn’t reusable if other companyprojects use another framework/library
![Page 21: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/21.jpg)
Problem with Web Development Today –Cont.
• Custom Elements can remove the barrier of framework/library coupling
• Can be used by any framework/library
• Encapsulate their functionality and style
• Suitable for component infrastructure development
![Page 22: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/22.jpg)
But there are problems with custom elements
![Page 23: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/23.jpg)
Problems with Custom Elements
• We are used to runtime framework/library goodies such as:• Virtual DOM
• Data binding
• Performance
• Server side rendering
• And etc.
![Page 24: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/24.jpg)
Problems with Custom Elements – Cont.
• Verbose syntax• Too much boilerplate
• We need to craft everything by ourselves
![Page 25: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/25.jpg)
Problems with Custom Elements – Cont.
• Still W3C working draft
• Need Polyfills in some browsers
![Page 26: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/26.jpg)
Is there a better way?
![Page 27: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/27.jpg)
What if I told you that you can solve all the previous problems?
![Page 28: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/28.jpg)
![Page 29: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/29.jpg)
What is Stencil?
• A compiler that generates Custom Elements
• Not a framework/library• Output is 100% standards-compliant web components
• Adds powerful framework features to Web Components• Virtual DOM• Reactivity• JSX• TypeScript• And etc.
• Created and used by Ionic Framework
![Page 30: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/30.jpg)
Stencil Component Example
import { Component, Prop } from '@stencil/core';@Component({
tag: 'my-name',styleUrl: 'my-name.scss'
})export class MyName {
@Prop() name: string;
render() {return (
<p>Hello, my name is {this.name}
</p>);
}}
![Page 31: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/31.jpg)
From Stencil to Custom Elements
import { Component, Prop } from '@stencil/core';
@Component({
…
})
export class CollapsiblePanel {
…
}
Stencil Code JavaScript CodeStencil Compiler
var CollapsiblePanel = (function () {
function CollapsiblePanel() {}
… // implementation
return CollapsiblePanel;}());
Stencil Compiler
![Page 32: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/32.jpg)
![Page 33: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/33.jpg)
Getting Started with Stencil
git clone https://github.com/ionic-team/stencil-component-starter.git my-componentcd my-componentgit remote rm origin
npm installnpm start
![Page 34: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/34.jpg)
DemoHello Stencil
![Page 35: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/35.jpg)
Stencil Generated Component Advantages
• Virtual DOM • fast DOM updates without common DOM performance pitfalls
• Lazy Loading• By default components load asynchronously and can be bundled with related
components
• Reactivity• Efficient updates based on property and state changes
• High-performance Rendering • async rendering system, similar to React Fiber
![Page 36: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/36.jpg)
Stencil API
• Based on JavaScript decorators
• Written with TypeScript
• You can use the following decorators:• @Component()
• @Prop()
• @State()
• @Event()
• @Listen()
• @Element()
• @Method()
![Page 37: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/37.jpg)
@Component Decorator
• The main Stencil decorator
• Configures the entire component including• Tag
• Style
• Shadow DOM
• Host
• Assets
import { Component } from '@stencil/core';@Component({
tag: ‘st-comp',styleUrl: ‘comp.scss',shadow: true
})export class Comp {
...}
![Page 38: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/38.jpg)
@Prop and @State Decorators
• The Prop decorator is used to indicate that a member is exposed as component attribute
• The State decorator is used to indicate that a member is part of the component state
• Reactivity
import {Component, Prop, State} from '@stencil/core';@Component({
tag: 'collapsible-panel',styleUrl: 'collapsible-panel.css'
})export class CollapsiblePanel {
@Prop() title: string;@State() collapsed: boolean;...
}
![Page 39: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/39.jpg)
@Event and @Listen Decorators
• The Event decorator enables you to expose an EventEmitter
• The Listen decorator enables you to listen to custom eventsimport { Event, Listen, EventEmitter } from '@stencil/core';@Component({
...})export class Toaster {
@Event() toasterFadeOut: EventEmitter;toasterFadeOutHandler() {
this.toasterFadeOut.emit();}
}export class ToasterApp {
@Listen('toasterFadeOut')toasterFadeOutHandler(event: CustomEvent) {}
}
![Page 40: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/40.jpg)
@Element Decorator
• The Element decorator enables you to get a reference to the component’s host element
import { Component, Element } from '@stencil/core';@Component({
...})export class Toaster {
@Element() toasterDiv: HTMLElement;
showToast() {this.toasterDiv.style.display = 'block';
};}
![Page 41: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/41.jpg)
@Method Decorator
• The Method decorator is used to expose component API
import { Component, Element, Method } from '@stencil/core';@Component({
...})export class Toaster {
@Element() toasterDiv: HTMLElement;
@Method()showToast() {
this.toasterDiv.style.display = 'block';};
}
![Page 42: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/42.jpg)
DemoCreating a Stencil Component
![Page 43: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/43.jpg)
Deploying a Stencil Component
• Update the stencil.config.js file, if needed• stencil.config.js in Stencil starter already has these things configured
exports.config = {namespace: 'myname',generateDistribution: true,generateWWW: false,...
};
![Page 44: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/44.jpg)
Deploying a Stencil Component – Cont.
• Update the package.json file, if needed
{"main": "dist/collection/index.js","types": "dist/collection/index.d.ts","collection": "dist/collection/collection-manifest.json","files": [
"dist/"],"browser": "dist/myname.js",...
}
![Page 45: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/45.jpg)
How Stencil Solves the Frameworks Problem?
• Stencil works primarily in the build time
• Any framework/library (such as React or Angular) can consume the generated component• As a script tag
• As a node module
• Using the stencil-starter-app
• Stencil is suitable for infrastructure components
![Page 46: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/46.jpg)
DemoConsuming a Stencil component from Angular
![Page 47: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/47.jpg)
A Word About Micro Frontends
Shared Components and BehaviorsGenerate
Micro-app 1 Micro-app 2 Micro-app 3
![Page 48: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/48.jpg)
Summary
• Web Component standard is very powerful• But… still in development
• Stencil compiler can ease the pain of creating custom elements• Includes a lot of advantages such as JSX, TypeScript and more
• Generates standard-compliant web components
![Page 49: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/49.jpg)
Resources
• Stencil website: https://stenciljs.com/
• Custom Elements: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements
• My Website – http://www.gilfink.net
• Follow me on Twitter – @gilfink
![Page 50: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/50.jpg)
#UseThePlatform
![Page 51: Stencil the time for vanilla web components has arrived](https://reader031.vdocument.in/reader031/viewer/2022030318/5a6d425a7f8b9ad6418b5141/html5/thumbnails/51.jpg)
Thank You!