A few days ago, the team behind Ionic framework unveiled a new tech during the Polymer Summit 2017 conference: Stencil.js, a tool to produce web components based on standard APIs.
You can see the full length video of the presentation here (27min).
The what
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…
Here is what a Stencil component looks like:
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:
The Stencil website indicates that it includes polyfills dynamically when needed, making it work on all major web browsers and IE11.
No framework, really?
Yes, the Stencil compiler produces vanilla JavaScript, without any dependencies.
Still, the produced code includes these features (as said in the project description):
- A tiny virtual DOM layer
- Efficient one-way data binding
- An asynchronous rendering pipeline (similar to React Fiber)
- Lazy-loading
The code of these features that is usually built-in as part of modern frontend frameworks, is generated by the Stencil compiler instead (yes the difference is… thin).
So can we throw Angular, React, VueJS…?
Not yet, and far from it! 😄
Even if it’s possible to make complete apps and websites with Stencil (the stenciljs.com website is an example), it’s not its primary goal: the idea is to create collections of components that can be used independently from a framework.
The first major “client” is the Ionic framework itself, with the next major version being announced as compatible with Angular, React, VueJS, Riot and others… and even maybe Angular 1.x!
It’s also very interesting for enterprise in-house components, so they can be developed and shared among many apps regardless of their framework stack. It may also lessen the pain of upgrade/migrations between different framework/versions (who said Angular 1.x to 2 migration?).
In brief: it’s really promising! 😃
