Web components are nothing but reusable components were each of the components contains some custom elements, HTML imports, and a template. If you are familiar in using React, Angular, etc. then you are already using web components. Components in React are really web components. Similarly, Angular directives can be considered as a web component.
It also provides polyfill which enables implementing a feature on the web browsers that do not support it.
It uses Google material design for developing a mobile application which is hybrid in nature. The HTML import and the custom element present in can be used fiber uses and the custom elements are distributed across the entire network.
So we can learn the steps in installing Polymer.js on Ubuntu 19.04(Disco Dingo).
1. Install Nodejs
In this tutorial, we are going to install Polymer CLI using the Node Package Manager(NPM). So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs itself.
Currently, 12.4.0 is the latest version of Nodejs and it can be installed on our system using the commands below.
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs
2. Install Git
It requires to install Git on our system because, on step 4, we need to clone the starting code for our first polymer project from Github. The below command will take care of installing Git on our system.
sudo apt-get install git
3. Install Polymer CLI
Polymer CLI helps us to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
The main components of Polymer CLI are a boilerplate generator, build pipeline, a test runner, a linter and a development center.
It can simply be installed using NPM.
npm install -g polymer-cli
4. Clone the Starting Code
Now we need to download a starting code from Github to create our first application using Polymer. We can easily clone this project using git.
git clone https://github.com/PolymerLabs/polymer-3-first-element.git
5. Install Dependencies for the Starting Code
So we have cloned the starting project from Github and we need to install the dependencies required for it. It can be done with NPM.
cd polymer-3-first-element npm install
6. Running the App
Now, the app we have cloned can be run from our system.
polymer serve --open
This will open up a new browser tab on our system with the below URL.
It is our Polymer project and we can customize it in our ways.