background preloader

ES6/ES2015

Facebook Twitter

The state of JavaScript modules – webpack – Medium. Recently, there was a lot of fuss on Twitter regarding the current state of ES modules, especially in Node.js, which decided to introduce *.mjs as file extension.

The state of JavaScript modules – webpack – Medium

The fear and uncertainty is understandable since the topic is complex and following the discussions takes a high degree of effort and dedication. An ancient fear Most frontend developers still remember the dark days of JavaScript dependency management. Native ECMAScript modules - the first overview. The 2016 year was incredible in terms of the browser and Node.js applying the ECMAScript 2015 specification.

Native ECMAScript modules - the first overview

Now we are facing the situation when the support amongst them is close to 100%: But the standard actually introduced also ECMAScript modules (today also often named ES or ES6 modules). It’s the only part which took (and still taking) the most time to implement as only some have shipped it in the stable version, but all have the implementation available. To understand better how we come to this point let’s start from the JS modules history and then take a look at the current Native ES modules features and implementations. Historically JavaScript didn’t provide the modules system. 1) Just the long scripts inside a script tag.

<! 2) Separating logic across the files and including them using the script tags: /* js */ // module1.js // module1 code // module2.js // module2 code. Promises In JavaScript – Ben Aston – Medium. Promises were invented in the mid-to-late 1970s at Indiana University in the US.

Promises In JavaScript – Ben Aston – Medium

They are a language construct used for synchronizing execution in concurrent programming environments. Originally they were designed to decouple variable values from the time and place of their calculation, making parallelisation easier. Later, they were re-discovered for their ability to simplify asynchronous code by moving it to a more direct style rather than the continuation passing style necessitated without them.

Promises also make dealing with errors significantly easier. JavaScript makes extensive use of asynchronous code because of the blocking nature of its single-threaded event loop implementation. Understanding promises is therefore important for anyone who wants to understand JavaScript. Continuation-Passing Style. ES6 In Depth: Modules. ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript standard, ES6 for short.

ES6 In Depth: Modules

When I started on Mozilla’s JavaScript team back in 2007, the joke was that the length of a typical JavaScript program was one line. This was two years after Google Maps launched. Not long before that, the predominant use of JavaScript had been form validation, and sure enough, your average <input onchange=> handler would be… one line of code. 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial) In case you missed it, Node now supports async/await out of the box since version 7.6.

6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

If you haven’t tried it yet, here are a bunch of reasons with examples why you should adopt it immediately and never look back. [EDIT]: It seems that the embedded code on gist does not work on medium native app, but it works on mobile browsers. If you are reading this on the app, tap on the share icon and choose “open in browser” in order to see code snippets. ES7 Async/Await pitfalls – Matan Sokolovsky – Medium. What is async/await?

ES7 Async/Await pitfalls – Matan Sokolovsky – Medium

ECMAScript 6 introduced Promises to simplify program flow. However, when using promises we still need callbacks and it’s not always clear what the program does. For example, This code snippet: function doSomething() { let i = 0; waitOneSecond() // Returns a promise .then(() => console.log(i)); i = 5;} Object-Oriented JavaScript — A Deep Dive into ES6 Classes. This article was peer reviewed by Nilson Jacques and Tim Severien.

Object-Oriented JavaScript — A Deep Dive into ES6 Classes

Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Often we need to represent an idea or concept in our programs—maybe a car engine, a computer file, a router, or a temperature reading. Representing these concepts directly in code comes in two parts: data to represent the state and functions to represent the behavior.

TicTacToe with native Javascript ES6 (Example) We will learn how to create a ES6 pure JavaScript game of Tic Tac Toe.

TicTacToe with native Javascript ES6 (Example)

To do this, we will create Components, Libraries and a Module. Before we get started: Make sure you moderately understand DOM Level 1~2 Be certain to have some experience with Javascript ECMAScript 5 (ES5) under your beltI will assume that you know a little bit about ECMAScript 6 Since the purpose of this article is to build a pure JS implementation of Tic Tac Toe, complete with minimum HTML necessary, we will need Browserify , Babelify , NodeJs , and an IDE of your choosing with access to a Terminal/shell. Install NodeJS by downloading it directly from the official website .

When 'not' to use arrow functions. It is a pleasure to see the evolution of the programming language you code every day.

When 'not' to use arrow functions

Learning from mistakes, searching for better implementation, creating new features is what makes the progress from version to version. This is happening to JavaScript these years, when ECMAScript 6 brings the language to a new level of usability: arrow functions, classes and much more. And this is great! One of the most valuable new feature is the arrow function. ES6 arrow functions in depth. One of the prettiest features of ES6, it could easily win a beauty contest, if such a contest would be held.

ES6 arrow functions in depth

What many people don’t know is that the arrow function is not simply a form of syntactic sugar that we can use instead of the regular callback. JavaScript ES6+: var, let, or const? – JavaScript Scene – Medium. Perhaps the most important thing you can learn to be a better coder is to keep things simple. In the context of identifiers, that means that a single identifier should only be used to represent a single concept. Sometimes it’s tempting to create an identifier to represent some data and then use that identifier as a temporary place to store values in transition from one representation to another.

For instance, you may be after a query string parameter value, and start by storing an entire URL, then just the query string, then the value. This practice should be avoided. 4. Core ES6 features. This chapter describes the core ES6 features. These features are easy to adopt; the remaining features are mainly of interest to library authors. I explain each feature via the corresponding ES5 code. 4.1 From var to let/const In ES5, you declare variables via var. Such variables are function-scoped, their scopes are the innermost enclosing functions. That func() returns undefined may be surprising.

Var x = 3;function func(randomize) { var x; if (randomize) { x = Math.random(); return x; } return x;}func(false); // undefined In ES6, you can additionally declare variables via let and const. Let and const behave more strictly and throw more exceptions (e.g. when you access their variables inside their scope before they are declared). Six More Tiny But Awesome ES6 Features. ES6 has brought JavaScript developers a huge new set of features and syntax updates to be excited about. Some of those language updates are quite large but some of them are small updates you would miss if you weren't careful -- that's why I wrote about Six Tiny But Awesome ES6 Features, a list of the little things that can make a big difference when you code for today's browsers.

I wanted to share with you six more gems that you can start using to reduce code and maximize efficiency. 1. Object Shorthand A new object creation shorthand syntax allows developers to create key => value objects without defining the key: the var name becomes the key and the var's value becomes the new object's value: ECMAScript 6. Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) JavaScript has changed quite a bit in the last years. These are 12 new features that you can start using today! Kpdecker.github. JavaScript ES6+: var, let, or const? — JavaScript Scene.

JavaScript Promises: There and back again. ECMAScript 6: New Features: Overview and Comparison. Deploying ECMAScript 6. Hilbert's Grand JavaScript School (2015 Edition) De Stijl: How necessary are var, let, and const? ES6 In Depth – Symbols. Learn ECMAScript6 by doing it. Metaprogramming in ES6: Symbols and why they're awesome. ES6 Feature Performance - incaseofstairs. ES2015 et ES2016 dans votre navigateur. Il est bien entendu que tout ce qui va suivre ne doit pas se retrouver en production (après vous faites comme vous voulez). Préparation de votre environnement Tout d'abord vous avez vesoin de JSPM qui est un gestionnaire de package s'appuyant sur la gestion des modules façon ES6 (ES2015).

ECMAScript 6 compatibility table.