Modern JavaScript Transpiler’s are here to stay

Ryan Blunden, October 2015

QUESTIONCan we reliably enjoy the new features of ECMAScript

2015 without a transpiler?

https://kangax.github.io/compat-table/es6/

ANSWER

Not most of them!

Ryan BlundenDeveloper. Teacher. Guitarist. Motorbike Rider.

GOAL OF THIS PRESENTATIONTo show that Transpiler's and "Modern

JS" are now forever bound together.

SO WHAT IS A TRANSPILER?A source-to-source compiler

SO WHAT IS MODERN JS?Simplest answer: ECMAScript >= 2015

ES6 === ECMAScript 2015❝The official name of the latest JavaScript

version is ECMAScript 2015, and ECMA intends to release new versions in smaller increments more often, the next one being

planned for the next year and called ECMAScript 2016. From now on, the name of

the new versions will include ECMAScript followed by the year of their release.❞

V

Source: InfoQ - http://www.infoq.com/news/2015/06/ecmascript-2015-es6

TRANSPILERS IN ACTIONCoffeeScript. TypeScript.

There’s (many) more - https://goo.gl/p3BMWe

MODERN JS AND TRANSPILER’SDo we really need a transpiler for ECMAScript 2015?

YES!

https://kangax.github.io/compat-table/es6/

REASON 1When Polyfill’s can’t take you there

Many new ES6 features are syntactical enhancements.

REASON 2When Polyfills “could” take you there,

but not “there” exactly.

Are you sure your polyfill is spec compliant?

POLYFILL’s CAN BE USEFUL…But we need a transpiler to really embrace

ECMAScript 2015.

BUT IS MODERN JS THE “BEST" OPTION?

CoffeeScript vs. TypeScript vs. ECMAScript 2015Let’s briefly compare the mainstream contenders.

CoffeeScript - 1.6.3 (JUNE 2, 2013)No outwardly visible plans to add new language features.

Version 2 is a compiler reimplementation.

TypeScript - 1.6 (16 Sep 2015)TypeScript is a typed superset of JavaScript.

Behind ECMAScript 2015 but catching up fast!

ECMAScript 2015 - June 2015Transpiler (Traceur or Babel).

Babel has most comprehensive ECMAScript 2015 support.

Not just transpiling (Facebook Flow, JSX)

HOW TO DECIDE

1. Ignore the hype

2. Be pragmatic

3. Be thoughtful

4. Think long-term

BUT HOWEVER YOU CHOOSE…You’re going to need a transpiler!

WHAT IF I WAIT? WON’T BROWSERS CATCH-UP?

Yes! But not for a very long time, and never at the same time.

SO I SHOULD START TRANSPILING NOW RIGHT?Let’s take it slow…

WHY > HOW > WHATHarder, not as fun, but better outcomes in the long run.

LEARN > EXPERIMENT > IMPLEMENTThink slow, learn thoughtfully, enjoy the journey.

LEARN > EXPERIMENT > IMPLEMENTThink slow, learn thoughtfully, enjoy the journey.

WHY, WHAT’S THE RISK?

1. Pragmatic usage of new language featuresConflicting opinions on usage of many new features.

2. Code size increaseIt will happen and will happen immediately.

3. Building, debugging, packaging and testing complexities

Things are more complicated. No way around it.

4. PerformanceThere will be perf issues.

LET’S PRESUME YOU’RE GOING WITH ECMASCRIPT 2015

1. CREATE AN IMPLEMENTATION PLANRally support, socialise, train, support, test, learn, deploy.

2. CREATE A MAINTENANCE PLANHow old and new code will co-exist together.

2. RESEARCH AND LEARN FROM OTHERSBootstrap 4 re-wrote all their plugins in ECMAScript 2015.

3. CREATE A BUILDING, DEBUGGING, PACKAGING AND AUTOMATED TESTING PLAN

There will be many changes.

4. START SMALLTest your plans, tools and assumptions at a small scale.

LEARN > EXPERIMENT > IMPLEMENT

TO SUMMARISETranspiler’s are here to stay. It’s just a matter of when you jump in.

@ryan_blunden

Thank you!