0

Getting started with Polymer 1.0

560Points

6 years ago

As you may have read in our recent article, Polymer has been redesigned from the ground up. As a matter of fact, Polymer 1.0 includes many new features that help us quickly and easily create high performance web components. Perhaps more importantly, these can be used in real applications, as Polymer is now production ready.

Encapsulating segments of our application into web components allows us to create truly modular apps that are easy to re-structure, re-use and upgrade as needs arise in our project.

The recommended way to install Polymer is using bower, as it will download it along with all its dependencies. It also helps you when you need to update: you can download it using NPM with the command npm install -g bower and when needed, update all the components in your application with the command bower update.

To initialize a project, go to its root folder and run the command bower init. You will then get asked for the general data needed to start your application, which will be saved in the bower.json file. Once Bower got started on your project, type the command bower install --save Polymer/polymer#^1.0.0. This will add Polymer to the dependencies of your project and place everything in the bower_components folder.

One of the installed dependencies is the Polyfill necessary to use web components on browsers that do not support this natively; this file can be found in bower_components/webcomponentjs/webcomponents-lite.min.js and weighs only 37kb.

To make the most out of Polymer, I recommend using the Starter Kit, which includes the basic components to build an application, plus a set of tools that includes, among others, gulp talks to handle live-browser-reload and minification.

Before starting, make sure you have the following required items installed on your computer:

To start using Polymer’s Starter Kit after downloading it, go to its root folder and type the command npm install & bower install. This will install all necessary dependencies.

Polymer Starter Kit has a production-ready workflow; to activate your local server simply use the gulp serve command, which will give an IP to work locally and another one that you can use from other parts of the local network. It comes with live-browser-update functionality integrated, so when you do code changes, your browser will be updated automatically.

Unit Testing is an important process for any production application and Polymer Starter Kit includes the necessary configuration to check the components included with web-component-tester. To use it, just run gulp test:local.

It is worth mentioning that Polymer Starter Kit includes a Service Worker configured to provide offline functionality to our applications. For your information, Service Workers are a great technology letting us run scripts in our browser’s background, which, at the same time, allows us to run advanced services.

You can enable this awesome service in three easy steps:

1.- Remove the comment tags to enable the web-component.
index.html
<paper-toast id="caching-complete" <br=""> duration="6000"
text=“Caching complete! This app will work offline.”>
</paper-toast>

<platinum-sw-register auto-register="" clients-claim="" skip-waiting="" on-service-worker-installed="displayInstalledToast">
  <platinum-sw-cache default-cache-strategy="networkFirst" precache-file="precache.json">
  </platinum-sw-cache>
</platinum-sw-register>

2.- Remove the comment tags to enable the library loading.
elements.html

<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-registe.r.html">

3.- Add precache to the gulp default tasks list.
gulpfile.js

gulp.task('default', ['clean'], function (cb) {
  runSequence(
    ['copy', 'styles'],
    'elements',
    ['jshint', 'images', 'fonts', 'html'],
    'vulcanize', 'precache',
    cb);
});

When you have your application ready, before deploying execute the command gulp, which will optimize all of your application files and get them ready to use in production.

Once you’re all set to start exploring the incredible potential of Polymer, I invite you to explore the different components that are available in the Polymer Elements Catalog.

To learn all the secrets and become a professional at using this great Google library, do not miss upcoming articles at Platzi/blog, and stay tuned for future classes.

Don’t hesitate to leave your comments, questions, requests and suggestions down below — and happy coding!

Cesar
Cesar
Escribe tu comentario
+ 2