uwc part 3: The "magic script"

Now that we know what bundling vs unbundling is we can spell out how methodology utilized in unbundled Web components

haxtheweb / unbundled-webcomponents

"The magic script" - Unbundled Web components for lazy-hydration routines hitting maximal browsers

Unbundler methodology / Goals

Have a universal way of ingesting web components into any application
eliminate bundling
Resolve platform capabilities on the front end
Only serve polyfills to those that need them

You can see the end result of our universal integration methodology in this code pen. I'll start here and work backwards so you don't go "I don't get why this matters".

In the code pen it asks you to copy and paste the following into the HTML tab

<grid-plate layout="4/4/4" responsive-size="xs" breakpoint-sm="900" breakpoint-md="1200" breakpoint-lg="1500" breakpoint-xl="1800" column-widths="[&quot;33.3333333%&quot;,&quot;33.3333333%&quot;,&quot;33.3333333%&quot;]" hide-ops="" responsive-width="770" disable-responsive="" columns="6">
<meme-maker alt="happy dance GIF by SpongeBob SquarePants" image-url="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" bottom-text="Are" imageurl="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" toptext="happy dance GIF by SpongeBob SquarePants" slot="col-1">

      <img src="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" alt="happy dance GIF by SpongeBob SquarePants" preload="lazy" aria-describedby="">
    <div>Are</div></meme-maker>
<meme-maker alt="happy dance GIF by SpongeBob SquarePants" image-url="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" bottom-text="Ready?" imageurl="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" toptext="happy dance GIF by SpongeBob SquarePants" slot="col-3" top-text="">

      <img src="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" alt="happy dance GIF by SpongeBob SquarePants" preload="lazy" aria-describedby="">
    <div>Ready?</div></meme-maker>
<meme-maker alt="happy dance GIF by SpongeBob SquarePants" image-url="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" bottom-text="You" imageurl="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" toptext="happy dance GIF by SpongeBob SquarePants" slot="col-2">

      <img src="https://media0.giphy.com/media/nDSlfqf0gn5g4/giphy.gif" alt="happy dance GIF by SpongeBob SquarePants" preload="lazy" aria-describedby="">
    <div>You</div></meme-maker>
</grid-plate>

Which if you do you'll see the following silly thing

The "magic script"

The big deal here is that we've eliminated the application specific build step. There is no import for grid-plate or meme-maker in the codepen, it did it via import() as you entered these tags into the DOM!

This is an universal way of resolving web components client side without developers needing to define what the imports are. You can see the "ahah" moment on one of our HAXcamp uncode shows in Episode 3.

Here's what the two-line "magic script" is:

<script>window.__appCDN="https://cdn.webcomponents.psu.edu/cdn/";</script>
<script src="https://cdn.webcomponents.psu.edu/cdn/build.js"></script>

What you get with it:

The ability to dynamically load any web component we publish on the CDN
The list of these can be found in this file: https://cdn.webcomponents.psu.edu/cdn/wc-registry.json
The process for this deployment method is open source
All the elements on the CDN are open source
You could use this methodology with a locally built version in any application
A single build pipeline for any application with an identical integration methodology
Anyone can now add web components to any application, without a build / bundler routine!

This is why in the video you can hear the reaction of several colleagues when they realize the implication of this script. By unbundling our assets and building once, we effectively eliminate building and bundling for ANYONE that wants to consume our assets!

That means that all of the following links are dynamically importing every asset you see on the fly from one CDN:

4 of these are static sites, 1 is a PHP based one, 1 is Omeka backed; all of them are able to leverage the two-line "magic script" to hydrate web components on the fly.

To use this script

Copy and Paste into a template file / body area of a CMS
add any tags to the template / page like or or
Profit

Integrations leveraging this routine

Browser support it works

This will work in all browsing targets, can hydrate ANY web component and serves the fastest ES version of code it can based on the targets set in the compiler to ship 3 unbundled versions of the code.

How it actually works (in the weeds)

In the next posts I'll start stepping through how the magic script:

Builds the registry via gulp (local tooling to discover the tags)
Leverages Polymer CLI to do an unbundled build against 3 targets
Figures out the version to send on the fly as well as dynamically resolves polyfills

Blog