9

A project I'm working on has IE8 as a hard requirement. We would like to potentially use Traceur to start working with some of ES6's improved syntax, but I'm aware that it produces ES5, which is not supported by IE8. Given that I can patch up IE8 with es5shim, which Traceur-supported ES6 features are safe to use?

More specifically, I'm wondering which features map always map directly to fully compatible code (much of the sugar, presumably), which features suffer from mismatch in behavior, due to limitations of the shim, and which are unavailable altogether

acjay
  • 34,571
  • 6
  • 57
  • 100
  • @jsalonen I feel like a real answer would be objective. But please feel free to edit/make suggestions to make that scenario less likely. – acjay Jun 04 '14 at 19:27
  • After some consideration and your edit, retracted my close vote. Also: could you be a little more specific on what you mean with "Traceur features"? Do you mean ES6 Language Features? – jsalonen Jun 04 '14 at 19:58
  • Everything that uses stuff that es5shim can't or doesn't provide. The best way to find out is probably to react when issues arise. – jgillich Jun 04 '14 at 20:09
  • @jgillich I figured, but I'm trying to figure out whether anyone has solid knowledge on what ES6 features are compiled to ES3 or ES3+es5shim compatible JS – acjay Jun 04 '14 at 20:32
  • @jsalonen: Well yes and no. Traceur itself can only support a subset of ES6 features (http://kangax.github.io/compat-table/es6/), so naturally anything in the No column there is an automatic No for the purposes of this question – acjay Jun 04 '14 at 20:49
  • @acjay: Good point! Edited the question to reflect that. – jsalonen Jun 04 '14 at 20:53

1 Answers1

10

Summary: do not use Traceur if you need IE8 support

It is not possible to get full support for Traceur-compiled code in IE8 as it has very poor ES5 compatibility, which cannot be patched completely even with known polyfills like es5shim.

You may get some of your Traceur-compiled code to work in IE 8 though, but as far as I know this is pretty unexplored space. One of the only references to such attempts I know is an open issue in traceur's github repo regarding "old IE support".

From engineering point of view, I think using Traceur+ES5 shim combination in production is a really bad idea. You will not only have to deal with the potential problems raising from ES6->ES5, but also have to work around bugs due to buggy ES5 polyfills, both of which are very likely problems to occur.

Using Traceur in combination with various polyfills and patches will also result in hugely bloated JavaScript code. Just to give you an example, let us consider simple ES6 generator usage along with ES5 Array.prototype.each:

function* items() {yield new Array(1, 2, 3);}

for (item of items()) {
  item.every(function(elem, index, arr) {
    console.log(item);
  });
}

If we want to run this in IE8, we first need to compile it to ES5 with Traceur and then apply a polyfill for Array.prototype.each. The resulting IE8-compliant code in this case is roughly around 50 lines of code.

jsalonen
  • 29,593
  • 15
  • 91
  • 109
  • +1, thanks for the thoroughness of your answer. I've clarified the question even more and am leaving it open, because I am actually looking for quite specific and measurable information, although I'm not certain anybody has actually done the evaluation. If somebody ever does, hopefully this can be the spot where people with a similar problem will land. TBH, as long as our site is basically readable for IE8, we're not going to lose sleep over a few glitches. Code that needs strict compatibility can use ES3 directly. But would still be nice to know what ES6 features are safe in advance... – acjay Jun 05 '14 at 02:57