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