Using ES6 features with all browsers support

Question

I want to use ES6 features in my script, and having all browsers support it. How can I do that, and can I?

I've been thinking about using some tool that will convert my code to ES5 automatically on git pull ing it on the server, and create the second file out of it. And then in the browser I could use one of those scripts, depending on the browser and its version.

Is this possible?

It would however create some problems:

1. Converted code would have the same performance as writing the code in ES5 natively.
2. I would have to write some kind of if in the HTML, and I want to include just one script, without anything else.

What's the best way to do this?

Answer 1

Until more browsers support ES2015 (aka ES6) features, using transpilers and polyfills will be the only way to go. Checkout the ES6 compatibility table to determine what features you can use today for the browsers your site supports.

Keep in mind that there are two main parts to ES6:

1. new language features
2. new native API features

Until all the browsers your site supports have support for the new ES6 language features, you won't be able to use them in your scripts without first transpiling them to an ES5 equivalent. I've used babel and it has worked great. The ES5 equivalent code that is generated has performed just fine. It also beats me trying to write equivalent ES5 code manually. The code generated by babel has been thoroughly tested by babel's test suite and has been used by thousands of developers around the world. Also, writing your code with ES6 is shorter and easier to maintain. This saves a lot of developer time. When the day comes that when all the browsers your site supports have support for all the ES6 features, then you can turn off the transpiling step in your build and you'll get the full benefit of native browser performance without having to manually convert your manually written ES5 code to ES6.

Many of the new native API features can be used today by providing a polyfill . The polyfill is only needed when you want to use an ES6 feature AND you need to support older browsers. With a polyfill, only the older browsers may have slower performance compared to the native implementation. Since most of the modern browsers already support many of the native ES6 API features, many of your users will get the full performance of the browser's native implementation. From my experience with polyfills, I have not noticed any significant performance implications.

If you are concerned about modern browsers unnecessarily downloading and running the polyfill all for naught, then there are techniques you can to do minimize the impact:

1. On the server-side, you can detect the browser making the request and determine whether to bother sending the polyfill script tag in the response.
2. You can properly version the polyfill and make sure the web server's caching is set so the browser will rarely make a request for the polyfill after the initial download.

babel used to be able to transpile the ES6 code in your html files, but that feature has been removed. You can just move your embedded code to a separate external JavaScript file. If you don't like the idea of incurring another request to get this external JavaScript file, then you can do the following:

1. Write your ES6 code in a separate file.
2. Run this file through babel
3. Use your server-side scripting language to include the transpiled content directly in your HTML.

Answer 2

@DannyHurlburt's answer was correct at the time of posting it, but now, you can use TypeScript language (with .ts file extension) to work around this. TypeScript is a strict superset of JavaScript, so any ES6 code you have is also lexically valid TypeScript. TS compiles to old versions of JavaScript as old as ES3.