The Ionic team recently announced a new project called Stencil. The best way to think of Stencil is as “a tool for building modern Web Components”. Stencil has a specific style of syntax you need to use to build components:
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>;
}
}but there is a couple of important points to keep in mind.
- Although it looks similar to the syntax you would currently use to build components in Ionic/Angular, the introduction of Stencil in no way impacts your ability to keep building components in Ionic/Angular as you already are
- The end result of using Stencil is a standard web component, the output is not specific to Stencil
If you do not already know what a web component is, it is more or less the same idea as how an Angular component works, except that it is intended to just work directly with the browser, no additional frameworks required. In Angular, you could create a component that could then be embedded anywhere with:
<my-cool-component></my-cool-component>and you could do the same thing with a standard web component. If you would like to read more about web components, you can check out this post.
The introduction of Stencil is exciting for Ionic developers, because it is going to lead to a performance increase for the Ionic framework, and it will also mean that you can use Ionic components outside of Angular. However, the announcement of Stencil has led to some confusion as to what exactly it will mean for those of us developing Ionic applications. If you’re concerned, you don’t need to be. The changes due to Stencil are all “behind the scenes” and it will have next to no impact on what you need to do to continue building apps with Ionic.
If you would like a little more information about Stencil, I had the chance to ask Ionic’s Justin Willis a few questions to help explain things a little:
1. In a nutshell, what is Stencil?
Stencil is a library that makes it easy to build fast, small web components.
2. What advantages are there to using Web Components?
Some of the biggest advantages are:
- Bundle size: No need to ship a custom component implementation, custom lifecycle events implementation etc. It’s all just built into the browser.
- Re-usablity: Because web components are built into the browser they can be used anywhere, in any framework or with no framework at all.
- Simplicity: No need to learn a certain framework if you don’t want to. If you already know basic JS and the basic DOM API’s, then you can interact with a web component
3. Will Ionic developers need to learn how to use Stencil?
Nope. If you currently have an ionic-angular app, when you update to v4 it will be using the Ionic components that we have ported to web components using Stencil, but you will use them just the same as you always have. You don’t need to know anything about Stencil or web components.
4. What impact will the introduction of Stencil have on future releases of ionic-angular?
#ioniceverywhere. Because our components are now just web components they will work anywhere. This means that you can use our awesome, pre-built, pre-designed components in any framework you want to use, or with no framework at all.
Ionic-angular v4 will be much smaller than the current release because all of our components are drastically smaller with web components. This means faster load times, which a lot of the community has been asking for.
We will be shielded from framework changes. Because all of our components will be completely framework independent, future ionic-angular releases should come faster because we will not have to make changes to our components when Angular makes a change.
5. When could we expect to see adaptations of Ionic for other frameworks (i.e. React and Vue)?
Because we are using web components we do not need to make an ionic-react or ionic-vue. Instead, it will be “you can use ionic components anywhere, including in React, Preact, Vue etc”. With web components, we do not need to have custom adaptations for any framework. We have some demos coming that show this in action.
6. Even though those ionic-react and ionic-vue specific packages are not required, is there plans to develop something similar to the ionic-angular package?
That’s a question that we are still deciding on but the dream is that we won’t have to have an ionic-react, or an ionic-preact or anything. But, from a technical standpoint, especially with React, we have some shims that make React work nicely with web components. React, out of the box, has a lot of edge cases with web components.
Summary
Stencil is an exciting new development but remember: if you aren’t interested in web components then you can just go on as normal without even having to know that Stencil exists, you can just enjoy the performance improvements it will bring to Ionic.