22
Javascript Jabber 171 JSJ Babel with Sebastian McKenzie AJ: Do I still sound like an angel, gentlemen? [This episode is sponsored by Frontend Masters. They have a terrific line up of live courses you can attend either online or in person. They also have a terrific backlog of courses you can watch including JavaScript the Good Parts, Build Web Applications with Node.js, AngularJS In-Depth and Advanced JavaScript. You can go check them out at FrontEndMasters.com.] [This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco, New York, and L.A. bid on JavaScript developers, providing them with salary and equity upfront. The average JavaScript developer gets an average of 5 to 15 introductory offers and an average salary of $130,000 a year. Users can either accept an offer and go right into interviewing with the company or deny them without any continuing obligations. It’s totally free for users. And when you’re hired, they give you a $2,000 bonus as a thank you for using them. But if you use the JavaScript Jabber link, you’ll get a $4,000 bonus instead. Finally, if you’re not looking for a job but know someone who is, you can refer them to Hired and get a $1,337 bonus if they accept the job. Go sign up at Hired.com/JavaScriptJabber.] [This episode is sponsored by Wijmo 5, a brand new generation of JavaScript controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development in that Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo 5.] [This episode is sponsored by DigitalOcean. DigitalOcean is the provider I use to host all of my creations. All the shows are hosted there along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent and their VPS’s are backed on Solid State Drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code JavaScriptJabber, you’ll get a $10 credit.] CHUCK: Hey everybody and welcome to episode 171 of the JavaScript Jabber Show. This week on our panel, we have Aimee Knight. AIMEE: Hello. CHUCK: Joe Eames. Skype hates Joe Eames. AJ O'Neal. AJ: Yo, yo, yo. Coming at you live from Provo for one of the last times in a long time. CHUCK: Dave Smith. DAVE: Hey, everyone. CHUCK: I'm Charles Max Wood from DevChat.TV. Jamison is not here so I'm just going to mention it for him. React Rally, go check it out.

Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

Javascript Jabber171 JSJ Babel with Sebastian McKenzie

AJ:

Do I still sound like an angel, gentlemen?

[This episode is sponsored by Frontend Masters. They have a terrific line up of live courses you can attendeither online or in person. They also have a terrific backlog of courses you can watch including JavaScript theGood Parts, Build Web Applications with Node.js, AngularJS In-Depth and Advanced JavaScript. You can gocheck them out at FrontEndMasters.com.]

[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousandtech companies in San Francisco, New York, and L.A. bid on JavaScript developers, providing them with salaryand equity upfront. The average JavaScript developer gets an average of 5 to 15 introductory offers and anaverage salary of $130,000 a year. Users can either accept an offer and go right into interviewing with thecompany or deny them without any continuing obligations. It’s totally free for users. And when you’re hired, theygive you a $2,000 bonus as a thank you for using them. But if you use the JavaScript Jabber link, you’ll get a$4,000 bonus instead. Finally, if you’re not looking for a job but know someone who is, you can refer them toHired and get a $1,337 bonus if they accept the job. Go sign up at Hired.com/JavaScriptJabber.]

[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript controls. A pretty amazing line ofHTML5 and JavaScript products for enterprise application development in that Wijmo 5 leverages ECMAScript5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo 5.]

[This episode is sponsored by DigitalOcean. DigitalOcean is the provider I use to host all of my creations. Allthe shows are hosted there along with any other projects I come up with. Their user interface is simple andeasy to use. Their support is excellent and their VPS’s are backed on Solid State Drives and are fast andresponsive. Check them out at DigitalOcean.com. If you use the code JavaScriptJabber, you’ll get a $10 credit.]

CHUCK:

Hey everybody and welcome to episode 171 of the JavaScript Jabber Show. This week on ourpanel, we have Aimee Knight.

AIMEE:

Hello.

CHUCK:

Joe Eames. Skype hates Joe Eames. AJ O'Neal.

AJ:

Yo, yo, yo. Coming at you live from Provo for one of the last times in a long time.

CHUCK:

Dave Smith.

DAVE:

Hey, everyone.

CHUCK:

I'm Charles Max Wood from DevChat.TV. Jamison is not here so I'm just going to mention it forhim. React Rally, go check it out.

Page 2: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

AJ:

Woohoo.

CHUCK:

We also have a special guest this week and that's Sebastian McKenzie.

SEBASTIAN:

Hey.

CHUCK:

You want to introduce yourself?

SEBASTIAN:

Sure. My name is Ses McKenzie from Australia. I made some JavaScripts thing that people use.

CHUCK:

This JavaScript thing, yes.

DAVE:

That's being modest.

[Laughter]

CHUCK:

There are like two people use it.

[Laughter]

JOE:

I like JavaScript things.

AIMEE:

[Laughs].

CHUCK:

So you want to introduce us to Babel real quick?

SEBASTIAN:

Yes.

CHUCK:

Or do you call it Babel?

DAVE:

Yes, could you just set the record straight and tell us how to pronounce it?

SEBASTIAN:

Yes, it's Babel. I didn't think it was going to be so much controversy over how the name ispronounced.

JOE:

Page 3: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

Why is it Babel? That's what I want to know.

SEBASTIAN:

As in like the origin of the name Babel?

JOE:

Yes, why do you pronounce it Babel?

