Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

What is Transpiling?

3:21 with Isaac Lee Morris

You might have encountered the word “transpile” when learning about tools like Babel, but what exactly does that word mean? In this video, we’ll define transpiling and learn how it’s different from compiling.

Resources:

Babel “Try it out”
Babel setup
Babel plugins

ES2015 compatibility
ES proposals

  • 0:00

    [MUSIC]

  • 0:04

    Hi I'm Isaac Lee and welcome to getting started with Babel and ES2015.

  • 0:10

    In this workshop I'll show you how transpileres like Babel let you use

  • 0:14

    the JavaScript features of tomorrow in your applications today.

  • 0:19

    So what is transpiling exactly?

  • 0:22

    Transpiling is simply the process of taking one language and

  • 0:25

    converting it to another.

  • 0:27

    If you've used Sass to streamline your CSS workflow,

  • 0:30

    you have transpiled Sass code in the CSS.

  • 0:33

    And if you've used CoffeeScript,

  • 0:35

    then you've used their transpiler to generate JavaScript.

  • 0:39

    Although they sound similar, transpiling and compiling are not the same thing.

  • 0:45

    Compiling converts one language to another at a lower abstraction level,

  • 0:50

    like Java to bytecode.

  • 0:52

    Transpiling, on the other hand,

  • 0:54

    converts one language to another at the same abstraction level, like Sass to CSS.

  • 0:59

    Both are high-level languages that serve the same purpose, styling HTML.

  • 1:06

    So why is transpiling so important and where does Babel fit into the picture?

  • 1:11

    Well, it all comes down to compatibility.

  • 1:14

    While ES2015 is the current version of JavaScript,

  • 1:18

    not all browsers have fully implemented its features.

  • 1:22

    To illustrate this, I'm gonna check the latest ES2015 compatibility tables.

  • 1:27

    You can find the link to these tables in the teacher's notes below.

  • 1:31

    We can use compatibility charts to check which ES2015 features

  • 1:36

    are supported by each of the major browsers.

  • 1:39

    At the time this video was recorded, Safari only supports 53% of ES2015.

  • 1:46

    Even the latest stable version of Chrome,

  • 1:49

    version 50, doesn't fully implement it at just 93%.

  • 1:54

    With these levels of support,

  • 1:56

    it generally wouldn't be a good idea to start using ES2015 in our applications.

  • 2:01

    Fortunately, that's where Babel comes in.

  • 2:04

    Babel allows us to write our applications with ES2015, then transpile them into ES5,

  • 2:10

    which is fully supported by all major browsers.

  • 2:14

    Let's take a look at the Babel website, at babeljs.io.

  • 2:20

    The Babel website is a great reference on how to use Babel with

  • 2:23

    various environments and tools.

  • 2:26

    It also offers great documentation on ES2015 features, and

  • 2:30

    a sandbox to try them out.

  • 2:32

    It's an excellent resource for learning ES2015, and

  • 2:36

    I have included a link in the teacher's notes below.

  • 2:39

    I'm going to use the Try it out feature to convert ES2015 into ECMAScript 5.

  • 2:45

    For this example, I'll define a short arrow function called,

  • 2:49

    appropriately, myArrowFunction.

  • 2:56

    This function will simply return the string Hello, ES2015.

  • 3:04

    As you can see, while I type, Babel is transpiling on the fly.

  • 3:10

    The end result is a standard ECMAScript 5 function that will run in any browser.

  • 3:16

    In our next lesson, we'll learn how to configure Babel using a Babel RC file.

You need to sign up for Treehouse in order to download course files.

Sign up