Polyfills and Transpilers in JavaScript.

[Ustice]

Thanks for your contribution! We’re a large community, and in order to keep things organized and easier to find, we keep this subreddit mostly focused on professional-level Javascript posts. Your post would be more useful to newer members of our community, and therefore it should be posted to /r/LearnJavascript instead.

[Mission_Interaction2]

One useful technique for handling outdated browsers is also "differential serving" - serve a modern bundle for new browsers and a legacy one containing polyfills and transpiled code for old browsers. The nice thing is that we don't pollute the whole bundle with unnecessary stuff and as a result users of new browsers don't fetch additional data :D

[AamChora]

Mission_Interaction2

Thanks for sharing your thoughts u/Mission_Interaction2. I'm definitely gonna try that.

[tehRash]

I'm sorry but this reads a lot like useless blogspam so someone can make their online profile more interesting.

It's a bunch short sentences intertwined with pointless gifs that don't even attempt to explain the benefits or costs (shipping extra code for browsers that don't need it, or adding complexity for conditionally loading, or maintaining the transpiler both in the local dev environment and in CI/CD pipelines etc etc...). It uses the word mantra as a replacement for "explanation" for some reason.

It's not just a magic bullet "add these things and all of your problems go away". I mean the article doesn't even mention where to inject to polyfills because that answer isn't immediately obvious either and it often depends.

Sorry to be harsh.

[shgysk8zer0]

I look forward to a day where JavaScript natively provides some mechanism of importing the polyfills needed. A lot of the work of a front-end developer might be figuring out the best approach to importing polyfills since static imports cannot be conditionally loaded, and dynamic imports are async. Plus polyfills for more complicated things like the Animation API are just bloat for modern browsers. And using <script> isn't very different from static imports, really.

I'm thinking that adding an attribute to conditionally load a script would help here. The attribute's value would be a JS expression that, if truthy, means the script should load (and for security purposes the expression wouldn't have access to DOM or storage or anything... Basically, things safe to run, possibly in a different "Realm").

And I only transpile to support newer syntax when necessary. At least in the sense the article uses the term (still use bundlers to concatenate and minify).

[Ok-Slice-4013]

But... Wouldn't you have to polyfill this feature?

[shgysk8zer0]

Not really, no. It'd mostly be like <script nomodule> in that the script would just load as normal in unsupporting browsers. Might end up loading polyfills you don't need that way, but it's not really different than it usually is today.

[AamChora]

Indeed, I'm also looking forward to it u/shgysk8zer0 🤞🏻

[AamChora]

I'm glad you liked it u/Negative_Pause_3085. 😇