I joined a small team where I helped build GE Digital’s App Hub architecture, which empowers engineering teams to break their large monolithic web apps into smaller “microapps” that are seamlessly combined at runtime into a single unified experience for the end user.

Each microapp is a standalone web application, complete with its own dependencies and build pipeline, which is then “proxied” into the App Hub via a lightweight Express app that handles authentication, authorization and templating. My core responsibility on the App Hub team was building the layout UI that displays all global application elements, including navigation and notifications, and wraps around each and every microapp.

I worked closely with the Predix APM UX team to ensure not only that the App Hub UI was a pixel-perfect representation of their designs, but that its interactions reflected their intent as well. The UI is fully responsive across mobile, tablet and desktop breakpoints, and I followed a mobile-first methodology for organizing classes, styles and behaviors.

My code for the App Hub UI was deeply informed by unknowns. We deliberately built the architecture so that just about anything at all could be a microapp and rendered within the App Hub, from a static HTML page to an Angular app, to a jQuery site, to a Predix-themed version of Bootstrap, to an app built entirely with Predix UI Polymer components.

Given these unknowns, I had to tread carefully with my CSS and JavaScript to ensure it wouldn’t conflict with any definitions that might be in a microapp. Likewise, my code had to be robust enough to withstand unexpected global behaviors that might spill out of a microapp, while leaving space to be overridden when a microapp developer really really means what their code is saying.

In terms of JavaScript, I worked pretty close to the metal due to the constraints and variability inherent in wrapping microapps. The App Hub code can’t use any external JavaScript dependencies, for example, because those dependencies might conflict with a dependency (or even a specific version of a dependency) in a microapp. Teams across GE Digital managed their application dependencies in a variety of ways, so NPM, Bower, JSPM and plain ol’ /lib folders and script tags were all within the realm of possibility. Different teams were writing different flavors of JavaScript using different transpilers, bundlers and build pipelines, so I had to be careful not to run afoul of those as well.

Finally, since support for Internet Explorer 11 was a requirement, I ultimately found myself writing the App Hub UI in plain vanilla ES5 JavaScript with no external libraries or transpilers. This turned out to be fairly straightforward when the JavaScript was simply for managing popover menus, responsive behavior and layout state, but it got more complex as I implemented a global event-based toast and notification system. Fortunately, a robust linting strategy kept me and my code honest even when the going got toughest.

I took pains to carefully document the App Hub UI, creating a microapp in its own right that contains numerous pages of usage examples, and details all the available states of individual components. I also commented my Sass and JavaScript code so that in addition to hand-crafted documentation, we could auto-generate documentation using SassDoc and JSDoc as well.

In July 2016, the Predix APM team officially migrated their application to our App Hub architecture, finished splitting their monolith into microapps, and launched the refactored version of Predix APM to production. Over the following months, numerous other teams at GE Digital would adopt the App Hub architecture and begin building microapps as well.