Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.1 Introduction

Welcome to Start Coding ES6 With Babel. In this lesson you’ll find out exactly what is new in ECMAScript 6, why you should be interested, and how Babel can help you start using it in production code today.

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


1.1 Introduction

Hi, my name is Jason Green. And welcome to this short course on full-stack ES6 with Babel. Throughout this course, we're going to find out how we can start using ES6 JavaScripts today in the browser, and on the server. For those of you who don't know what I mean when I say ES6, let's have a quick look. If you've been a web developer for cross-browser compatible websites or applications, you've probably found yourself fighting one browser or another, trying to work out which JavaScript APIs are safe to use, and which ones you have to work around. A lot of useful functionality, such as the Array map method, is not compatible with all the major browsers. Something that would seem as obvious such as Array map only works in Internet Explorer 9 and up. Developers have solved this problem in a variety of ways. You can create polyfills for the various bits of functionality that you're missing or use a utility library such as lodash or underscore. Eventually people developed things like the es5-shim. This is a file that you can load into your web page and it will augment your array prototypes and object prototypes with the missing es5 standard methods. The es stands for EcmaScript, and it's basically just the standard from which JavaScript gets all of its APIs. Shims such as this, worked absolutely fine to cover missing array prototype methods or object prototype methods or any other missing standard functions. However, with the arrival of Ecmascript 6, not only do we have new functions and methods. But, we also have completely new syntax to cover and this is where Babel enters. With Babel, you can transform ES6 code into readable and standards compliant ES5 code. For instance, we could write code that uses the ES6 destructuring where you can assign variables from an object or in one line. If you look at the output ES5 code, it looks much as you would expect it. This is just one simple example of some really cool things that we can do with ES6. But why particularly Babel? Well I was particularly won over by the overall coverage of ES6 and even some ES7 features. As you can see Babel, covers the most of any of the other preprocesses, or even any of the other browsers. Traceur comes in as a close second, but I wasn't particularly impressed by the way Traceur outputs it's code. I found Babel's output to be much more readable. To the point where I didn't even need to use source maps. Babel also works in the browser and in the server so that we can write isomorphic ES6 code. Well, that's all for now. In the next lesson we're going to set up our skeleton project so that we can start using ES6 in the browser. Ciao!

Back to the top