How to safely use ES6 new features?

Question

There are many ES6 features that look great like => syntax, Map object, and a long etc.

To be honest I'm kind of tired of checking if there is support for addEventListener due to ie8 attachEvent, and I wouldn't like that kind of pain coming back to my life.

So how, would you deal with this new posibilities? (or how will you, lets say, in a year or so). Would you not use them for basic actions but to add another layer of extra functions? Would you use it just for apps that you know you will be running in browsers that support them? Would you wait untill there is at least 90% of support?

I understand these are great features but for short to medium term usage it seems that you'd need to double your code checking and fallbacking for support.

Any enlightment about this subject?

EDIT: Please, don't mark this as duplicate. Notice I'm not asking how to check for support, I'm asking if it is wise to start using it, or it is better to wait. I'm also asking if the support check is the best option, not how to do it, or if there are other ways to proced while designing your code.

Answer 1

tl;dr: Make use of transpilers and polyfills .

---

Whether or not you should use new features primarily depends on your target environment and how exactly you are using new features. Eg if you are targeting only the latest browser version, then you won't have an issue. Have to support IE8? That could be more difficult.

In general though, you should start using new features as soon as possible , and make use of tools that help you with that.

---

There are two aspects to look at:

• New APIs
• New syntax constructs

APIs

New API's can often (but not always) be polyfilled . Ie you include a library which checks whether certain parts of the API exist, eg Map , and provides an alternative implementation if it doesn't.

These alternative implements may not be 100% equivalent or may not be as performant as a native implementation, but I'd say they work for 95% for all use cases.

The nice thing about polyfills is that you will be automatically using the native browser implementation if it is available.

Syntax

Making use of new syntax constructs, such as arrow functions or classes, is a bit more complex (but not much). The biggest issue is that browsers who do not support the syntax cannot even evaluate your code. You can only send code to the browser that it can actually parse.

Fortunately many of the new syntax elements, such as arrow functions, are really just syntactic sugar for things that are already possible ES5. So we can convert ES6 code into their ES5 or even ES3 equivalent.

Several such tools, called transpilers , have emerged over the last one or two years. Note that the transpiler has to convert your code before it is sent to the browser. This means that instead of simply writing your JS file and directly include in your page, you need to have a build step that converts the code first (just like we have in other languages, like C or Java).

This is different from how we wrote JS a couple of years ago, but having a build step has become increasingly more accepted by the JS community. There are also many build tools that try to make this as painless as possible.

One drawback is, unlike with polyfills, that you won't magically be using the native features if they become available. So you could be stuck with shipping the transpiled version for a long time, until all your target environments support all the features you need. But that's probably still better than not using the new features at all.

Answer 2

You can use BabelJS or Google Traceur

You have to include in your build process a step to transform ES6, ES7 code to Javascript compatible with todays browsers. Like a gulp or grunt task. Babel has a list of supported tools here