DAVE:

No, I think he means the origin of the pronunciation. [Laughs].

SEBASTIAN:

Oh.

JOE:

Oh, the origin of the pronunciation. Yes.

DAVE:

We're superficial here. Yes.

SEBASTIAN:

All right. It seems like random people either pronounce it Babel or Babel depending. It's not evenregional. I've found some Americans pronounce it Babel or Babel or like yeah, I don’t know. That'sjust how I pronounce it so.

DAVE:

Does anyone pronounce it 6 to 5?

[Laughter]

JOE:

So I got a funny story about the pronunciation. I thought of course, like the tower it was namedafter the tower, of course. So I've grown up pronouncing it Babel. And I'm telling other people, "No,it's pronounced Babel. That's how you pronounce the tower." Actually, somebody looked it up withthe dictionary and like, "Both pronunciations are acceptable in the,” I don't know, “Oxford Englishdictionary.” It's says both Babel and Babel work. And I had no idea.

SEBASTIAN:

[Chuckles] Yeah, a lot of people like “Ah, isn’t’ that how the tower is pronounced?” I’m like, “No, Ipronounce it Tower of Babel.”

JOE:

Yeah. So there are people out there that pronounce it the Tower of Babel which is obviously wrongbecause I pronounce it Babel.

[Laughter]

JOE:

I was so shocked to find out that like my pronunciation wasn't the one blessed pronunciation of theTower of Babel.

CHUCK:

Page 4: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

[Chuckles]. All right let's see if you can hear this. This is off of Merriam Webster.

Audio:

Babel]

CHUCK:

So Merriam Webster says Babel.

DAVE:

Okay.

JOE:

Well, enough about that.

CHUCK:

So the important things facing the JavaScript community today?

[Laughter]

JOE:

You know what, this is actually a really big deal because I was recording a course on webpack andBabel is a huge part of that. And I recorded half the course pronouncing it Babel and had to goback and just place in the word Babel in like 25 places.

AIMEE:

That's hilarious.

[Laughter]

JOE:

Yes, it took like two hours.

CHUCK:

I can totally see you just prepping for those outtakes. Babel, Babel, Babel, Babel, Babel, Babel,Babel.

[Laughter]

SEBASTIAN:

Oh, yes I was going ask about the outtakes whether or not you had just spliced in like a singlesample of [00:4:55 Inaudible].

JOE:

Yes, the same.

[Laughter]

JOE:

Those are filled very obviously.

CHUCK:

Yes.

Page 5: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

JOE:

Same clip over and over again.

CHUCK:

And here we’re going to splice in Babel.

[Laughter]

JOE:

The volume's wrong. The pitch is all wrong. Early in the morning when my voice is all husky.

DAVE:

Just get someone else to say the word for you.

JOE:

Yeah. [Laughs] Even better. Dave's not saying Babel.

DAVE:

Well, I'm glad we had this show. That was good. Did we mess it up?

[Laughter]

JOE:

That's pretty much the one thing. Other than that everybody uses this. I think we could be done.

CHUCK:

Yeah. No.

JOE:

So, I'm sure most of our audience already knows what it is but why don't you give us a very briefoverview of what Babel is.

DAVE:

And the history.

JOE:

And why it would benefit us.

DAVE:

Yes, maybe a little history for fun.

SEBATIAN:

All right. So Babel started off as a project called 6to5. So I basically started this project 6to5because I realized those are what looked like gaps in my knowledge of various computer science-sy stuff. So I didn't know how passes worked. I didn't know how compilers worked. And also I wasfamiliar with JavaScript. I knew JavaScript but there was this new thing coming out, could be ES6,and I didn't know anything about that.

So I started really low level ware. I’ve decided on to learn about this stuff so I combined it alltogether and decided, hey, could I transpile ES6 into ES5. I wanted to use these features. I want toknow how they work. How can I do this? So I started really low level ware. I would take these really,really simple ES6 features and compile them down.

Page 6: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

So it just started as a learning project and then people started using it. There was like billionfeatures. Then people started using it so I thought I'd build up the support. And then I didn'trecognize that's what the whole range of ES6 syntax. So it started to build up. People started usingit. I'm like, "Oh, this is becoming like a real thing.”

[Chuckle]

SEBASTIAN:

And then I realized that the name 6to5 wasn't really very forward thinking. So once ES6 wascommon place, it would have to be like 7to6.

DAVE:

And 7to5

[Laughter]

SEBASTIAN:

Yes, it was 7to5 and then like…

CHUCK:

No, it's 2015to5.

SEBASTIAN:

Yes, exactly, like they've renamed ES6 to ES2015. And so it would have to be ES2015to5 and thenlike you have the name them just like. If you're going to sell the project, don't base conversionnumbers. That's just so dumb, I mean, hindsight.

So then it was renamed to Babel and with the rename became Babel recap. It started becomingmuch more generic and what it did. So, instead of just being a uniquely ES6to5 compiler, it addedsupport for plugins. So it became yes just a more general JavaScript compiler.

So eventually in the future, Babel will be able to do stuff like modification, optimizations, and allstuff like that. Basically they will just plug in these transformers that transform your code in specificways just by installing an NPM module and specify it in your config.

DAVE:

