A few months ago, a new tech “Stencil.js” was unveiled during the Polymer Summit 2017 conference. The tool was meant to produce web components based on standard APIs. For those who have no idea regarding the term, Stencils can be considered as a library that makes it easy to build fast, small 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>
);
}
}
Technically speaking, with the help of Typescript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, it generates 100% standards-based web components that could run in any browser. Besides, it even supports the Custom Elements v1 spec.
It is a safe bet to consider stencil components, simple web components which can either work in any major framework or with no framework. In most of the cases, Stencils can be used as a drop-in replacement for traditional frontend frameworks such as Ionic, jQuery, AngularJS, ReactJS, etc.
Apart from web components, it also enables a number of key components in particular Server-Side Rendering (SSR) which means without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
Its Benefits
The new approach of building fast and feature-rich apps in the browser offers an array of benefits and advantages such as Custom Elements v1, enabling developers to ship far less code and build faster apps that are compatible with any and all frameworks. Now there are several organizations and library authors struggling around to build reusable components across a diverse spectrum of front-end frameworks, Stencil.JS is the perfect solution to consider. In addition to this, stencil components being plain HTML elements have the potential to work in Angular, React, Ember, Vue, and jQuery or no frameworks at all.
Instead of using Custom Elements on the direct basis, stencil components featuring Virtual DOM rendering system, JSX rendering capabilities, asynchronous rendering pipeline can be used more efficiently. Think of Stencil as creating pre-baked Custom Elements as if you wrote in those features yourself.
How Will It Impact Ionic?
The introduction of new approach has become pretty much exciting for numerous Ionic app development companies across the globe. Other than performance enhancement, Ionic components can be used apart from Angular. However, the announcement has also led to some kind of confusion among those of us developing Ionic applications. Most of us are unable to figure out what it actually means. In case, if you are concerned, you don’t need to be worried much as the changes are all “behind the scenes” and it will have next to no impact on what you need to do especially while building apps with Ionic.
Ionic can be seen everywhere these days. And Stencil.JS comprises of web components that will work anywhere. Ionic-angular v4 will be much smaller than the current release because all the current components are drastically smaller with web components. This means faster load times, which a lot of the community has been asking for.
So can we throw Angular, React, VueJS…?
Well, not yet! Even it’s quite possible to make complete apps and websites with Stencil and you don’t require to have custom adaptations for any framework, it is advisable to be a master of all. However, 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!
This proves to be quite an interesting point for several, enterprise in-house components so that they can be developed and shared among many apps regardless of their framework stack. In addition to this, it may even lessen the pain of upgrade/migrations between different framework/versions.
Getting Started
In order to start a new project using Stencil, one requires to clone the starter project and get started:
git clone https://github.com/ionic-team/stencil-starter.git my-app
cd my-app
git remote rm origin
npm install
Then, just run
npm start
Next step is to create components, Stencil components are plain ES6/TypeScript classes with some decorator metadata. Here one requires to create new components by creating files with a .tsx extension, such as my-component.tsx, and place them in src/components.
import { Component, Prop, State } from ‘@stencil/core’;
@Component({
tag: ‘my-component’,
styleUrl: ‘my-component.scss’
})
export class MyComponent {
// Indicate that name should be a property on our new component
@Prop() first: string;
@Prop() last: string;
@State() isVisible: boolean = true;
render() {
return (
<p>
Hello, my name is {this.first} {this.last}
</p>
);
}
}
Make sure that the .tsx extension is required, as this is the standard for TypeScript classes that use JSX.
To use this component, just use it like any other HTML tag:
<my-component first=”Stencil” last=”JS”></my-component>
Now while creating new component tags, I personally recommend not using Stencil in the component name as the generated component has little or nothing to do with Stencil, a web component. Rather make use of a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.
In a nutshell
The stencil is pretty much an exciting concept but if you are among those who are interested in web components then you can go as normal without even having to know that Stencil exists. Yes, all you need to do is just enjoy the performance improvements it will bring to Ionic.
About Author:
Nishal Bhalala has an expertise in digital marketing and local SEO. He has been working in the reputed Mobile App Development Company which offers Ionic App Development, React Native App Development and serving a large clientele worldwide. He is also quite active on social media and likes to explore with new friends in his quest to know the evolving world and trends of search engine optimization. Get Professional SEO Services to boost your eCommerce sales.
