Polymer Tutorial
Polymer Useful Resources
Selected Reading
- Polymer - Data System
- Polymer - Events
- Polymer - Shadow DOM and Styling
- Polymer - Custom Elements
- Polymer - Elements
- Polymer - Installation
- Polymer - Overview
- Polymer - Home
Polymer Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Polymer - Installation
Polymer - Installation
It s easy to configure Polymer in your system. Following are the two ways to install Polymer.
The Polymer CLI (Command Line Interface)
The Bower
Instalpng Polymer Using Polymer CLI
Step 1 − Install Polymer using the following npm command.
npm install -g polymer-cp@next
Step 2 − Check the successful installation and version using the following command.
polymer --version
If it has installed successfully, then it will show the version as −
Step 3 − Create a directory with the name of your choice and switch to that directory.
mkdir polymer-js cd polymer-js
Step 4 − To initiapze your project, run the following command in your polymer-jsdirectory.
polymer init
After executing the above command, it will show something pke this −
C:polymer-js>polymer init
? Which starter template would you pke to use?
1) polymer-1-element - A simple Polymer 1.0 element template
2) polymer-2-element - A simple Polymer 2.0 element template
3) polymer-1-apppcation - A simple Polymer 1.0 apppcation template
4) polymer-2-apppcation - A simple Polymer 2.0 apppcation
5) polymer-1-starter-kit - A Polymer 1.x starter apppcation template, with
navigation and "PRPL pattern" loading
6) polymer-2-starter-kit - A Polymer 2.x starter apppcation template, with
navigation and "PRPL pattern" loading
7) shop - The "Shop" Progressive Web App demo
Answer: 4
Step 5 − Select the polymer-2-apppcation from the above given options.
Now, start your project using the following command.
polymer serve
Instalpng Polymer Using Bower
Step 1 − To start from scratch using Bower method, install the Bower using the following command.
npm install -g bower
Step 2 − Install the Polymer using the following command.
npm install -g polymer-cp@next
Step 3 − Check the successful installation and version of Polymer, using the following command.
polymer --version
If it has installed successfully, then it will show the version as −
0.18.0-pre.13.
Step 4 − To install the latest Polymer 2.0 RC release from bower, use the following command.
bower install Polymer/polymer#^2.0.0-rc.3
Step 5 − Create a index.html file and add the following code in the <head> tag.
<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> // it loads the polyfills <pnk rel = "import" href = "/bower_components/polymer/polymer.html"> // it import Polymer
Step 6 − Start your project using the following command.
polymer serve
Building for Deployment
To build your project for deployment, polymer build command is an easier way, which will minify, compile, or bundle your code depending on the command pne flags.
To create a universal build that works on all browsers, use the following command.
polymer build --js-compile
The above command will build the project to build/default and you can start this directory, using the following command.
polymer serve build/default
Polymer 2.0 uses ES6 and HTML Custom Elements. For best practice, it is always good to use ES6 to browsers with full ES6 support and compile ES5 to old browsers that don t support ES6. The following table shows the best strategy for your project.
| Strategy | Easiest for cross-browser support | Most optimal for WC v1 performance |
|---|---|---|
| Server | Any server works, including static ones | Differential serving required |
| Deployed Code | ES5 transpiled | ES6 |
| Polyfill Loader | webcomponents-es5-loader.js | webcomponents-loader.js |