That is so cool. I just love it. You're inspiring. I just want to make sure everyone caught that. Thereason he wrote Babel or 6to5 was because he didn't know how to do it. Not because he wasalready an expert. I mean that is just so cool, Sebastian. My hats off to you.

SEBASTIAN:

Thanks.

CHUCK:

So, on a project like this, where do you start?

SEBASTIAN:

When I started, there's a whole bunch of libraries relating to this, so I just hodgepodged themtogether. I didn't really understand how they worked. But then as the project grew, I rewrote thoselibraries and so they replaced other people's code with my own. Things like most projects comeand go in the other direction. But it's mainly just like I want to learn about this stuff and what betterways write it yourself.

DAVE:

Page 7: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

So what's the state of Babel now? You mentioned that it's implemented almost all or all of the ES6feature set.

SEBASTIAN:

Yes, so it's past the entire range of syntax. Eventually in the next major version, it’s going to be abig push into these plugins. And so like this plug-in ecosystem I think is going to be a big thing. Itseparates Babel from anything else like you hear about other compilers or transpilerslikeTouchScript or Traceur. I don't like using the web competitor in my space but I didn't really seethose projects as competitors because Babel's scope is much different. Its utility is much differentcompared to the other tools out there.

AIMEE:

So I had a quick question. As we're talking about the supported features, how does Babel line upwith the TC39 process?

SEBASTIAN:

Yes, so like how a proposal’s developed in tandem or…

AIMEE:

Yes. How do you decide what you want to support based on the process and things going throughTC39?

SEBASTIAN:

Yes, so -- oh, I will just give you the background of the TC39 stage process. So the TC39committee, when a proposal is put forth for standardization, there's a series of stages that has togo through from zero being like just anybody had just written a proposal to stage four where it's inthe language. It's been standardized and it's absolutely going to be included.

So each one of these stages signify something. So stage one it's being accepted by the TC39 formore investigation. Stage two is it has multiple vendors have implemented it so multiple browsers. Imight be wrong with this because this is like the spread out of each stage. Stage three is it's beingaccepted. It's still in the draft stage. Then yes, stage four is where it's being finalized.

Babel by default has stage two proposals and above enabled by default. Now that doesn't signifythat these stage two and stage three stuff is absolute guaranteed from inclusion. But in order topromote experimentation with those features then they have to have users. It's much easier forpeople to use it if it's enabled by default, I guess.

And so stage four proposals is implementing Babel. They’re just behind flag. They’re subject tochange. You probably shouldn't be using their production code but you can if you want, I guess,just have to be worried that if it gets rejected then it's probably going to go away.

CHUCK:

You said that it implements all the features of the ES2015. Are there any features that just can't betranspiled?

SEBASTIAN:

I guess there's varying levels. So there are some things that Babel just can't transpile. It can'timplement every single edge case or semantic. So for example, like RR functions [inaudible] asbeing a very straightforward thing to transpile. Like, “Oh it's just a function.” This and argumentsreference like the out of function.

What's not so simple, you can't for instance construct an RR function so you can't do new foo

Page 8: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

where foo may be an RR function and so these sorts of things you can't really like transpile, atleast not in a like a practical way.

If you really want to care about performance and you really want to care about code size and youhave to make some of those sacrifices, it might not necessarily mean you’re just making it, it's adeliberate choice. It might just be that there's no way to implement those semantics in ES5. Sinceif something is just syntax [inaudible] for something else. If you're going to be directly compiled andhave all the exact same semantics then it might not be reason enough for it to actually be in thelanguage itself. It can be expressed in a different way very easily.

JOE:

So like things like Weak Maps come to mind. What about that?

SEBASTIAN:

Yes. So Weak Maps and proxies, they're both true good examples of stuff. So they have moreruntime things. They're not really syntaxed but yes, they implement semantics that absolutely haveto be implemented at the engine level. You could actually compile proxies but the transformationwould be much more intrusive. Weak Maps, you can't really do anything since their wired like directaccess to the garbage collector and stuff like that.

JOE:

Now I had always heard and thought that one of the big reasons for Babel was the fact that theoutput of Traceur was just so unreadable. And Babel always had a goal of producing readablecodes so then it was easier to reason and to understand the code that was produced by thetranspiler. Is that true?

SEBASTIAN:

Yes. I guess. That was the really big thing when 6to5 was released. That was one of the things thatset it apart. That's not to say that the output isn't readable now. Just other priorities have shiftedabove just readable output. If you're just focusing on readable output, you're making way too manysacrifices on stuff like code size and performance. Since you can output more performant code, itwill just be longer or the code, it might not be as readable.

So, at that time it made sense. But now it's just like you really shouldn't be reading your compiledcode anyway. That's just what it comes down to. There's lot a magic that goes on under the hood inlike compilers, transpilers. So you might look at something and think, “Oh, that's wrong.” Butactually if you just change one little tiny thing, it can completely change the way that the code istransformed to an output.

JOE:

So it was a goal initially but not so much later on.

SEBASTIAN:

Yes, basically. Like if it came more down to it, would you care more about your code being pretty oryour code being as fast as possible?

JOE:

So do you usually like have a balance between readability and performance or do you almostalways go for performance?

SEBASTIAN:

It's basically always for performance. There's always going to be ways in which you can make the

Page 9: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

