Stencil is basically a compiler for web components and is the toolchain that Ionic is going to use to create it's next version of re-useable cross-platform components.
Based on some ideas from Svelte, Stencil is not a framework, but a compiler taking in TSX files (which is basically JSX with TypeScript) and producing standard web components, usable with any framework like Angular, React, VueJS…
YOUTUBE UfD-k7aHkQE Developers and businesses are struggling to build fast mobile web apps to reach the next billion users. This talk explores the challenges faced and lessons learned as the Ionic Framework team ported over their collection of mobile-first UI components from a traditional frontend framework to standard Web Components, all in pursuit of faster, more accessible mobile web apps. Co-founders of Ionic Max Lynch and Adam Bradley unveil a new OSS project they created in the process that will help other teams get the most out of Web Components.
Here is what a Stencil component looks like:
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() firstName: string; render() { return ( <p> My name is {this.firstName} </p> ); } }
# Does it work everywhere?
The tool is shiny new and seems far from a stable release (v0.0.2 at this time), but the next major version of Ionic (v4.0) is planned to use it, so it may be production-ready soon enough.
As for the browser compatibility, it uses the standard technologies behind the name web components (HTML Templates, Custom Elements and Shadow DOM, HTML imports are not used). Based on this, we can expect it to work only on Chrome (along with other Chrome-based browsers) and Safari without using polyfills: