Transpilers:

JS In Disguise

Ryan Hayes

@RyannosarusRex

TriJS Meetup

4/14/2015

What's a transpiler??

A Type
of
compiler!

Compilers are evidently scary enough to warrant a dragon on every textbook.

Transpilers are compilers

That turn source code into source code!

At tri.js We've Seen:

Typescript

Unity/C#

...But there are 100+ Language to js transpilers!

https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

I already know JS, so, Pfft, WHO CARES!

(Future you! That's who cares!)

Let's talk about a few important transpilers

Coffeescript

...The first on the scene

• Ruby-ish syntax

• Much less code

• Long-in-the-tooth (Few/No new ES6+ features)

• Requires your whole team to be on board

Dart

Google's "JavaScript Replacement"

• Types! Woo!

• C#/C++-ish syntax

• Has its own runtime (Dartium)

• Have to use Eclipse (er....)

Bridge.net (or Duoco.de)

C# to JavaScript

• Includes JQuery Support

• Class libraries

• Have to use Visual Studio (er...)

The takeaway of non-js transpilers

• Still compile down to JS
• Totally different languages
• Requires team buy-in
• Requires Specific language knowledge
• Use When:
  • You need an existing library in JS
  • Multi-Platform (Unity/Xamarin/etc)

So what should i look for in a transpiler?

Supersets!

A single, but distinct feature:

Regular javascript is valid

Typescript

ES2015+ with types

• Types! Woo!

• Javascript is valid TypeScript!

• Angular 2 is built using TypeScript

Traceur

ES2015+ with experiments

• Future JavaScript Today!

• Maybe/Maybe Not Future JavaScript Today Gone Tomorrow!

ES2015+ with standard stability

• Future JavaScript Today!

• Follows Web Standards without Experiments

Let's recap

Use non-JS transpilers for:

Use JS superset transpilers for:

• For multiple platforms
• For existing C++/C#/etc libraries

• Use new features inside existing libraries
• Business case!
• Use regular JS in a pinch