Building a PWA with Stencil – An Introduction to StencilJS

 Building a PWA with Stencil – An Introduction to StencilJS

In this post, we will give you information about Building a PWA with Stencil – An Introduction to StencilJS. Here we will give you detail about Building a PWA with Stencil – An Introduction to StencilJS And how to use it also give you a demo for it if it is necessary.

PWAs or Progressive Web Apps are app-like web experiences that present many advantages to users such as:

• Reliability
• Engage-ability
• Rapidity/Performance

Read more about what makes an app a PWA from Google developers blog

You can also read my article about PWAs in SitePoint

Without further information about PWAs let’s learn how we can build a very fast PWA using a new tool created by the Ionic Team StencilJS

Stencil is a web components compiler that can be used to build modern and fast front end web applications using web components.

New to this concept of web components? this is an easy to understand the definition

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.Source

So web components are a set of modern browsers to allows developers to create their own HTML tags (i.e they can extend the HTML language), re-use them without re-inventing the wheel each time and share them with other developers.

Once you create a web component you can use it just lie you use any standard HTML tag. For example:

<my-comp></my-comp>

It goes without saying that you can create web components without Stencil so why using Stencil?

Stencil provides you with

• an easy TypeScript API to create your component and then generate a standard compliant web component (specifically a Custom Element)
• a set of modern APIs such as virtual DOM and JSX
• 6kb min+gzip runtime, server side rendering
• React Fiber inspired Async rendering
• Reactive data-binding
• Framework agnostic (web components can be used with any framework or with no framework if you choose)
• live reload and development server like most modern tools
• and helps you easily build PWAs based based on web standards and without a framework

Watch this launch video for more information

What You Will Learn for Building a PWA with Stencil?

In this tutorial we’ll get started using Stencil and learn the very first basics then next we’ll build a simple real world PWA.

You’ll learn

• how to install Stencil
• how to create your first web component with Stencil and TypeScript
• how to build and generate your web component
• how to build a simple PWA from scratch using Stencil

Requirements for Building a PWA with Stencil

Like most modern JavaScript tooling these days, you’ll need Node.js and NPM installed.

If they are not yet installed (maybe you bought a new computer!) just head over to the official website for Node.js and grab the installer for your operating system. The installation process is generally simple.

Starting a New Stencil Project for Building a PWA with Stencil

Starting a Stencil project involves only cloning an official project starter from GitHub then install the dependencies

So head over to your terminal (or command prompt) and run the following command (you need to have Git installed)

git clone https://github.com/ionic-team/stencil-app-starter my-stencil-pwa

This will create the my-stencil-pwa folder and clone the starter project files there.

You’ll need to navigate inside the root folder of your project and install dependencies:

cd my-stencil-pwanpm install

Next, you can start a live-reload local server by running the npm start script

npm start

If you get an error related to Node.js ENOSPC (Error Not Enough Space) on Linux or Mac but still have the enough space on your drive just increase the number of system watchers by running this command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

The local server is running at http://localhost:3333/

This is the directory structure of the project

If your Stencil app starts with this error: This Stencil app is disabled for this browser. just like in the following screenshot

The error is due to your browser (Firefox in my case) not yet supporting ES Module Imports

You just need to run the following command instead

npm run dev --es5

You should now be able to see your app up and running Building a PWA with Stencil.

conclusion for Building a PWA with Stencil

Hope this code and post will help you implement Building a PWA with Stencil – An Introduction to StencilJS. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it in the comment section. Your comment will help us to help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See:: laravel And github