Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Babel 1
  • Overview
  • Transcript

4.1 Conclusion

It's easy to get excited about a new toy like ES6. With Babel, we don't even have to wait to start using these new features. It's important, however, to take a longer look at Babel in order to make sure that it is right for our projects.

In this lesson, we'll be exploring the transpiled ES5 code that Babel outputs. We'll look at this alongside our ES6 source code so that we can understand what is going on under the hood. We really need to take the time to understand the way code is generated, if we are going to use a transpiler, to make sure we are writing in a sensible way.

My name is Jason Green and from all of us here at Tuts+, thanks for watching.

Related Links

1.Introduction
1 lesson, 02:53

Free Lesson
1.1
Introduction
02:53

2.Getting Started
2 lessons, 14:42

Free Lesson
2.1
Babel on the Client
08:43

2.2
Babel on the Server
05:59

3.Experimenting With ES6
3 lessons, 18:09

3.1
Classes
04:40

3.2
Generators
05:34

3.3
Other Cool Stuff
07:55

4.Conclusion
1 lesson, 04:28

4.1
Conclusion
04:28


4.1 Conclusion

Hi. My name is Jason Green and welcome to this short course on Full Stack ES6 with Babel. In this lesson, we're going to have a bit more of a critical look at Babel just to make sure that it really is the right choice for us in the particular projects we're working on. When something like Babel comes along and allows you to play with a brand new toy, it's really tempting to use it a lot and to use all of its features, even if maybe they're not quite right for us. We've had a look at a lot of cool new features that we can play with, but now it's time to have a look under the hood to see exactly what Babel is doing, the code that it's outputting, and to make sure that a, we understand what's going on, and b, we're happy with what's going on. If I open up our app.bundle.js file, you'll see the output of the Babel js conversion process. It's taken our files and it's in some places changed them. In other places it's added new functions, and in other places it's had to require entire new modules in order to make our ES6 code run in ES5. So the first thing you'll notice where we've been using the class keyword to create our polygon and shape classes, is that it's making use of these underscore functions like _classCallCheck and _createClass Here you can see it's using inherits to make sure that the square inherits all of the functionality from the polygon class. So you see, there's no magic here. It's doing exactly what you would have to have done and what you probably already were doing to organize your own code and create classes. There are a lot of cool class factory libraries out there that allow you to do just this. Many of them even come with more functionality than when we use the class keyword. For example, ES6 classes do not allow mix-ins or traits which some of these libraries do allow you to do. Another example is where we've used the let keyword to define block scoped i variable here. Here in our source file, everything looks fine but if you go look at our bundle, all it's done basically is used an _i variable using the standard var keyword so that when we go to console log i, it hasn't been defined. Now, I assume Babel is basically keeping track of these, and if there were more than one of them, it would be creating more underscores or keeping these variables unique in some way. But it's important to understand that it is doing some magic behind the scenes and we are in a sense trusting that Babel knows what it's doing. I'm not even going to start on whatever it is Babel is doing to make generator functions work, but as you can see our fibbinacci function looks nothing like it did when we first wrote it here. And the output of the destructuring is exactly as you would expect. In fact, it is exactly what we'd written before when we were doing it without destructuring. So it's good to see that where possible, Babel is writing common sense code, that's also readable after it's been compiled. So the big question is do you need ES6? Honestly, most of ES6 is just syntax sugar. But there's absolutely wrong with that. Being able to write cleaner more readable code, where our intention is more obvious is nothing to be sneezed at. But it's important to take a measured approach about this and reason as to whether or not you need this functionality and whether it's worth the extra steps involved. At the end of the day, I'll say what I would say to anybody who's planning on using a transpiler, a library, a framework or anything else in JavaScript, make sure you learn JavaScript first. Don't become a developer who only knows how to code in jQuery or only knows how to write Angular apps. Just like you shouldn't become a programmer who only knows how to write in TypeScript, CoffeeScript, or Babel's ES6. Class keyword is great, but at the end of the day, underneath the hood, it's still working on prototypical chaining, which is something you need to understand. That's the end of our short course on writing full stack ES6 with Babel. I hope you've enjoyed it, and that's all from me. Chow.

Back to the top