performant code much nicer. And it depends on what you mean by your general code being nicer.Most of the time it’s just you just have to put more effort into it like you have to add in moreconditionals that checks specific structure of the original code. Since there can be some certainscenarios where the original code can be compiled into a completely different set of code that’smuch more readable. And so I definitely think yes, you just have to put more effort into it butdefinitely, you don't really need a sacrifice readable code to get really good performance. Butperformance is basically always the priority. Since if you can't trust Babel for a performance thenthat's failed, I guess.

JOE:

I'll be honest. I haven't particularly looked at the output of Babel recently. I have, actually on acouple of times recently, looked at Traceur. Would you say that Babel in general is still morereadable than Traceur? Has it gotten to where its, like Traceur, there’s some crazy stuff in there.

SEBASTIAN:

Yes. So I think actually one of the problems that Babel will try and retain new lines like in betweencode, it retains those new lines. So if you're separating your code visually to the list of new linesthey’ve retained where Traceur will just blow them all away so your code just looks like one afterthe other. So there are no new lines in between the spacing.

I'm pretty sure this may have changed but they don't retain comments which is another big thing. Iknow in the Angular community, they use it for dependency injection. So that's another scenariowhere just having readable code and retaining as much about the original code as possible canlead to better utility for the consumers.

JOE:

You know that's interesting. I didn't realize it was filling out of formatting so much. I actually was justtalking about just cracking the actual code that Traceur produces like just looking at it andunderstanding what the code does. It does some crazy stuff in there that you have to really sit andstare at to try to figure out what in the world it’s actually doing. Do you feel like Babel is like that?

SEBASTIAN:

In some scenarios, I think so. So I've recently, with a focus on mobile performance, if the codelooks more complex and it's more hard to understand but it's much significantly more performantthen the more performant route is going to be taken.

At the end of the day, you shouldn't really be learning from transpiled output if that's one of yourgoals. I said before how the compiled output can change significantly depending on small structuralchanges and so you may become misinformed if you're learning based on the compiled output; orif you're just debugging stuff then that's the pain. But again, we have source maps and thatalleviates basically almost all the pain.

DAVE:

Right. That makes sense.

JOE:

Now you talked before a little bit about Babel heading into this plugin system where it will do allkinds of things. I know that you know right now it does all kinds of stuff like JSX that isn'tnecessarily a transpilation as we think of it. But that's funny to me because I associate Babel as aplugin into something else. So Babel becoming a plugin into some other framework but then it hasits own plugins.

Page 10: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

DAVE:

It's just plugins all the way down.

JOE:

It's plugins all the way down.

[Laughter]

SEBASTIAN:

Yes, yes. I think I got what you're saying. So you say Babel is not something that's built on anotherplatform rather than Babel itself being a platform?

JOE:

Yes, typically like I use it within webpack or from [inaudible].

SEBASTIAN:

Oh, right. Yes, I guess it's sort of like that. But that was actually one of the decisions that I knewthis was the direction that made most sense to the project on whether or not I'm creating a newone and then having this set of ES6 transforms on top of this. And it didn't really make much senseand so like in the next major version of Babel, basically nothing is going to be enabled by default.You don't have to opt-in to each transformation.

DAVE:

Sounds familiar.

SEBASTIAN:

[Laughs]

DAVE:

No, I mean the ESLint project is doing the same thing, right?

SEBASTIAN:

Yes, exactly. It's a much more powerful approach. You're not as opinionated. And in order tofacilitate moving the internal modules out, you end up having to create a really powerful public APIthat can perform the same functionality that you were using internally. So not only does yoursystem become much more plottable but also because it's much more stable and powerful as aconsequence of just removing these things out.

DAVE:

So what was one of the ES6 or ES2015 language features that you found the most difficult toimplement in ES from going to 6to5?

JOE:

Which one made you curse Yehuda Katz?

[Laughter]

AIMEE:

This is on my list of questions too. I really wanted to know this.

SEBASTIAN:

Page 11: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

Probably block scoping so Let and Const. There's a lot that goes into it. That's the one transformeror one feature that is being iterated on a lot. I'm like, “Okay, I think I'm done. I don't think there'sany bugs in this.” Then I'll be like or wait a couple of weeks where I go, “Oh, so good.” It's stableand then I'll hear something really fundamentally broken about it and I would just be like, “Oh, shit!”And then I'll have to go through and rewrite it. I think I've rewritten it probably about four or fivetimes now, mainly just because the logic becomes so dense. And in order to produce the bestoutput, the most clean, a lot of effort has to go into it and a lot of edge cases need to be handled tooutput the simplest code.

DAVE:

So like with Let and Const, you just end up having tons of functions nested?

SEBASTIAN:

Yes. Like even just like wrapping stuff in functions is it seems easy but then you have to account forwhat if the thing that you're wrapping has a return in it. What if it returns from the function you'vejust wrapped it in function so you then have to propagate that return?

But what if it's a continuous? So you're continuing from inside the loop that has to be done as well.But what if you've got break that also has to be handled? But then what if you have labels? I’msurprised by how little people know about labels in JavaScripts. Labels allow you to just label aloop and then break out of it when you've deeply nested it.

AJ:

Oh, yeah.

SEBASTIAN:

And so they need to be handled as well. So you end up having to like re-implement all of this stuffwhere you're just propagating a whole bunch of stuff and this is just all consequence of you just likewrapping it at a function.

