PWAs or Progressive Web Apps are an 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 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?
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
Like most modern JavaScript tooling these days, you'll need Node.js and NPM installed.
If they are not yet installed (maybe your 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
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-pwa
npm 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 screen shot
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
Top comments (0)