How To Build Web Components Using Stencil JS
Stencil was created by the Ionic Framework team to help build faster, more capable components that worked across all major frameworks.
Goals and Features of a stencil
Stencil aims to combine the best concepts of the most popular front-end frameworks into a compile-time tool rather than a run-time tool. It’s important to stress that Stencil’s goal is to not become or be seen as a “framework”, but rather our goal is to provide a great developer experience and tooling expected from a framework
basically, The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library.
Async rendering (inspired by React Fiber)
we can also able to do an asynchronous call before rendering the data implemented in a Class
Reactive data-binding simply means that a flow of changes in your data drives action. Whether the change comes from both the DOM and the data in your application or just one of those, does not really matter.
Live reloading reloads or refreshes the entire app when a file changes.
Wide Browser Support
For the small minority of browsers that do not support modern browser features and APIs, Stencil will automatically polyfill them on-demand.
There are countless optimizations and tweaks developers must do to improve performance of components and websites. With a compiler, Stencil is able to analyze component code as an input, and generate optimized components as an output.
Stencil purposely does not come with a large custom API which needs to be learned and re-learned, but rather heavily relies on, you guessed it, web standards. Again, our goal is to not create yet-another-framework, but rather provide tooling for developers to generate future-friendly components using APIs already baked within the browser. The smaller the API, the easier to learn, and the less that can be broken.
- Crating a simple Stencil component
- Modify this component according to our requirements
Crating a simple Stencil component
Stencil requires a recent LTS version of NodeJS and npm. Make sure you’ve installed and/or updated Node before continuing.
Note that you will need to use npm 6 or higher.
For Creating Project in a stencil, you have to open your system terminal and type
npm init stencil
Stencil can be used to create standalone components or entire apps. After running init you will be provided with a prompt so that you can choose the type of project to start.
In this Blog, we will cover components part of the stencil.
so after clicking on component, it will ask you for the component name
After the name, it will ask for confirmation of the name
when you press ‘Y’ here and press enter key. it will create your component
so once it finishes go to your project folder and run
to spin up the development server and it should automatically open in a new tab in your browser if it doesn’t you can find it on localhost:3333
and you should see ` Hello, World! I’m Stencil ‘Don’t call me a framework’ JS`
Okay so now let’s look into the folder we got from the command to find out what is responsible for this output. so I have opened the project folder with visual studio code, of course, you can use webstorm, atom, sublime whatever you like. Inside of this folder, you can see a couple of folder and file. The files are mostly config file. you won’t see a webpack config file yeah stencil might use webpack behind the scene but it doesn’t expose the configuration to you because of the stencil itself a compiler it false the idea of doing that logic for you.
In stencil, you don’t need to config a webpack to bundle all your files and framework and so on together because again you are not using a framework here.
Now let’s have a look in Source folder in which we write our own component as you might guess in the components folder and there you find one folder named my-component with two files inside of it.
When you check my-component.tsx . This might look bit like angular to you it uses typescript and decorators and then again it’s look bit like React because we have the render method where we return some HTML but that is JSX. and we also have a css file where we can style our own component.
Modify this component according to our requirements
Now we will modify existing my-component.tsx file and makes one component which is responsible for creating custom modal.
So here we have modified our my-component.tsx file for creating custom modal.
In this example, we have used 4 decorators
- Component :- @Component() declares a new web component
Each Stencil Component must be decorated with a
@Component() decorator from the
@stencil/core package. In the simplest case, developers must provide an HTML
tag name for the component. Often times, a
styleUrl is used as well, or even
styleUrls, where multiple different style sheets can be provided for different application modes/themes.
2. Prop :- @Prop() declares an exposed property/attribute
Props are custom attribute/properties exposed publicly on the element that developers can provide values for. Children components should not know about or reference parent components, so Props should be used to pass data down from the parent to the child. Components need to explicitly declare the Props they expect to receive using the
@Prop() decorator. Props can be a
boolean, or even an
Array. By default, when a member decorated with a
@Prop() decorator is set, the component will efficiently re-render.
3. Method :- @Method() declares an exposed public method
@Method() decorator is used to expose methods on the public API. Functions decorated with the
@Method() decorator can be called directly from the element, ie. they are intented to be callable from the outside!
4. State :- @State() declares an internal state of the component
@State() decorator can be used to manage internal data for a component. This means that a user cannot modify this data from outside the component, but the component can modify it however it sees fit. Any changes to a
@State() property will cause the components
render function to be called again.
Here you can modify CSS and tsx according to your requirements.
All the css related to your component should go into your-component.css file and you can write the logic for the code in your-component.tsx file
How to use This Component In Simple Java script project
<script type="module" src="/build/stencilcomponent.esm.js"></script>
<script nomodule src="/build/stencilcomponent.js"></script>
So after Modification in our index file, it will something look like this
In this project, I have some created some more components according to mobile UI you can check the complete source code here for the example
- Ionic 4 PayPal payment integration — for Apps and PWA
- Ionic 4 Stripe payment integration — for Apps and PWA
- Ionic 4 Apple Pay integration
- Twitter login in Ionic 4 with Firebase
- Facebook login in Ionic 4 with Firebase
- Geolocation in Ionic 4
- QR Code and scanners in Ionic 4 and
- Translations in Ionic 4
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App