Transpiling or not transpiling Polymer 2 applications?

Question

I am writing a Polymer 2 application. The default is to transpile ES6 to ES5 so that you can use ES6 syntax and be sure it will just work.

The problem with this is that everybody (even supporting browsers) get to receive transpiled code.

Two questions:

• Is it just too crazy to say "no" to legacy browsers, and just stop transpiling?

• Is there an easy-ish way to redirect specific browsers to a non-transpiled version of the app?

Answer 1

The simple answer isL use prpl-server-node which does exactly what I was talking about, and more. Specifically:

---

Differential Serving

Modern browsers offer great features that improve performance, but most applications need to support older browsers too. prpl-server can serve different versions of your application to different browsers by detecting browser capabilities using the user-agent header.

Builds

prpl-server understands the notion of a build, a variant of your application optimized for a particular set of browser capabilities.

Answer 2

It really depends on the audience of the app you want to create. As for my own projects, I can see in my Google Analytics that there are still some people who are accessing it via Safari 8, 9 and even IE 11. I cannot just tell them to use a different browser because of several reasons... mostly financial reason (either personal or corporate)

Because of that, it is still a default for me to just transpile back to ES5 (given that I am using Webpack for now while waiting for the script type="module" to stabilize).

As for easiest way, they say if you use Polymer-CLI's serve function, it autotranspiles your code depending on the browser's capabilities.

Or you can have a simple javascript code that tries to check an ES6 method, then if it works, it loads the ES6 version of the bundled code... if not, it loads the ES5 version of the bundled code + the custom-elements-es5-adapter. But this one takes some performance hit because of the wait to parse the initial JS script to check before loading the necessary files instead of loading them right away (I haven't tested this though)

Or you can check in the server what type of browser is calling and then heuristically guess what type of version code you want to send.

As for performance for the overhead of the transpiled code, it's a bit miniscule, given that if you are just using Polymer.Element, you can get at least 12KB of code... then you'll have like 30+KB left to show content, which is more than enough to have a PRPL+50