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 {
	createdCallback() {
		// Standard DOM/fetch/etc. code...
	}
	attachedCallback() {}
	detachedCallback() {}
	attributeChangedCallback() {}
}

document.registerElement('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
					

Where to go next?

Watch the Announcement

Community Resources

Thanks!