So, I built my first Web Components + Polymer web app; lessons learned.


I have built a new web app prototype with web components and Polymer. The look and feel is not finished (aesthetic improvements need to be made, additional content needs to be added, etc.), but basic functionality can be tried out. This single-page e-commerce web app for a device known as the Angel ECU (an ECU/EADL assistive technology) has been designed to load quickly, work on all major web and mobile browsers, and capture measurements about user behaviors. If you are into this wonderful world of the next-gen web and would like to hire me for your next awesome project, please connect with me on LinkedIn or @SirYummy on GitHub.

I have spent the past two days prototyping a new web app that I am eager to show off. First, I wanted to give a brief overview of what’s going on underneath the hood so that I can 1) document what I have done so far and 2) provide a report on how I have been spending my time the past two days (8 hours each day and 16 hours total).

To begin, I am building out the website with A/B testing meaning that there will initially be two versions of the app that can be compared to find a “sweet spot” for what delivers the most successful user experience. I am specifically measuring and comparing the following three SEO/web metrics:

1) I am measuring user engagement as an aggregate number of times the user performed an action (click event, text input) in a given session of using the app. The total time spent in the app in a given session is another metric that I am recording in this category. I know there are more sophisticated heuristics out there, but I am deliberately keeping things simple due to time constraints. I am also using Google Analytics for these measurements.

2) I am measuring user conversions as the sum over a given time period that users completed a meaningful user flow/story. After the site’s e-commerce functionality is switched on, the conversions will be tied to the checkout process. In the meantime, I am marking when a user submits their contact information on the contact form as a conversion.

3) Lastly, I am measuring a value known as TTI or Time to Interactive. Which is different and more important than initial page load time. TTI measures how long it took for the website to initially load and give the user the ability to interact and perform an important action (such as click the Add to Cart button). Selenium by Sauce Labs is a great resource for doing automated tests of this nature on a wide variety of browsers/devices/OSes.

Moving on, I want to share some insight on the tech underneath the Angel ECU web app: it does not use a framework, but instead uses a new development pattern with web components which offers high performance features to produce an optimized and reusable UI. These components are natively supported by all the modern browsers and backward compatibility is taken care of by means of a polyfill library by Google called Polymer. Being a polyfill is not all that Polymer can do, but it certainly is a great feature. To get a feel for what a codebase can look like for a web components + Polymer-based app, you can view/fork/star/watch my source code of this project on GitHub.

If you are evaluating whether or not to use web components and Polymer for your next project (including integration with a framework such as React, Angular, or Ionic), I need to also give due diligence to some important details about working with web components and the different versions of Polymer. Polymer lets you use the new things that web components and the latest version of ECMAScript can do such as using shadow/virtual DOM and HTML imports in older browsers:

<link rel=”import” href=”my-awesome-component.html”>

… becomes an ES5-compatible JS module for older browsers.

Secondly, the first two versions of Polymer use Bower for managing dependencies (for this project, I am using Polymer 2.0 but will upgrade to 3.0 soon). However, do not be afraid! Version 3.0 migrates from Bower to NPM like many JS libraries are doing nowadays. To that end, the Polymer team has created a CLI tool called polymer-modulizer that converts the HTML imports into JS modules.

In addition to inspecting the source code and doing manual tests of the app, you can also run automated browser-based unit tests with an awesome tool called web-component-tester (WCT for short) which uses my old friends, Mocha for the test framework and Chai for assertions.

Lastly, web components and Polymer are currently being used by the biggest brands in the world (such as Coca-Cola and YouTube) and support is being natively integrated into all major modern web browsers.

My next engineering steps for the next couple of days are to:

  1. Improve the overall layout of the app using CSS Grids.
  2. More efficiently load/bundle/display the first elements of the app to be rendered and usable. These are often referred to as above-the-fold content.
  3. Improve usage of white space.
  4. Optimize the images for specific display types.
  5. Get the correct text content into the website.
  6. Build a second version of the app to do A/B testing with.

My estimate is another 16 hours before a “soft beta” launch of the info-only version of the app. Note: the shopping cart (e-commerce) functionality will be mothballed for the first production release. It will be fairly simple to re-enable it later since most of the pieces are there.

Without further ado, here is a link to the aforementioned prototype.

In the picture below, I took a screen shot of the scaffolded landing page mobile experience:

Among many of the aesthetic and usability improvements I plan to implement, I have already taken note that I need to make better use of white space to make the website seem less sparse on a larger screen (it’s a little less noticeable on mobile). A part of the solution for this issue will include implementing subtle background color fills for alternating rows of the app, dynamically resizing the images to span the viewport width and adding informational text content that will explain to visitors more about what an ECU/EADL is.

That’s all for now. Assuming you gained something from reading this post, I will make weekly follow-up posts. Please subscribe/comment/share/like if you have enjoyed this post or learned something new. I enjoyed writing this, and I hope you gained something from reading it.

**If you are into this wonderful world of the next-gen web and would like to hire me for your next awesome project, please connect with me on LinkedIn or @SirYummy on GitHub.