Stencil is a compiler for web components that builds optimized custom elements using TypeScript and JSX. It is inspired by Angular, React, Vue, and other frameworks. Stencil focuses on fast startup times and small file sizes for progressive web apps. Sample apps show it has significantly faster startup and smaller bundles compared to other frameworks. Components are lazily loaded by default without needing Webpack.

2. What "is" Stencil
• A compiler for web components
• Based on TypeScript, uses JSX
• Builds optimized Custom Elements
• Virtual DOM, Server Side, Pre-compilation, Async Rendering, One-way data-
binding, JSX
• Inspired by the best parts of Angular, React, Vue, Preact, Polymer, etc.
• Driven entirely to take full advantage of the browser.

4. Built for PWAs
• Blazin' fast startup
• Focused on first-paint and Time-To-Interactive (TTI)
• Tiny file sizes (faster startup)
• Instead of sending runtime code to client, let the browser do the work
• Animations and gestures not required for first paint
• (What's good for PWAs, is just as good for Cordova apps, too)

5. Encouraging results (sample app data)
• 3G TTI: 4x faster (2.78s vs 11s, moto g)
• LTE TTI: 6.2x faster (0.8s vs 5s, Galaxy S7)
• Bundle size: 10x smaller (gzipped/minified)
• Bundle for first view: 10x smaller (39KB vs 422KB)
• Build time (full prod): ~13x faster (3.87s vs 50s)

6. Lazy Loading (without Webpack)
• All components are lazy loaded by default
• Webpack overhead is not needed
• Does not use HTML imports
• Stencil registers known components tags, and no more
• The browser decides exactly which components it needs
• User download core component code for only what they need
• Filenames are hashed by default to enable 'forever' caching

7. import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-first-component',
styleUrl: 'my-first-component.scss'
})
export class MyComponent {
// Indicate that name should be a public property on the component
@Prop() name: string;
render() {
return (
<p>
My name is {this.name}
</p>
);
}
}

8. Don't take my word for it…
• Stencil Starter:
• https://github.com/ionic-team/stencil-starter
• HackerNews App:
• https://corehacker-10883.firebaseapp.com/
• Async Queue Performance Demo:
• https://stencil-fiber-demo.firebaseapp.com/
• https://github.com/ionic-team/stencil-fiber-demo