Ionic 4 which, at the time of writing, is still under development will make use of components generated exclusively by Stencil (no small task given the user base for Ionic - definitely a testament to the team's faith in their compiler).

The benefits to developers include generating custom components, a speed boost in terms of rendering/execution times as well as offering the opportunity for alternative frameworks to be used in place of Angular (that's going to be a huge sell for interoperability within development teams).

Stencil provides these improvements to Web Component generation through use of the following features:

Async rendering - Allows parts of a component state to be rendered asynchronously (which )

Reactive data-binding - Implements data-binding through binding state variables to onChange events allowing those states to be changed as the input values change

TypeScript - A superset of JavaScript providing class based programming features and strong data typing

Virtual DOM - A tree of custom objects representing a part of the DOM allowing that to be acted upon quicker than directly manipulating the DOM itself

That's a pretty impressive feature set isn't it?

One question though: how well supported is the Web Component standard? Or, to put it another way, can we use this now?

Caveats

As with any new technology browser support is always a consideration for developers looking to implement certain tools in their projects.

Fortunately Web Components, as of the v1 specification, are supported natively in Google Chrome and Safari (with support soon to arrive in both Firefox and Edge). Stencil provides a custom elements polyfill that is dynamically loaded on older browsers where that support is needed.

Overall then browser support for Stencil is (as of September 2017):

Current support

Browser

Status

Edge

with polyfill

Firefox

with polyfill

Chrome

Native support

IE11+

with polyfill

Safari

Native support

What we'll be building

With any language/technology words are only as good as the practice that goes into using them which is why, over the course of this tutorial, we'll spend time familiarising ourselves with Stencil's unique blend of syntax to create the following simple dropdown component:

Once opened the dropdown component will then display information like so:

Nothing terribly fancy or complicated but it will provide a nice introduction to working with Stencil.

The component is more of an accordion than an actual dropdown but as there's only one segment to the component that can be opened/hidden I've stuck to calling this a dropdown instead (the joy of semantics - feel free to term this whatever you feel works best).

Along the way we'll explore the different types of syntax used within a Stencil component including:

Decorators

Events

JSX for template rendering

Most of which, if you've been using Ionic/Angular over the last year, will, unsurprisingly, be quite familiar (and this is, of course, a good thing as it will help get developers up to speed by lowering the barrier to entry when working with a new tool).

Okay, so we've had a brief look at what Stencil is (we'll cover the syntax and features in more depth over the remainder of this tutorial) and we know what we'll be developing.

Ready to begin?

Off we go!

The anatomy of a Stencil component

A basic Stencil component is created by adding a new file with a .tsx extension into a sub-directory named after the component which is located within a src/components directory, for example:

When the application is built for production (we'll cover this process in the next section) the component files are transpiled into JavaScript and published to the www directory (similar to how Ionic publishes production ready code).

Let's go over the format and syntax for the component.tsx file (most of which will be familiar to Ionic/Angular developers).

Stencil components can then be run inside the browser (using a live-reload server - which means any development changes that are made will be automatically reflected in real-time) with the following command:

npm start

Once development has been completed a production build can be run (which will generate a minified distribution of all the Stencil components that you've created for that project) using the following command:

npm run build

Creating a dropdown component

Within the my-app/src/components directory create a new directory named my-dropdown.

Inside of the my-dropdown directory add the following files:

my-dropdown.tsx

my-dropdown.scss

These are going to be the source files that contain all of the component logic, templating and styling.

Within the my-dropdown.tsx file enter the following code (this is fully commented to explain what is happening at each key stage of the code - along with some examples of managing state and event changes borrowed from Cory Rylan's excellent Stencil tutorial):

With development now completed we can test/view the component in the browser (if you haven't already being doing so) with the following command:

npm start

Which, if no errors have been thrown up by the compiler, should give us output akin to the following (with the component activated):

Pretty cool huh?

That's your first Stencil component generated and gives you an introduction to how this compiler can be used to create 'framework-less' Web Components.

In summary

As you have learnt developing components with Stencil is quite quick and easy to accomplish. The online documentation is fairly solid (although a few more diverse examples of different features and their implementation wouldn't go unappreciated) and the forthcoming release of Ionic 4 with components generated purely with Stencil makes working with the component compiler a solid investment moving forwards.

My aim with this article was to introduce you to Stencil and how that can be used to generate/compile Web Components using a best-of-breed approach to front-end development.

When Ionic 4 is released I'll publish further articles detailing Stencil component generation and how to implement those within your own Ionic projects but until then I hope you enjoyed this tutorial and please feel free to leave feedback in the comments section below.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...