DAVE:

What about exceptions? Were they hardly there too?

SEBASTIAN:

Exceptions also like bad…

DAVE:

Your system?

SEBASTIAN:

It's a merely inadvertent function that's not like a sync stuff going on so that just works but I thinkblock scoping has definitely been the one that's being very painful.

JOE:

That sounds really hard.

DAVE:

Yes.

JOE:

What about destructuring? Was that hard to do?

Page 12: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

SEBASTIAN:

Not really. Destructuring is fairly straightforward on what it turns into. Some of the semantics isoverlooked. So when you're destructuring using the array destructuring, it can actually take in anyiterable object. So, that iterable object - it could be an array, it could be a generator. In order tosupport that, you have to output some extra code. Babel does that by inserting little helpfulfunctions at the top of your file and then it uses those so as to like outputting the code multipletimes.

DAVE:

Oh, yes.

SEBASTIAN:

So it pants a lot of that stuff to the runtime mainly because you just can't tell when you're compilingit. Like at compiled time, what that's going to be. Yes, so that stuff is fairly straightforward.

JOE:

Just make note everyone. Sebastian said destructuring was easy.

DAVE:

That's easy.

[Laughter]

JOE:

Do you find yourself constantly going back with some features and implement it and then youdiscover new used case then you have to change something. And then you go through this 50times and still waiting for yet one more scenario you didn't think of?

SEBASTIAN:

It was very much like that at the start of the project ES 6to5. The JavaScript language has aspecification that basically lists out everything that should work. It's very specific. When I first sawthe project, I had no idea how to read any of that stuff. I was forced to because people are like,“Hey, your behavior is wrong.” I’ll be like, “Why? Prove it.” And then they'll link to the specificationand I'll be like, “Ah, this thing does this, this does this.” So I’m going to be like, “I don't understandthis. I’ll take your word on it.” And so it forced me to learn how like how to read the specification.

And I feel confident now that if I would implement a new feature, I could follow it exactly from thespecification to catch all possible cases. So if something just wasn't supported didn't work, it wouldbe a consequence of just a bug rather than lack of oversight of that specific feature.

DAVE:

So do you like to read this spec now for fun?

SEBASTIAN:

Not so much for fun. More like when people yell at me that something's broken or not behavingcorrectly.

DAVE:

Speaking of the spec, do you ever feel like you're engaged in a Sisyphean task of doing all thiswork only to have JavaScript runtime implementers subsume your work by implementing it natively.I mean eventually every feature of Babel or Babel, excuse me, that exists today should beobsolete, right? When runtime's all picked it up natively?

Page 13: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

SEBASTIAN:

I'm not quite as pessimistic in my thinking of a lot of this stuff. So I guess that goes back to thatBabel is more than just like an ES6 compiler. It can do more than that. Babel is basically alwaysgoing to be bleeding edge. It's always going to support all the latest and greatest features and allthe proposed features before they're basically in any native runtime.

And not only that, people you're probably going to be supporting all the browsers to the end oftime. There are little mobile browsers so then that I think they’re rarely updated especially in themost third world countries that have much older phones that it’s hard for them to have JavaScriptlike on them let alone like the latest version of Chrome. There's always going to be room forcompiling this down.

I don't see this like a bad thing. It's a standard for reason. It can be implemented in browsers muchmore performantly. So I think Babel has barely a niche there and it doesn't become irrelevant justbecause the browsers support this stuff.

DAVE:

Makes sense.

AIMEE:

So cool story that I heard that I think would be interesting to share. You want to tell people how youended up getting into Babel, why you started writing it?

SEBASTIAN:

Yes, so I've read there’s a bunch of projects right as I was finishing school. Yes.

AIMEE:

You said you just got bored in class and you did this just to like stay productive while you were inclass or what?

SEBASTIAN:

Yes, I was finishing my final year exams. I didn't really like school. It was boring. When I was in likehistory class not listening, I was doing Babel which at the time I was really stupid. I should bepracticing my school work but I was this incredibly lucky where it's paid off.

AIMEE:

Maybe.

DAVE:

We have, we have your boring teacher to thank.

[Laughter]

AIMEE:

Yeah, thank you.

SEBASTIAN:

Yes.

AIMEE:

You should just say you're really good at multitasking.

[Laughter]

Page 14: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

SEBASTIAN:

I wish.

DAVE:

It sounds like he was single-tasking.

[Laughter]

AIMEE:

Yeah. Okay so one other question I was going to ask. When we started talking about Traceurearlier, I feel like most people know this but just in case, can you talk about the difference betweenTraceur and Babel?

SEBASTIAN:

Yes, so Traceur is just like just a normal ES6toES5 compiler. And so Babel is more flexible in theplugins. So I've talked a lot about that.

The actual difference is between how it transpiles. So Babel supports a much larger range offeatures. So a lot of the latest proposals implementing Babel, they're not necessarily implementedthere. A big difference is I think it's increased adoption Babel is like Babel's very easy to use. Thedocs are very clear in how you use it with your various integrations like your module system, yourbuild system. There’s plugins folder to make it as easy as possible.

