Introduction to Polymer

March 12, 2017 0 Comments

Introduction to Polymer

 

 


Polymer is a npm package, and in a way, it's a library that helps you create Web Components, but it's even more complex than that. It is a whole system (which is maintained by Google) for you to work with Progressive Web Apps.

If you don't know what Progressive Web Apps mean, see this link: https://developers.google.com/web/progressive-web-apps/

The Polymer project focus is in Progressive Web Apps and the maximum focus it's in User Experience. The Polymer proposal it uses less Javascript and more the platform itself. The work is in HTTP 2, Service workers, mainly focusing in Offline First, also using others features of service workers.
While you create your application, Polymer has components to create the documentation of it. Yes, you have support for that too.

But, why should I use components if I have Angular or React?

Angular and React can create components in a really awesome way, but you cannot share them between the stacks. If I create a React component for example, I cannot reuse it in a project who uses Angular, or any other stack. With this platform, I can use a component in any project that can be shared between differents projects with differents stacks. Really reusable.

Polymer brings App Tool Box, which is a set of tools to help you work with Service Workers, HTTP 2, Web components and everything else that you can work with using Polymer. The layout part has a lot of UI components, all focusing in accessibility.
The routes to create SPA's are very easy to use, as the multilanguage part. With Polymer, creating your aplication in multilanguage is kind of trivial. Easy to do too.

In the storage part, we have App Storage, that brings the indexeddb first concept, which is very useful to create Web Apps, always offline first.

An example of indexeddb: https://gist.github.com/BigstickCarpet/a0d6389a5d0e3a24814b

By using Polymer we have the possiblity to connect to Firebase using Polyfire. Besides, there is the command line tool, with a lot of generators to make a scafold in your project. This is very common on the back-end side, but not so much in the front-end side. Polymer brings a way to make scafold, by creating elements and projects. The scafold brings the test structure already and it is relativity simple to make tests, because the platform is focused on tests.

With Polymer the deploy is automatizated and also has your own static server, Polyserve.

To make a basic setup to work with Polymer

The first things we need is Node.js and Npm installed.

What is Node.js? https://nodejs.org/en/about/
What is Npm? https://docs.npmjs.com/getting-started/what-is-npm

To start, we nee to install Polymer cli, which is the Polymer command line tool. It will be usefull to make scafold, and all the work with the project.
To install this, you have to use npm.

npm install -g polymer-cli

(this instalation can be delayed)

The second step is installing Bower. Bower will be our package manager.

npm install -g bower

With both installed, we have available the Polymer command

polymer

Which can be used for a lot of things, for example to do a scafold in a project. If we put:

polymer init

The answer will be a question:

Which starter template would you like to use?

If we choose Element for example, it will make other questions, like the name and the description. And then, the scafold will be generated, giving you everything you need to work with your element.

Polymer is a great platform, very complete and usefull.
In my next post we will see how to create your first component.

Until next time!


Tag cloud