Andrew Stacy

Full-Stack Developer

  How I Work

Recent Blog Post

My Experience with Polymer 1.x at Enterprise Scale - Region Components

Now that we have discussed Base Components, let's dive into Region Components. A Region Component is directly comparable to a Molecule in Brad Frost's Atomic Design. It consists of a coherent grouping of Base Components along with CSS Styling and JavaScript to form a logical portion of the screen. But, before we go any further, let me introduce our newest restaurant, DeveloBurger!

DeveloBurger Menu

If we closely inspect the very simple menu above, we can see patterns arise as to how it is presented. We can identify two unique Regions that contain the majority of the content on this menu.

DeveloBurger Menu Regions

The two that we identified can be called dbrg-region-ready and dbrg-region-have-a-byte. In Polymer we must namespace each component, so to make them easily identifiable in our code, we'll prepend each region name with dbrg- plus region-. dbrg represents the vendor (DeveloBurger) and region tells us that this component is a region component.

Within our menu board hierarchy, Regions are directly generated by our Layout component of which we will dive into next. By defining these sections of the menu board as self-contained components we are able to more easily reorganize the menu board. We can also contain alternate styling and internal layouts of each of these regions depending on things like the time of day and what Regions are available at that time. Here is an example of a different menu for breakfast.

DeveloBurger Menu Regions

Notice that the theme has now changed from dark to a light which impacts the background color and the font colors. We also now have different imagery but more importantly our Regions have changed position on the menu board and now have different internal layouts. We also have an additional Region that we are now accounting for on our menu named dbrg-region-best-friend-bar. Let's look at how these regions are defined.

DeveloBurger Menu Regions

Because we have already defined two of these regions (Ready and Have a Byte) all we now must do is internally account for the lighter theme and the altered layout. The ready() region is pretty straight-forward. We just need to reduce the number of cells in our product table to two. The Have A Byte region is slightly more complex because we are now hiding the Byte Codes sub-section and we are now horizontally displaying the sandwich-part choice tables.

The beauty of this is that each of our components that have been altered at breakfast time still share the majority of JavaScript code and CSS that the dinner version contains. This allows us to keep our front-end code DRY and drastically reduces the amount of effort it takes to generate alternate menu's from the same Region components. All of this is achievable by simply passing some meta data from the Region's parent, the Layout component (which we will discuss in the next article).