I've personally before I started Babel 6to5, I tried to use Traceur and I just couldn't get it to work.I've seen a lot of people have the same experience with it. It's an awesome project but very hard touse. There's lack of documentation. And so yes, that's probably the biggest one and the readableoutput is supporting more. Yes, it is the big difference I think that sets the projects apart.

DAVE:

So you talked about making Babel more pluggable in the future. What other cool features shouldwe be on the look out for that might be coming down the pipe?

SEBASTIAN:

So I think there's going to be like a really big push to code optimization and modification. I thinkthere's like a lot that can be improved on. So it's not about building bigger tools. I think then it'sreally more focused on building better tools in the JavaScript community rather than adding moreof them. So I guess this is making Babel like really good for this kind of stuff. I think there’s muchmore that you can do with modification that can have much larger gains than what's currentlyhappening.

And as well as carry optimizations, so making it carry much more performance ahead of time andmaking trade offs that the browsers can't necessarily make. Like making certain decisions abouthow your code is executed more to make it more faster. So a lot of stuff like that. Yes, I think bothof those are very powerful and haven’t really been looked at much in the JavaScript world.

JOE:

Are there any plans to build Linting into it?

SEBASTIAN:

Yes, so I know [inaudible] tossing out between that actually. So it might appear like Linting ismassively out of scope for a project like Babel or Babel just is a compiler. It shouldn't worry aboutlinting or checking style.

Basically, it comes down to when you're doing code transformations, you need to be doing, use this

Page 15: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

process, collect static analysis where you're basically checking the code, checking what's around itand inferring information just based on what the code looks like. So you're doing the core conceptof linting in the first place. And so you're doing a lot of the linting work already. Most of the API'salready there.

And so I'm not sure. I think there has to be really compelling reason for Babel to do it. I'm tossingout whether or not beta integration with something like ESLint would be a good idea or whetherjust like implanting Linting in core makes sense. I definitely think there's room for more and haveinvestigation on that.

CHUCK:

So I'm wondering when does ES2015 become finalized because it's currently in draft, isn't it?

SEBASTIAN:

Yes, that was finalized I think back in March. Yes, so basically everything in ES6 is now beingstandardized as official.

CHUCK:

Okay, so then we're looking at ES2016 or ES7 or whatever we want to call it?

SEBASTIAN:

Yes, so as the name transitioned from ES6 to ES2015 have implies that it's sanctuary for more of ayearly approach to these specifications which means that yes every year there's going to be a newone released. The ES2016 is not going to be as dramatic as ES5 to ES2015 but there'll be muchmore incremental additions.

AJ:

So do you think that these standards are actually going to be implemented by browsers? Becauseit seems like some of the things that have come along and I don't know if they're still in the spec ornot but some things that have just come along, they seemed like a really good idea at the time.Because that was what was hot and that's what people were doing like observables. And theneverybody was like, “Nah, who cares,” six months later.

SEBASTIAN:

Yes, so I actually think this is one of the big areas where transpilers play into this. Where it allowsusers and developers to use its features and investigate the practicality and whether or not theyshould actually be in this specification. So some people may be saying, “Oh, ES2015, this feature'scrap,” pretty lack of hindsight in how it would be used or foresight in how it’d be used in the futureand how it interacts with other language features.

But I think as more people start to use things earlier, we'll see much more feedback going into thecommittee. I think browsers are obligated to support this stuff. If for example Firefox implementssomething and Chrome doesn't, people are going to be just using - Firefox users will get it but itjust won't work in Chrome. Those are the competitors.

AJ:

[Coughing] Microsoft Edge, Safari, Android.

[Laughter]

SEBASTIAN:

Yes, definitely. Microsoft Edge implanting basically like everything. So other browsers have to playcatch up if they want to stay to be out, to be competitive. These browsers and vendors are involved

Page 16: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

in the committee process so if they have large objections to it then they'll raise them. If they don'traise the objections and then decide later, “Oh, we don't like this,” then that's kind of too late. Youhad your chance. Get over it, basically.

AJ:

Well, I actually hope that if there is a major objection after the fact that they just don't do it becauseif a browser vendor decides, “You know what, that was a dumb idea and we're not going toimplement it,” then at least you know that it's not going to work everywhere so you can't use itanyway.

SEBASTIAN:

[Chuckles] Well, then you'll just use the transpiler.

AJ:

Well, maybe you will.

SEBASTIAN:

[Laughs] Most people will if you really want that feature, you transpile it. So yes, I think it's going tocome to the point where just like most people are transpiling everything by default just becausethey don't want to trust the browser support. But then I think it will come to a time where likerecently or like the last few years, companies have been dropping support for Internet Explorer 8,9, so on and so forth.

AJ:

Even big companies like Microsoft.

SEBASTIAN:

[Laughs] Yes, they're just dropping support for all the browsers. I think you'll have a baseline andyour basic compiled on to that baseline. Or if you want to get really complicated and advanced oradd a little more complexity to your system, you'll have different bundles for different browsers andserve them independently like using the latest version of Chrome. We know that other functionswork in that. I'm going to serve you a different bundle that just has [inaudible] functions in it, justplain. They're not transpiled at all. I don't think the average…

AJ:

So we're going to see like a patchy mod Babel, Babel?

[Laughter]

SEBASTIAN:

