My Experience with Polymer 1.x at Enterprise Scale - Introduction

Polymer JS blog header image.

The world of web development is amazing. As developers we have hundreds of thousands of open-source tools readily available to us for use in our projects. When you get into the JavaScript niche however, you will come to realize that frameworks are about as plentiful as a Zimbabwean dollar. At times it can be a challenge to decide what will work best for your project.

When we were first presented with a project that would involve us taking an unscalable front-end system and rewriting it to meet our client's new design, I was excited but at the same time a bit nervous.

Our client has a large chain of franchises and gives a lot of autonomy to the individual owner operators in terms of things they sell, the prices they sell them at, and even the way they cook or prepare them. They offer thousands of product variations and frequently require content and design updates across their entire footprint.

As the designs and requirements began trickling in it quickly became clear to me that we needed a few things from our solution:

  1. We need a framework.
    • It will allow us to meet our customer's need in a timely manner.
    • It saves the company money by reducing work hours required.
    • It helps align our team with industry best-practices and code organization.
  2. It needs to be well documented.
    • Our company is quickly growing and having a well documented system that our employees can use as a resource is a must.
  3. It needs to be highly modular at its core.
    • The layout can shift around drastically based on individual store requirements.

There are many solutions out there that would meet our needs for the first two points but the third point really narrowed it down for us. Although we could technically take any of the options available to us and make them modular we wanted a system where that was the focus and the framework to emerge was Polymer.

When choosing Polymer we knew it was a newer technology that required polyfills to run on older browsers, but because of the limited scope of our project this piece which is a major sticking point for many others was a lot less significant for us. On the other hand, it gave us modularity at its core by utilizing Web Components. Web Components are the definition of modularity and as of now are a standard (details here). As we are now developing with Web Components through the Polymer framework we are cutting edge which will keep our app relevant for the forseeable future. It is currently not as performant when utilizing polyfills as Vue.js would be for instance, but that gap will be closing quickly and will possibly lead to a framework which is more performant than Vue.js in the future. Only time will tell.

What Web Components Solved for Us

As mentioned previously, the scale of our project was huge. For the user facing portion of the app we had to:

  1. Support approximately 15,000 stores across the United States.
  2. Support per-store configuration of the menu boards.
  3. Support 10,000+ product configurations.
  4. Support different layouts depending on each store's profile.
  5. Support different styles based on the part of the day (breakfast, lunch, dinner).
  6. Sync images and text highlighting based on NTP.
  7. Sync regions of the menu board based on NTP.
  8. Create a pleasant user interface for editing.
  9. Work must be complete in 12 weeks to meet the marketing deadlines.

As you can see, trying to manage a system like this using traditional HTML, CSS, and JS methods would be challenging, especially on the styling aspect. Eric Bidelman eloquently sums up the nature of this beast in the following quotes:

"Shadow DOM removes the brittleness of building web apps. The brittleness comes from the global nature of HTML, CSS, and JS." (Bidelman)

"Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript." (Bidelman)

Web Components allowed us to look at our app like Lego blocks that we can snap together and reconfigure on a whim with very little effort.

The components of Web Components (you see what I did there...) each brings a vital solution to the scope of these issues:

  1. HTML Templates
  2. Shadow DOM
  3. Custom elements
  4. HTML Imports

In my next article I will get into each of these pieces and how they made our Menu Board project possible.

Please check back soon for updates.