Improve UIKit Rendering Performance + Speed Up CI Installs

[sghoweri]

Jira

http://vjira2:8080/browse/BDS-1557

Summary

DevOps related updates to upgrade Bolt’s Puppeteer instances to now use Puppeteer Core + launch using an instance of Chrome already installed; significantly speeding up / slimming down local dev installs + shaving nearly a minute off of our Travis CI build!

Also includes a handful of UIKit visual improvements + a ton of IE-specific bug fixes that popped up when testing out these updates.

Before:

After:

Details

• This PR updates dependencies and configuration logic for Bolt’s Puppeteer instanced to now use the much lighter weight Puppeteer Core instead (which doesn’t automatically download Chrome when installing). This includes:

  • Web component-specific Jest tests
  • Pre-rendering Pattern Lab’s Web Component-based UI
  • Generating and inlining Critical CSS for Pattern Lab (and soon, the rest of the docs site)

• Updated NPM dependencies for the root monorepo package.json, in addition to updating dependencies in Pattern Lab's UI (UIKit Workshop), @bolt/core, and Bolt's shared Babel-specific config

• Fixed the double CLI output issue when Pattern Lab's UIKit assets are compiled

• Fixed a few misc eslint / prettier related issues flagged after updating dependencies

• Added / updated several missing polyfills required to get IE 11 working as expected

• Removed Prettier from getting used to format code in the Pattern Lab code viewer due to major performance issues encountered (now using a lighter weight alternative)

• Reverted Pattern Lab's iframe to no longer automatically resize when the height changes. This addresses side-effects we've been seeing with sticky / fixed position UI (like modals) + helps improve the already heavy performance load when navigating between pages

• Updated Pattern Lab's iframe scrollbar / iframe resizer handle to be easier to use while keeping out of the way

• Improvements to the no-JS / pre-rendered version of the docs site -- the nav + iframe are nav both scrollable / usable!

Prerendering Before vs After Updates

What's Up With The New UIKit-specific Packages?

Our modernized Pattern Lab UI had been using two off the shelf Webpack plugins (critical-css-webpack-plugin and prerender-spa-plugin) to handle the pre-rendering and Critical CSS-related work. Unfortunately, these two plugins (and the prerenderer dependency used for pre-rendering) were also using the heavier version of Puppeteer.

This, combined with a lack of recent upstream updates, meant that configuring these Puppeteer instances to use Puppeteer Core + reference the path to a local instance of Chrome installed was incredibly difficult.

For at least the time being, these 3 dependencies have been pulled into the Bolt monorepo to apply the necessary optimizations.

These updates could ultimately get PR’d back to the original projects, however given the lack of recent package updates, my gut tells me that a patch-package-approach would likely wind up being much more permanent than I’m comfortable with.

How to test

• Confirm Travis build working as expected
• Double-check the updates locally to confirm everything here is good to go
• Check out the minor UI updates in this PR's staged version of Pattern Lab

[mikemai2awesome]

@sghoweri Side question, this page (https://boltdesignsystem-pg0ps1k83.now.sh/pattern-lab/?p=viewall-visual-styles-rendering-performance) does not belong in the Visual Styles section, can we move it somewhere else? There are already some hidden test pages under button.

[sghoweri]

@sghoweri Side question, this page (https://boltdesignsystem-pg0ps1k83.now.sh/pattern-lab/?p=viewall-visual-styles-rendering-performance) does not belong in the Visual Styles section, can we move it somewhere else? There are already some hidden test pages under button.

@mikemai2awesome Move it to a new Ions section? 😉

In all seriousness, I'd be ok hiding those for now (underscores) and we come up with a much more permanent home for supporting pages / sections like that

[mikemai2awesome]

@sghoweri Sounds like a plan!

[mikemai2awesome]

Just hide some pages as mentioned above.

[adamszalapski]

It looks good. I have only one question, why view all pages like (Color Palette, Typography, Accordion etc.) have left, right padding and specific pages not. I now that was the same on previous build but maybe we should change it.

[sghoweri]

@mikemai2awesome all set!

[sghoweri]

It looks good. I have only one question, why view all pages like (Color Palette, Typography, Accordion etc.) have left, right padding and specific pages not. I now that was the same on previous build but maybe we should change it.

@adamszalapski that's always been the case -- even all the way back with the earliest v1.x releases of Bolt: https://v1-3-0.bolt-design-system.com/pattern-lab/patterns/01-styleguide

Pattern Lab has always (historically) had it's "View All" pages include a little bit of padding in the wrapping template since they displaying a high level overview of everything in the system.

Individual component-specific pages don't have this wrapper (it's just the pure component as-is), hence why they don't have this padding.

Changes requested should be all set!

[danielamorse]

@sghoweri tested locally and on stage, ran start and build, reviewed (most) code changes. Approved 👍

I merged in master and resolved conflicts. Just take a look at package.json to make sure it's as expected (see commit).

[sghoweri]

@sghoweri tested locally and on stage, ran start and build, reviewed (most) code changes. Approved 👍

I merged in master and resolved conflicts. Just take a look at package.json to make sure it's as expected (see commit).

Excellent - thanks @danielamorse!!