Polyfills - HTTP203

In this episode, Surma & Jake talks about the conditional loading of polyfills and how to implement it in the world of ES2015 modules. The non-blocking nature of modules makes the old approach of blocking script tags both inefficient and undesirable and with dynamic import landing, the web now offers better ways.

[Cuddlehead]

nothing quite as humbling as watching these guys have a simple conversation

[HughGuiney]

What on earth is a TransformStream?? Google devs live in the year 3000…

[ViniciusRocha-bllk]

Thank you guys! I was thinking about conditional polyfills these days.
Keep using code snippets please.

[zyst]

Cool! I dig the code examples, they really helped this episode.

[googleplexer]

This is the best podcast I've ever seen.
🤘

[evandroLG]

Still today it is a super interesting discussion guys! Thanks a million!

[petecapecod]

You guys are wicked smart!! Great video love the code shots

[snapstromegon]

What about the following approach?

self.TransformStream = TransformStream || (await

You can use this in an async iife (like some examples in the video) and it's short and only imports the polyfill, if it's needed.
I know, that it's not the most beautiful code, but for most cases it should be absolutely fine and easy to read.

[MarkJKellett]

Can you give more examples of using Streams to solve some real world problems? For me at least, some use cases don't immediately jump to mind.

[malipetek]

what about every library loads polyfills on demand and dispatch a event on global containing loaded module with its version and stuff. Other libraries then first attach event listeners when loading a polyfill on demand first look for loaded one and repeat same.

[JorgeRafaelNogueras]

Thanks for the great video!

I have a question about the solution you present at 7:35: doesn't that implementation mean that when you do a "new (await TransportStreamPromise)" in your code, you'll have to retrieve the polyfill module asynchronously every single time (even if you had already done so previously)?

[MaxArt]

I find it weird to create a promise with `Promise.resolve().then` rather than `new Promise`. It looks like an abuse to avoid using `new`.
Is there a specific reason to this?

[RafaelCouto]

This is how I would do it in the old days:
var TransformStreamCallback = function (callback) {
if ('TransformStream' in self) {
return callback();
}
var s =
s.type = 'text/javascript';
s.src = '/stream-module.js';
s.addEventListener('load', callback);

};

[neovov]

I have mixed feelings about this video. On one hand you explain an issue and propose a fairly elegant solution ; on the other hand I feel that it lack some depth. I think some people may be lost with ‘self’ (if you haven’t had the chance to build a Worker you probably don’t have a clue of what it is), TransformStream (honestly, who have used it yet ? BTW, I’m interested in what you did with a TransformStream) and even async/await and Promise to an extend. I think there is room for another show where you too explain in depth one concept, with examples and slowly (you guys talks quite quickly ; for foreigners it may be hard to understand).

Anyway, I would nitpick about one point: polyfill-ing isn’t always black and white. If you take the example of ReadableStream it is available in almost all browsers (*coughing* Firefox ?) but yet, their implementation are sparse, none support BYOB for example (Cache.matchAll is another example). Still, we can use your solution with multiple checks depending on the need when we want to use our API. Also, I don’t quite agree about TransformStream being used asynchronously ; most of the time the pipe is constructed in a synchronous function, converting to an async function might be challenging sometimes.

[travelmoustache]

Can you make a blog post for this please? Fantastic idea, we should do some library for easier implementation maybe?

[lucrativelepton]

Dynamic imports cannot be used in normal script tags, in Firefox. The entire script refuses to run 🙄 such a PITA...

[raulcalvomartin]

What about loading the promise polyfill? Just kidding ;-) that’s a great idea thanks for sharing

[SalmanAbbas]

I get what you're saying but my solution would support all browsers:
<script>
If (!('TransformSteam' in window)) {
document.write('<script
}
</script>

[dandan]

i thought you would talk about a server side + client side solution that may serve the polifyll version of an API in the first request and also catch errors on the client side, in case the browser actually doesnt support that API. this is hard stuff :(

<picky>SyntaxError at 07:00, unexpected token await</picky>

[business_max]

Noice Noice. Clean and Easy. Clean and Easy.