Using ES6 script now

Home / Using ES6 script now

Earlier today, I started looking at Angular 2.0 and the differences with Angular 1.x. The primary difference, aside from API changes, is that Angular 2.0 uses ECMAScript 6 (ES6 JavaScript).

ES6 is quite different from ES5. To be honest, I am still wrapping my head around the differences between ES6 and ES5. From a cursory perspective, many components/modules/elements that previously required JavaScript libraries are now native. Additionally, ES6 is more class driven than ES5 and supports observables.

While I’m still checking out ES6, my next concern was how to utilize it. Technically, ES6, afaik, is not fully supported in all browsers. You also won’t be able to use it with older browsers. In cases where you’re, for example, bound to support IE versions older than IE11, you will be stuck using ES5. There are some stop-gap tools out there to help circumvent this problem, though.

You will see many people discussing “transpiling” ES6 to ES5. I had no idea what this even meant. Here’s a nice talk that discusses it briefly.

With the recent additions to Visual Studio 2015, including gulp support, it’s possible to take advantage of the Traceur and Babel to transpile as mentioned in the video. This gives us a path to start using ECMAScript 6 in our projects now with current browsers. Looking to the future, this will be a requirement to take advantage of ES6 specific frameworks, such as Angular 2.0, on older browsers. As the video alludes to, we can start writing our 1.x Angular code to be more ES6 friendly so that converting to Angular 2.x will be less painful.

Here is one link that discusses doing this very thing with the CTP of Visual Studio 2015.

Additionally, you can download an already defined solution that takes advantage of Babel to transpile from ES6 to ES5. This becomes a nice template to refer back to as you’re creating your own projects and explore ES6, like I’ll be doing.

Leave a Reply