Comparing Web Components: Part 2 – Polymer

Since I’ve had a little bit of time with Polymer, I decided to do that library next. However it has had a significant upgrade since my time with it. Version 0.8 has broken just about everything so don’t expect it to just “work”. There is a migration guide, however, and the API does a lot more for you, so it’s an improvement all round.

The Polymer folks like Bower for their distribution platform. This is a shame as jspm doesn’t support bower just now. However it does support GitHub just fine, so I can use that to install Polymer:

jspm install github:Polymer/polymer

Make sure it brings down Polymer v0.8.0


There are a couple of other changes that are necessary too. Firstly, Polymer uses the webcomponents-lite library. This is included in the webcomponents.js download from yesterday but it’s a different file. My Areas/Main/Views/Layout.cshtml file now looks like this:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="~/jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Required Polyfills -->
    <script src="~/jspm_packages/npm/webcomponents.js@0.6.0/webcomponents-lite.min.js"></script>

    <!-- Components used -->
    @RenderSection("htmlelements", required: false)

    <div class="flex-container">
    @RenderSection("scripts", required: false)

Additionally I’ve altered my Areas/Main/Views/Home/Index.cshtml as follows:

@{ ViewBag.Title = "Home Page"; }

<h1>Home Controller</h1>

<nolib-helloworld>No Library</nolib-helloworld>

@section htmlelements {
    <link rel="import" href="~/elements/nolib-helloworld.html">

    <link rel="import" href="~/jspm_packages/github/Polymer/polymer@0.8.0/polymer.html">
    <link rel="import" href="~/elements/polymer-helloworld.html">

As with the no library version, I’ve created a directory src/elements/polymer-helloworld to store my custom element. Note that I am bringing in the Polymer library before the polymer-helloworld.html component, as a dependency. Within that directory, I’ve created a polymer-helloworld.less file with the following contents:

.outer {
    border: 2px solid #777;
    border-radius: 1em;
    background: blue;
    font-size: 20pt;
    width: 12em;
    height: 7em;
    text-align: center;

.boilerplate {
    color: white;
    font-family: sans-serif;
    padding: 0.5em;

.name {
    color: black;
    background: white;
    font-family: "Marker Felt", cursive;
    font-size: 45pt;
    padding-top: 0.2em;

Note that I’ve just changed the color of the “name badge” – this is so that I can distinguish between the CSS elements. If the CSS for each custom element is distinct (as it should be with Shadow DOM) then one name badge will be blue and one will be red. My next file is the polymer-helloworld.html file:

<dom-module id="polymer-helloworld">
    <link rel="stylesheet" href="polymer-helloworld.css">
        <div class="outer">
            <div class="boilerplate">
                Hi! My name is
            <div class="name">

<script src="polymer-helloworld.js"></script>

Finally, the polymer-helloworld.js file is almost non-existent as the library takes care of most of the scaffolding for me:

    is: "polymer-helloworld"

Once this is done, a build of the components is possible. Check out the wwwroot/elements/polymer-helloworld.html file.

In development, this comes at a cost. Webcomponents-lite.js is 77K (although the full library is 258K – ouch!). In addition, polymer brings in 51 files. This is bound to be slow when loading over the Internet. We can speed it up by using vulcanize on Polymer itself. This is part of the production build of polymer and is distributed by bower in this fashion. Completing the build yourself is not a hardship however. Just bring up a PowerShell prompt and run the following:


I also need to alter the Index.cshtml file to bring in the vulcanized version instead of the source version:

@{ ViewBag.Title = "Home Page"; }

<h1>Home Controller</h1>

<nolib-helloworld>No Library</nolib-helloworld>

@section htmlelements {
    <link rel="import" href="~/elements/nolib-helloworld.html">

    <link rel="import" href="/jspm_packages/github/Polymer/polymer@0.8.0/dist/polymer.html">
    <link rel="import" href="~/elements/polymer-helloworld.html">

This knocks down the imports to one 87K import instead of 51 files covering about the same space. More importantly, the load time of the page was down about 70% on my system.

Comparing to the Vanilla Javascript version

When it comes to code, there really is no comparison. The amount of code I had to write was practically nothing when I used the Polymer library. That means that all the scaffolding was done for me and I could concentrate on the code necessary to implement the component.

The CSS/LESS code is just the same and there is no practical difference between the templates. The code reduction comes at a cost but I expect this is a cost I can live with.

The Polymer version of my application is on GitHub and tagged as cs-0.0.3.