Bolt Core Renderer + Rendering Animation Performance Comparison

[sghoweri]

Jira

N/A

Summary

Adds 3 new demos to Bolt to highlight major rendering performance differences + a potential new technique to help address issues with scale -- particularly necessary with upcoming animation work.

Details

• This PR adds a performance rendering demo of a Sierpinski triangle implemented in both existing Bolt base components in comparison to potential performance gains by using Google's Lit Element + Lazy Lit Element POC.

  • Lit-HTML
  • Preact
  • Lazy Lit Element (New)

This PR also updates a few things in the build tools related to getting these demos up and running:

1. Adds the ability to compile Typescript .ts, and .tsx files in Bolt's local Webpack Build
2. Updates the @bolt/core click event handler util to allow toggling JavaScript methods that are on the window (vs only allowing methods that are on an element itself)
3. Updates the @bolt/core base component to no longer immediately trigger a component without any props to render (via the updated() method call) -- fixes a minor issue discovered with the new Context API additions in Bolt Release v2.2.0 #961 that can cause components using the new withContext functionality to have undefined values initially until the component finishes rendering.

How to test

• Confirm the build compiles as expected
• Confirm existing click event handlers (ex. buttons hooked up to start playing the video player on click) continue to work as expected
• Confirm the new rendering performance demos are working in modern browsers (Chrome, Safari and Firefox -- IE 11 support isn't yet possible due to the way slots are used in the demo components)

CC @mikemai2awesome @danielamorse @adam2661 -- particularly regarding the 3rd item above since I'm 99% sure Adam and I ran into this snag last week with the new List component work.

[bolt-bot]

⚡ PR built on Travis and deployed a now preview here:

• Branch link: https://feature-animation-rendering-performance.boltdesignsystem.com
• Permalink: https://boltdesignsystem-lbootetrze.now.sh

• Commit built: 34ce1e9
• Travis build

[bolt-bot]

⚡ PR built on Travis and deployed a now preview here:

• Branch link: https://feature-animation-rendering-performance.boltdesignsystem.com
• Permalink: https://boltdesignsystem-faixtlviby.now.sh

• Commit built: 290c2d6
• Travis build

[danielamorse]

@sghoweri, please resolve conflicts.

[sghoweri]

@danielamorse all set resolving merge conflicts!

[bolt-bot]

⚡ PR built on Travis and deployed a now preview here:

• Branch link: https://feature-animation-rendering-performance.boltdesignsystem.com
• Permalink: https://boltdesignsystem-ulrwlspunk.now.sh

• Commit built: bf7b892
• Travis build

[danielamorse]

Building finished with no issues.

Video play buttons work as expected on the following pages in Chrome, FF, and Safari.

• http://localhost:3000/pattern-lab/?p=components-video-autoplay
• http://localhost:3000/pattern-lab/?p=components-video-show-meta-title-and-duration
• http://localhost:3000/pattern-lab/?p=components-video-w-inline-script-and-external-controls

Rendering demos worked as expected on the following pages (with and without throttling) in Chrome, FF, and Safari.

• http://localhost:3000/pattern-lab/?p=styleguide-bolt-lit-test
• http://localhost:3000/pattern-lab/?p=styleguide-bolt-preact-test
• http://localhost:3000/pattern-lab/?p=styleguide-lazy-lit-test

I noticed in Safari only this video did not auto-play:
http://localhost:3000/pattern-lab/?p=components-video-autoplay

While this one did:
http://localhost:3000/pattern-lab/?p=components-video-autoplay-and-loop-hide-controls

Same thing happens on Master, so it's not a new bug. Is this a known issue?

[sghoweri]

@danielamorse yeah - autoplay support is a mixed bag (especially on mobile).

As long as the button component can trigger the video to start playing when clicked / tapped (which you confirmed), I’m good with moving forward with this. Thanks!