Maybe. I don't know. I don't think most developers are going to be doing that. I think it's only goingto be the tech giants almost that can justify having a system that complicated. I know there a lot oflike big tech companies are already doing that. They ship different bundles to different browsersanyway, so adding in transpiler features so it's such a big deal. But I think small companies likelearned developers, startups, I don’t think they're just like not going to bother and they'll just goingto compile to that baseline. Maybe you can't justify the additional complexity like it just becomeslike a really big mess.

AJ:

So currently, do you see Babel as more for something like really experimental developers that wantto play with new features or are you seeing it more as like this is a production tool that you should

Page 17: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

be using.

SEBASTIAN:

Yes, I definitely think it's - this answers as well the previous question of what separates Babel fromTraceur. I think the marketing is mainly like a big thing. I'm seeing Babel as marketed since day oneto be something production-ready that you can use in your applications with confidence. I guessthat also ties back to the performance thing. If you’re using production, you care aboutperformance and so optimizing for those used cases. I think Traceur was also being marketed as abit more experimental whereas Babel has been pushed to be production-ready from day one.

AJ:

Cool. And the end.

CHUCK:

[Laughs]

JOE:

Is there anything we should have asked that we haven't?

SEBASTIAN:

Ah, TypeScripts. Oh, man.

JOE:

Oh, yes and JSX.

AJ:

Angular too.

SEBASTIAN:

Oh, yeah.

JOE:

So, TypeScripts?

AIMEE:

Yes, tell us your thoughts on TypeScript.

SEBASTIAN:

Yes, so TypeScripts. I shouldn't have said it like that.

CHUCK:

[Laughs]

SEBASTIAN:

The Babel team communicates a lot with Jonathan Turner. He's the head of TypeScript. And so inthe future, I see more collaboration between the two projects, definitely since they’re not really incompetition with each other. So TypeScript, the scope overlaps with Babel a bit but TypeScript istype checking and it just happens to have a transpiling component to it. And so you can use Babelas that transpiling component and use TypeScript for the type checking.

I hear a lot like Babel versus TypeScript like TypeScript is just ES6 with Types. It's not really. The

Page 18: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

difference between the way Babel would transpile as ES6 and the way TypeScript does, soTypeScript is much, much more lenient on how it transpiles it. They're a lot less spec compliant. Sothey've made trade-offs in that. They haven't been made in Babel for one reason or another.

DAVE:

How much of your personal time is spent on Babel right now? All of your time, really?

SEBASTIAN:

I guess that actually ties on how Babel is developed. I started out like in my free time and thenbasically ever since I started it, it’s been like that. Just like just spend the afternoons or weekendsworking on it. But recently I've joined Facebook where I'll be working partly or mostly to developand maintain Babel which gives me a lot more focus and time to do this kind of stuff.

Still basically my present time is consumed by Babel shifting that where I'll be able to work on otherthings in my spare time. Other projects like I don't really have time for other open source projectssince I'm spending all my time maintaining Babel. And so I'm really excited for that. And I'm reallyexcited to be able to spend more time making Babel as stable as possible and as powerful aspossible.

DAVE:

Is there any chance we'll see you joining TC39?

SEBASTIAN:

I have no idea.

DAVE:

Well, you got my vote.

SEBASTIAN:

Thanks.

CHUCK:

Before we get to picks, I want to take some time to thank our silver sponsors.

