Introducing New Tools for Polymer Development

This article was peer reviewed by Taulant Spahiu and Panayiotis Velisarakos. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Last September, Google held the Polymer Summit 2015. During this conference, developers supplied a great deal of input about new things made possible by Polymer. Polymer 1.0 had been released earlier, which added to the anticipation that so many had for this year’s conference. Among the speakers of this years, there was Addy Osmani, a Google engineer known for his important contributions to several open source projects.

In his talk, he has introduced some new tools which have been released for Polymer development. These tools provide everything a developer may need to know about Polymer development, regardless of prior experiences. Many of the tools I’m going to describe need to be downloaded via npm, and can subsequently be used directly inside your computer’s command line.
For those of you who don’t know what Polymer is and want to deepen the topic before reading my article, I suggest to take a look at these resources:

Polymer Starter Kit

Polymer tarter kit 1.0 allows developers to be up and running in no time. It includes a build system powered by Gulp. As a result, developers can begin writing their own code and watching their application update in the browser. If we check out the repository for this project, we can see that it is extremely well maintained as the core commits are highlighted at the top of the page. The Polymer team provides developers with all the documentation necessary to help those new to Polymer feel comfortable when using it.

seed-element

The seed-element project provides a boilerplate for building elements in Polymer. However, it does not stop there! Seed element will scrape Polymer applications and produce a full documentation set of the different functions the Polymer element is trying to accomplish. The ability to provide this functionality is done with the help of IronComponent.

Below we see an example of seed-element that lives in the browser. Additionally, we see the seed-element project allows us to toggle the view from the actual application to the API documentation generated with IronComponent element.

MisBci4cL6
If you want to check out the repository for the seed-element project, you can find it here. That being said, all we need to do is run the following command in order to install the seed-element project on our computer.

git clone https://github.com/polymerelements/seed-element && cd seed-element

Polyserve

The next tool we’re going to look at is Polyserve. As its name suggests, this application can be used to serve Polymer components in the browser. In the GIF included above, the application is being used to serve the seed-element application. To install this tool, we can run the following command. It should be known that we’ll need the -g flag appended on this, as we will need access to it globally.

npm install -g polyserve

Now, if we go into the seed-element directory we cloned before and run the command polyserve, we’ll see the same result displayed in the GIF above. This tool is extremely similar to the the http-server npm module. As you can see, it makes it incredibly easy to get starting using Polymer.

Polyup

Polyup is a very impressive tool that helped alleviate what Addy Osmani refers to as “Element Guilt”. This is the guilt that comes as a result of spending hard hours building an element in Polymer version 0.5, just to realize is not compatible in Polymer 1.0. Incredibly enough, Polyup automates the process of “leveling-up” Polymer 0.5 code, so that it is compatible with 1.0. Polyup actually goes through your files and re-writes elements using the correct syntax. For those of you who are interested in seeing a live example of how Polyup works, I suggest to visit the PolymerLabs Github page. Additionally, we can see a screenshot of this page below.

Polyup Screenshot

Polyup can be installed by running the following command:

npm install -g polyup

Once installed, developers will then have access to the Polyup command line tool. By running polyup <filename.html> we can sit and watch while Polymer upgrades components so that they’re fully compatible in version 1.0. When speaking about Polyup, Addy Osmani mentioned a snippet of code that I’m going to include below. By running this block of code inside of a Polymer project, Polyup will sift through each and every file in a project with a .html extension, and upgrade all of these files to version 2.0!

find . -name "*.html" -execdir polyup --overwrite "{}" \;

Web Component Tester

All developers know that testing is an integral part of development. Therefore, it is no surprise that recently a Web Component Tester tool has been rolled out so that developers can easily test Polymer components. It’s been built on top of mocha and Chai, which are two of the more popular testing frameworks available for use. As a result of this, many developers can use their knowledge from testing different JavaScript frameworks with these test suites to write tests for Polymer components.

Just like Polyup and Polyserve, this tool can be dowloaded via npm by running the following command:

npm install -g web-component-tester

Once installed, developers have access to the wct command line tool. When run inside a Polymer project, this command will run on all files inside of the test directory. If we check out the folder structure from the seed-element repository, we can see that this test directory is present.

Conclusions

The Polymer team has provided the realm of Web development with all the means necessary to begin building applications with the framework. In addition to these tools, Addy Osmani also spoke about a few others such as Vulcanize, and Crisper which have been extremely popular among the Polymer community. If you want to watch his talk, or any of the other talks from the Polymer Summit, you can find them on the conference’s YouTube channel.