Stencil, an open source compiler for building web components and progressive web apps (PWAs), is due to move to a beta release in May, with a Version 1.0 production release expected in midsummer.
Developed by tools builder Ionic, Stencil enables development of reusable web components that work across frameworks. It combines concepts of popular frameworks into a compile-time rather than runtime tool. Web components are generated that run in any browser supporting the Custom Elements specification. These components can run in frameworks such as Angular and React or without a framework. The components are plain HTML elements. Also, Stencil can be used as a drop-in replacement for traditional front-end frameworks. Additionally, Stencil can generate components with polyfills available for browsers that need them.
Stencil is meant to meet performance standards being set for PWAs, by sending less code to the browser, said Ionic CEO Max Lynch, a contributor to Stencil. Web components support this goal by offloading component code to the browser and prerendering pages.
The upcoming beta is meant to be more stable and faster than the alpha release currently available. Stencil will support:
- TypeScript, with components serving as plain TypeScript/ECMAScript 6 classes with decorator metadata.
- JSX rendering capabilities.
- A virtual DOM rendering system inside of Stencil components.
- One-way data-binding.
- An asynchronous pipeline similar to React Fiber.
- Lazy-loading, for grouping related components.
- Syntax from Angular and React.
Although Stencil was built for the Ionic Framework, to generate the mobile development platform’s UI components, Stencil does not require Ionic to work.
Where to download Stencil
You can download Stencil from Github. Instructions for getting started with Stencil are available on the project website.