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
Made with Slides.com