Since Stencil One’s release just last week, developers can use the compiler to generate standards-compliant Web Components, while also delivering concepts from popular frameworks into a build-time tool.
According to Ionic, the creator of Stencil, stencil takes features such as async rendering, reactive data-binding, Typescript and JSX and generates web components with all the features included.
“Compared to using Custom Elements directly, Stencil provides extra APIs that makes writing fast components simpler,” Adam Bradley, co-creator and lead developer of Ionic Framework and Stencil, wrote in a post.” APIs like JSX and async rendering make fast, powerful components easy to create, while still maintaining compatibility.”
This solves the problem in which Ionic components were only compatible with Angular. Because Stencil standards-compliant web components, it can now be used with frameworks such as React, Vue and Angular.
“Web Components allow Ionic to use web-standard APIs already built into all modern web browsers, rather than framework-specific APIs that are version-restricted and may change over time,” Bradley wrote.” Essentially, this enables Ionic components to be created and connected to the DOM, no different than any other element.
In addition, the bundle sizes for Stencil apps were incredibly small, according to the company. For example, the TodoMVC Gzipped bundle size amounts to 2.0KB, with Svelte second in line at 3.6KB and a much larger 39.1KB for React. This is because Stencil is able to statically analyze the source of every component, allowing it to apply heavy optimizations and include only what the components require, Bradley explained
