A simple compiler for fast,
reactive Web Components
stenciljs.com
Outline
- Introduction to Web Components
- Introduction to Stencil
- Stencil API
- Demo time
- Where to go next
Web Components
- Natively-supported, standardized JavaScript components
- Run in every framework or on their own
- Answer to the shared-component problem
- Powered by the Custom Element spec
- Native browser support: Chrome, Safari, good polyfills
Custom Element Example
<my-component size="large" theme="light"/></my-component>
Custom Element Example
class MyComponent extends HTMLElement {
constructor() {
// Standard DOM/fetch/etc. code...
}
connectedCallback() {}
disconnectedCallback() {}
attributeChangedCallback() {}
}
window.customElements.define('my-component', MyComponent);
Can we make it easier to build Custom Elements?
- Still want framework features
- Desire to manage bundles of components
- Many teams are choosing TypeScript
Stencil: A Compiler for Web Components
What is Stencil?
- A compiler that generates Custom Elements, part of the Web Components spec
- Not a framework: output is 100% standards-compliant Custom Elements
- Adds powerful framework features to Web Components
- Created and used heavily by the Ionic Framework team. Ionic 4+ is built on it!
Why Stencil?
- Performance: Traditional frameworks proving too heavy for demanding mobile Progressive Web Applications
- Stability: Desire to use web standards and avoid constant framework churn
- Interoperability: Ability to create components that work across all major frameworks.
- Familiarity: features from frameworks but in a leaner, standards-compliant package
Example Stencil Component
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>
);
}
}
Stencil-compiled Components have
- Virtual DOM: fast DOM updates without common DOM performance pitfalls
- Lazy Loading: By default components load asyncronously and can be bundled with related components
- Reactivity: Efficient updates based on property and state changes
Stencil-compiled Components have (cont.)
- High-performance Rendering: async rendering system, similar to React Fiber
- JSX: Popular and familiar markup system pioneered by React
- Server Side Rendering: Hydrate pre-compiled components on the server without a headless browser
Stencil API
- @Component(): set tag name and associated stylesheet (Sass or plain CSS)
- @Prop(): Create a property on the component
- @State(): local state that should be watched during change detection
- @Event(): Trigger events on a component
- @Listen(): listen for events fired from children
- @Element(): grab the DOM element for this component
Demo time
May the demo gods be with us
How is Stencil different from X?
- Angular/React/Vue/etc.: Stencil builds standards-based web components that run natively in the browser.
- Polymer: Stencil works primarily at build rather than runtime. Outputs vanilla web components. Opinionated around JSX, Virtual DOM, and other framework features.
- Vanilla Web Components: Stencil provides complicated framework features as if you wrote them yourself in vanilla Web Components.
Getting Started
git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
npm install
npm start