[This episode is brought to you by Code School. Code School offers interactive online courses inRuby, JavaScript, HTML, CSS and iOS. Their courses are fun and interesting and includeexercises for the student. To level up your development skills, go toJavascriptJabber.com/CodeSchool.

[This episode is sponsored by TrackJS. Let's face it. Errors cost you money. You lose customers, serverresources and time to them. Wouldn't it be nice if someone told you when and how they happen so you couldfix them before they cost you big time? You may have this on your backend application code, but what aboutyour frontend JavaScript? It's time to check out TrackJS. It tracks errors and usage and helps you find bugsbefore your customers even report them. Go check them out at TrackJS.com.]

CHUCK:

All right. Joe, do you want to start us off with picks.

JOE:

You betcha. I have one main pick today. And that is that I'm going to be doing some training onAngular for a company called Primitive.io. It’s like in a month. It's a two-day virtual classroomtraining scenario like six hours each day for a couple of days. Now, it’s like limited class size. I'mactually really excited being able to teach a class and being able to interact with the students rather

Page 19: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

than just speaking in front of a ton of people. So I'm pretty excited about it. Good way of leveling upone's skills. You can register at Primitive.io. I think they're offering a heavily discounted rate rightnow for the class. So that's my main pick.

My second pick is going to be the book Armada which I feel weird picking it because I've beenreading it. I'm about 20% of the read-through and I'm completely bored. But I know that if I powerthrough that I will like it. I don’t know if any of you guys loved Ready Player One. I've got it in frontof the room. I'm really disappointed with how he started out the book. The first 20% is really slow.But I believe in the author because Ready Player One was so awesome. So I'm going to pick itanyway.

CHUCK:

All right. AJ, you have some picks for us?

AJ:

I do. So I will pick just two things today. One, I have been listening to Dale Carnegie's How to WinFriends & Influence People and if you know me you know that it will probably have zero effectbecause when you multiply anything by zero you still get zero.

DAVE:

I was about to ask if you've been reading that because I felt, you know, pretty friendly around you.

[Laughter]

CHUCK:

And influenced.

DAVE:

Yes, I felt influenced.

AJ:

Oh, that's good or bad or what it is. Anyway, so I'm going to pick that. I think it's in my top five ofbooks like self-help type books that a person should read along with Innovator's Solution andInfluencer: The Power to Change Anything. I don't know what other two I would put in there. Maybecolor code for fun, just for fun. It's just pop psychology.

Anyway and then [makes a trumpet sound] in case you haven't heard, which you haven't heard,there's a new podcast in town, Web Security Warriors. If we're lucky, that should go out onDevChat.TV around the same time as this episode I think, maybe.

CHUCK:

I might be able to confirm that. Yes.

AJ:

So check that out. I think we still need to put an intro and outro sound clip to it and then the firstepisode will be ready to go.

That's my picks for today.

CHUCK:

Yes, so if you want to learn more about Web Security, check out Web Security Warriors. If you don'tthink you need to learn more about Web Security then definitely check out Web Security Warriors.Aimee, do you have some picks for us?

Page 20: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

AIMEE:

I do. Mine is another plug/pick. So I think it was two weeks ago, I picked Nodevember and that'sgoing to be my pick again this week because it's back in National where I went to my big camp,absolutely love National. So if you're looking for a conference to attend in November about Node inJavaScript, how about check out Nodevember. And that's it for me.

CHUCK:

All right. Dave, have we heard your picks yet?

DAVE:

No, you haven't but you will if you want to.

CHUCK:

Probably even if we don't want to.

DAVE:

Yes, you're going to hear them one way or another. I guess you could press the plus 15 secondsbutton on your phone right now a couple of times and you'll probably be happier. Anyway, no, youwon't be happier. You'll be very sad. So here's what I've got for you today.

I’d like to pick up an oldie but a goodie called The Hitchhiker's Guide to the Galaxy, one of myfavorite books of all time. I picked it up again and started reading it and just remembered why I loveDouglas Adams so much. Huge fan of The Hitchhiker's Guide to the Galaxy.

And then the second pick is actually a two-part pick. I would like to pick Yellowstone National Parkwhich if you haven't been to Yellowstone National Park and you can, you owe it to yourself to checkit out. I went this weekend with my family. What an incredible weird place, full of cool, just crazy,cool stuff. You should definitely check it out.

I can't think of a better time than when you're going to be in town for React Rally at the end ofAugust here and about when this podcast comes out. It will be three weeks away. You owe it toyourself to get an extra day, drive four and a half hours up to Yellowstone and check out that Parkwhile you're here for React Rally. Those are my picks.

CHUCK:

Very cool. I've got a couple of picks. Just really quickly as many of you know I have launched RailsClips and I did a Kickstarter campaign to get it going. I promised backers who backed to the certainlevel that I would do them a favor. So my two picks this week are favors.

The first one is if you're interested in learning Angular and you live in Switzerland, there is a courseout there taught by Daniel Egger. And I'm sure I said that not German enough. Anyway, I'll put alink at the show notes. Definitely go check it out if you're looking to learn Angular.

The other one is long time follower. He actually did interviews of all the Ruby Rogues several yearsago. His name's Thom Parkin and he's looking for job. So he's been programming, he said sincebefore the original Star Wars movies which means that he's been programming longer than I'vebeen breathing. He's been doing DOD contracts and he's looking for something else. So if youknow of some work and you're looking out for that, go ahead and check the show notes. He'sParkin, that's @parkint on twitter. So, yes, let him know and yes, those are my two picks this week.

Sebastian, what are your picks?

SEBASTIAN:

Ah, so I've got two. So, the novel The Martian by Andy Weir.

Page 21: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

CHUCK:

So good.

SEBASTIAN:

Yes, awesome. I barely ever read but I started reading it and I've read it in one sitting. It's beingmade into a movie but you should definitely read the book.

And my second pick was I tried Five Guys for the first time yesterday and it was amazing.

DAVE:

[Whistling]

SEBASTIAN:

Five Guys.

DAVE:

Love those burgers.

[Laughter]

CHUCK:

Made your life better, didn't it?

SEBASTIAN:

Definitely.

DAVE:

Where? Which location?

SEBASTIAN:

London.

AJ:

Oh, they're expanding.

SEBASTIAN:

Yes, they've actually got quite a few locations in the UK actually.

DAVE:

Oh, nice. Just my humble opinion: best burgers on Earth, even better than the ones I make.

CHUCK:

Yes. Good stuff. All right. Well, thanks for coming, Sebastian. It was fun to talk about ES6/2015whatever it is and Babel.

SEBASTIAN:

Thanks for having me.

CHUCK:

All right. We'll catch you all later.

[Hosting and bandwidth provided by the Blue Box Group. Check them out at BlueBox.net.]

Page 22: Javascript Jabberdevchat.cachefly.net/javascriptjabber/transcript-171-jsj...5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo

[Bandwidth for this segment is provided by CacheFly, the world’s fastest CDN. Deliver your content fast withCacheFly. Visit CacheFly.com to learn more.]

[Do you wish you could be part of the discussion on JavaScript Jabber? Do you have a burning question forone of our guests? Now you can join the action at our membership forum. You can sign up atJavaScriptJabber.com/Jabber and there you can join discussions with the regular panelists and our guests.]