Jacob Lowe

jsla - Module of the Month: Babel

by Jacob Lowe on

Module of the month was a small series at jsla in which people of the community would give talks about a specific module in the nodejs ecosystem. This months talk was about Babel.

Transcripts (auto-generate)

  • 00:05
    I would be talking about a Babel or
  • 00:08
    Babel depends on where you're at and how
  • 00:11
    you call it but essentially Babel is a
  • 00:15
    trance compiler that will take next
  • 00:18
    generation JavaScript and turn it into
  • 00:20
    readable es5 JavaScript which means that
  • 00:23
    you can then run it on node or on a
  • 00:27
    browser at least some of the more modern
  • 00:30
    browsers there's still some that you
  • 00:32
    can't run it on and I say next
  • 00:35
    generation because it's not only es6 but
  • 00:38
    actually it's also es7 because like es6
  • 00:42
    now has been like finalized and we're
  • 00:45
    going to start seeing it roll into some
  • 00:46
    of the newer browsers usually the ones
  • 00:48
    that we use but es7 is a lot of
  • 00:52
    proposals and whatnot but a lot of the
  • 00:54
    people behind babel are you know at the
  • 00:57
    forefront of this so they're writing
  • 00:59
    these things out so that they can start
  • 01:00
    playing with these different proposals
  • 01:03
    but they're behind experimental flags so
  • 01:05
    don't worry you don't have to mess with
  • 01:07
    them if you don't want you so here's a
  • 01:10
    website there's like a ton of good
  • 01:13
    instructions on here on how to use this
  • 01:15
    thing I'm going to show you a few
  • 01:16
    examples of how to use this thing that
  • 01:19
    hopefully will apply to something that
  • 01:21
    you can actually start using so the
  • 01:25
    first thing is that it's a COI tool but
  • 01:29
    you can also use it programmatically
  • 01:30
    with in JavaScript I'm going to be using
  • 01:32
    the CLI tool but pretty much the options
  • 01:34
    come across the same exact way so first
  • 01:37
    off we need to start writing some es6
  • 01:39
    code so let me write so those classes in
  • 01:45
    es6 oh I'm gonna lie to class I'm just
  • 01:47
    going to make a class foo and it's going
  • 01:51
    to need a constructor and as you can see
  • 01:54
    this doesn't look like JavaScript the
  • 01:57
    stuff that we write this is totally
  • 01:59
    different and actually what I want to do
  • 02:01
    is pass them like options to this but
  • 02:04
    I'm also going to give it like a default
  • 02:05
    argument so that way it's always an
  • 02:07
    object I can count on it being that and
  • 02:09
    we'll just console.log that out just to
  • 02:13
    say just to show you that this is
  • 02:16
    working so type of
  • 02:18
    options and we're also going to do like
  • 02:23
    a basic like greet function part create
  • 02:26
    method we're going to use we're going to
  • 02:29
    pass an argument of name and then we're
  • 02:32
    going to return a hello name as you can
  • 02:41
    see there i'm actually using string
  • 02:42
    interpolation nu te s six so now we want
  • 02:47
    to actually do something with this so
  • 02:49
    I'm just going to say Const foo is equal
  • 02:53
    to new foo I'm going to pass anything to
  • 02:56
    it so that way we can see default
  • 02:58
    arguments working and then we're going
  • 03:00
    to say console.log and then food 3gs la
  • 03:11
    now let's say I want to run this on node
  • 03:15
    I'm a no developer I just want to run an
  • 03:18
    es6 file so babel comes with not only
  • 03:21
    the Babel command which as you can see
  • 03:24
    it will do nothing if I don't pass
  • 03:26
    anything but also Babel node which is
  • 03:30
    one's kind of straightforward
  • 03:30
    essentially you're running Babel inside
  • 03:33
    of node or you're essentially doing a
  • 03:35
    wrapper around node that will then
  • 03:37
    transform all of your code into es6 or
  • 03:40
    transfer all of your ESX code into es5
  • 03:42
    so it can be run on node so all I'm
  • 03:45
    going to do is point it towards this
  • 03:47
    file which is in Babel node directory
  • 03:49
    let's see and then index or is it mean
  • 03:54
    what is it mean
  • 04:03
    yeah ah sorry about that sorry guys I'm
  • 04:21
    terrible at spelling and then I got to
  • 04:26
    fix the other one again alright cool so
  • 04:30
    we got the type of object so actually
  • 04:32
    didn't pass anything there the default
  • 04:34
    arguments worked in hello JSL a witch
  • 04:36
    did string interpolation but as you can
  • 04:38
    see I didn't it didn't show any of the
  • 04:40
    compilation it did it on the fly while I
  • 04:42
    was running inside of node let's say
  • 04:44
    you're not lucky to use note at your
  • 04:46
    your work or any of your projects you
  • 04:49
    just write client apps so you need to be
  • 04:52
    able to trans compile this which is the
  • 04:55
    regular Babel command so what I'm going
  • 04:57
    to do is I'm going to take my contents
  • 04:59
    in this file and I'm going to go over
  • 05:01
    into this file here we're just gonna
  • 05:03
    paste over what's here so we already
  • 05:06
    know a console logs out object and hello
  • 05:08
    j SLA so what I'm going to do is I'm
  • 05:11
    going to run instead of Babel node I'm
  • 05:14
    just going to run Babel and then I'm
  • 05:15
    going to pass it my file which was in
  • 05:20
    extra j/s now as you can see it just
  • 05:22
    output it to the standard out what I'm
  • 05:24
    going to do is I'm actually just going
  • 05:25
    to copy this right now and it's readable
  • 05:30
    to a certain extent there's some crazy
  • 05:32
    stuff in here and I'm going to take this
  • 05:36
    over into my browser so you can see this
  • 05:39
    is just es5 code and we have the console
  • 05:43
    log object in hello jla so we trans
  • 05:46
    compiled es6 code and we're now running
  • 05:49
    it inside of a browser granted you don't
  • 05:51
    want to copy and paste it from your
  • 05:53
    standard out and then paste it into your
  • 05:55
    browser's console that's not logical so
  • 05:59
    well you can deal with Babel is you can
  • 06:02
    actually output it to a file so I'm just
  • 06:04
    going to do it out to a file called
  • 06:06
    compiled without the dash
  • 06:11
    it's going to be dash oh so da show is
  • 06:14
    output or you can do dash dash out push
  • 06:17
    output file its going to run so it
  • 06:21
    compiled it and we'll just run that on
  • 06:22
    node with regular note command and then
  • 06:26
    compilation and then compiled and as you
  • 06:29
    can see it's the same thing so that ran
  • 06:31
    a lot faster I don't know if you noticed
  • 06:33
    with the last time I ran it ran pretty
  • 06:35
    slow because it was compiling the files
  • 06:36
    and then running them so let's say
  • 06:39
    you're like using something like a
  • 06:41
    puddle electron project well you don't
  • 06:44
    really have access to node so you can't
  • 06:46
    really like be like oh I'm going to use
  • 06:47
    babel node to run it in that instance
  • 06:51
    you don't really have a way to you
  • 06:53
    besides there's this thing called a
  • 06:56
    Babel register which will allow you to
  • 06:59
    register all of the required statements
  • 07:01
    inside of node and pretty much hook into
  • 07:04
    that and then compile those things while
  • 07:06
    you're essentially requiring them in of
  • 07:09
    course it's a little bit slower you're
  • 07:11
    doing compilation but it does work so i
  • 07:14
    have this required transform slightly
  • 07:17
    es6 file here it's just another foo
  • 07:20
    class i'm doing some more stuff with it
  • 07:23
    passing some arguments to it and pulling
  • 07:25
    things out but also have this index file
  • 07:28
    so this is es5 it's actually a little
  • 07:31
    bit of es6 just the cost but i'm running
  • 07:33
    in I ojs so I can actually use those
  • 07:36
    type of things and as you can see like
  • 07:39
    I'm just using required it's it looks
  • 07:41
    like basic codes that maybe you work
  • 07:43
    with on a day-to-day basis except i have
  • 07:45
    require Babel and then / register so
  • 07:49
    what I can do with this is actually now
  • 07:51
    I can run node and then the required
  • 07:55
    transform and then the index file and as
  • 08:00
    you can see it console logged all my
  • 08:02
    stuff out we can go back and verify that
  • 08:04
    those are the right things but actually
  • 08:06
    I'm able to run es6 code in files that I
  • 08:10
    require so the base the only thing that
  • 08:12
    sucks about this is that the base file
  • 08:13
    your entry point file has to be es5 you
  • 08:16
    can try to es6 inside of it because
  • 08:18
    essentially we're just overriding the
  • 08:19
    requires statement so that's really cool
  • 08:23
    so you're able to now use it inside of
  • 08:26
    node you're able to use it inside of a
  • 08:29
    client app there's actually things for
  • 08:31
    doing like if you were to use browserify
  • 08:35
    there's babe laughs I there's gold Babel
  • 08:38
    they have plugins for everything it's
  • 08:40
    really cool it's like production ready
  • 08:43
    there's a ton of people already using a
  • 08:45
    Babel and it's you know Yahoo's using it
  • 08:48
    I actually have a list here because they
  • 08:51
    have it all over their website
  • 08:53
    cloudflare Netflix Airbnb is actually
  • 08:56
    using some really cool projects ghost
  • 08:58
    Adam the editor which I would have been
  • 09:01
    editing the stuff on so it's really cool
  • 09:03
    I suggest you know even if you don't
  • 09:07
    really like doing trance compiling stuff
  • 09:08
    you want to play around with the new
  • 09:10
    version of the language download Babel
  • 09:12
    and just play around with it and see if
  • 09:14
    you can actually make something thank
  • 09:16
    you