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:
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.
As mentioned previously, the scale of our project was huge. For the user facing portion of the app we had to:
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)
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:
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.