Stencil Tutorials

Stencil is the tool that Ionic uses to build its own web components – absolutely no knowledge of Stencil is required in order to use Ionic, but you can use Stencil to build your own web components if you like.

Stencil is not a framework like Angular or Vue, it is a “web component compiler”. The main difference here is that the end result of building with Stencil is just vanilla web components, there is no “Stencil code” in the end result (unlike frameworks which are shipped along with the application to make it work). A web component is basically a custom HTML element that includes a chunk of functionality that will run in a browser. For example, you could create a web component that looks like this:

<my-countdown></my-countdown>

This element does not exist in HTML, but you can create it and include it in your project by creating your own web component. What the component does will, of course, depend on how you build it behind the scenes, but in the case of <my-countdown> we would probably want that to be some kind of countdown timer that we can easily just drop anywhere in our pages.

This is no different to how Ionic creates all of their custom web components like:

<ion-list></ion-list>

and

<ion-card></ion-card>

Stencil just makes it easier to create these web components and makes sure that they are able to run in browsers that do not currently support web components by default.

I said that Stencil is not a framework like Angular and Vue, however, Ionic has also created projects like the Ionic PWA Toolkit which will allow you to more easily build entire Ionic applications using Stencil. The tooling set up by default in these projects will perform a lot of the roles that a typical framework like Angular or Vue would, without actually having to include a framework. The toolkit provides you with a structure to build an entire application from web components, rather than just a single web component for use somewhere.

Since Stencil is just a compiler, when you build the application you will just be left with vanilla web code – no framework will need to be shipped with your application. This can be a huge benefit, especially for applications that want to push the limits of performance. However, it is a little more advanced and perhaps not as beginner friendly as something like Ionic/Angular.

I’ve highlighted some good tutorials for getting started with Stencil below. You can view all of the Stencil tutorials on the website here.

Introduction

Building a PWA with Stencil (Tutorial Series)

Creating Web Components

What to watch next...