.svg)
blog content
I’m writing this post with quite a lot of excitement. I’ve decided to play around with new ECMAScript proposals since ES6 has already been out there for quite a long time and ES7 comes with just two new features (which are the exponentiation operator (**) and the Array.prototype.includes() function).
The above (especially ES6) gave us huge improvements in code readability. Personally, I love syntax sugar, so things that are coming to JavaScript with ES8+ make me really happy.
Thanks to Babel’s stage-0 preset we can already use things that will be included in ES8 or later specifications, or even those that are at just proposals. Babel offers us quite a few presets — depending of how far we want to go in ES-next — and we can choose the preset that we feel like trying out. Here’s the list of currently available presets:
- stage-0 — Strawman: just an idea, possible Babel plugin.
- stage-1 — Proposal: this is worth working on.
- stage-2 — Draft: initial spec.
- stage-3 — Candidate: complete spec and initial browser implementations.
- stage-4 — Finished: will be added to the next yearly release.
I’ll present some features from each preset — to hopefully get you to use this amazing transpiler and boost your code with some syntax improvements.
I’ll start with my favourite feature of the stage-3 preset which is the transform-async-to-generator plugin. It adds two new keywords to our code, namely async and await. I’m using them constantly in my backend applications.
Here is the basic syntax:
It works just like generators — the await keyword makes our application wait until our promise is resolved. It’s very useful for API or DB calls. Here’s a small real-life example:
And that’s all — the result of our promise is assigned to ‘user’. The power of this transform is that it doesn’t use regenerator or any other runtime but desugars to native generators that are already supported on Node 6.x and other environments. You can get rid of a pyramid of callbacks in .then() functions, and make your code clean and readable.
Our next preset is stage-2 — it comes with one plugin only, but trust me — it’s a good one. Plugin transform-object-rest-spread is a game-changer. Using it, you can rest and spread object properties and reduce the amount of code you have to write in this specific use case. Here’s an example:
Amazing, isn’t it? If you haven’t been using it yet — now it’s about time you start.
The deeper we go into the new ECMAScript proposals, the more amazing features we can use. Proposal preset stage-1 used to give us the transform-decorators plugin — but since there is a pending proposal update — it has been temporarily disabled. But worry not — we will look at another amazing feature, the transform-class-properties plugin. It’s very useful with react (DOM or native) — technologies. Now you can use the following syntax to bind a property to a class:
You can use it to define state or check propTypes in react classes as follows:
Last but not least, the stage-0 preset comes with my favourite ES-nextproposal — the bind operator (::). If you are tired of using .call() .bind()and .apply() functions, this syntax is just for you. Babel gives us an example below:
But i think you’ll see it all better in this example. Here is the code written in ES5:
And how we can make it simpler using the new syntax. Take a look:
Basically, those are the most important ES-next tools you can use at the moment. But I’m also curious about what’s coming to JavaScript in the next few years. One of the most interesting proposals is async iteration. AsyncIterator interface should be the same as the Iterator interface, except for the fact that each iteration method would return a promise. You could iterate like this:
This iterator comes with a variation of the for-of iteration statement, so you can iterate through your promises with syntax like this:
As you can see, all of these features give JavaScript a bright future, and can make the language even more powerful than it is now. You should of course visit https://babeljs.io/docs/plugins/ and customize your presets to match your needs and desires. There are still many more things to come. You can observe the status of each proposal at https://kangax.github.io/compat-table/es6/. There are also many GitHub repositories with new proposals that you can rate and contribute to. Any contribution, of course, will be of great value to the community.
Cheers!
Mike Chudziak
