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). Donc, dans un 1er temps, installez JSPM: npm install jspm -g (précédé de sudo pour les Mac users). jspm init JSPM va vous poser une série de questions: Package.json file does not exist, create it? Normalement, répondez avec les valeurs par défaut. A la question Enter server baseURL (public folder path) [./]: vous pouvez répondre par exemple public si votre webapp est dans un sous répertoire public, sinon laissez tel quel. Vous aurez besoin d'un serveur http (j'utilise http-server: Création de notre page index.html <! La ligne System.import("main"); signifie que nous allons charger main.js. Création de main.js et message.js import Message from '. <!
Support d'ECMAScript 6 par Mozilla ECMAScript 2015 (sixième édition) est la version actuelle pour le langage ECMAScript. Couramment appelé « ES6 », c'est le standard qui définit l'implémentation de JavaScript, notamment pour SpiderMonkey, le moteur utilisé par Firefox et les autres applications Mozilla. Cette version est appelée avec le nom de code « ES.next » ou « Harmony ». Les brouillons de spécification (aussi appelés drafts) se trouvent sur le wiki officiel d'ECMA. Le premier draft basé sur ECMAScript 5.1, a été publié le 12 juillet 2011 sous le nom « ES.next ». Une version PDF et une version HTML du standard sont disponibles et peuvent être librement téléchargéees sur ecma-international.org. La liste de diffusion es-discuss permet de discuter des standards ECMAScript. Fonctionnalités d'ores et déjà supportéesEdit Les fonctionnalités suivantes sont déjà implantées dans Firefox : Bibliothèque standard Ajouts à l'objet Array Les objets Map et Set et leurs équivalents avec références faibles Ajouts à l'objet Number Fonctions
HTML5test - How well does your browser support HTML5? ES6 Feature Performance - incaseofstairs Update: The results below are a snapshot from when this post was written. kpdecker.github.io/six-speed/ has the most recent results. With ES6 features landing quickly in native browsers and readily available for use through Babel and Traceur, it seemed like it was time to look not just at support, but also the performance impact of using these features under the current implementations. While there is great promise for the future, the picture of ES6 feature performance today is very muddled and depends on the specific feature being used. Some such as bindings and simple arrow/destructuring are ready for use today, others such as generators and tagged template strings might require analysis before using. The standard warnings of premature optimization and recommendations to profile your own code apply to the comments here. These tests are very micro in their scope and might not be representative of your particular use case. Results Arrow Function Issues: Firefox Native Implementation Classes
JavaScript : le futur, c’est maintenant ! • Christophe Porteneuve @ MS experiences 2016 gni ?! ES6 ou ES2015 ? Rappel : ES = ECMAScript = standard officiel de JavaScript. Avant 2015, on disait ES6, ES7… Par exemple, ES3 = 1999, ES5 = 2009, ES6 = 2015 Mais depuis 2015, on sort une version par an (en juin). On « met la pression » de tenue à jour en numérotant par année. Les noms officiels sont donc désormais ES2015, ES2016, etc. Et si on avait besoin de rien ? La prise en charge native est bien meilleure que ce qu’on croit. Edge 14 = 93% Firefox 52 = 94% Chrome 53 / Opera 40 = 97% Safari 10 (dont iOS 10) = 100% Node 6.5 = 97% Et « 90 % » ça suffit en général largement 😉 OK mais… dans la vraie vie… Pas encore de solution propre aux modules ES2015 natifs. import React, { PropTypes } from 'react' export default function Gauge ({ value, max = 100 }) { return <LinearProgress mode='determinate' value={value} max={max} />} IE (même 11), Firefox < 45, Chrome < 49, Opera < 36, Safari < 10, iOS < 10, Node < 6, Android Browser… Et ES2016+, alors ? Et l’an prochain, avec ES2017 on fait quoi ? Plugins
Introduction to Web Components W3C Working Draft 6 June 2013 This version Latest version Latest editor's draft Previous version Revision history Participate Discuss on public-webapps@w3.org (Web Applications Working Group) File bugs (w3.org's Bugzilla) Editors Dominic Cooney, Google, <dominicc@google.com> Dimitri Glazkov, Google, <dglazkov@chromium.org> Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract This document is a non-normative reference, which provides an overview of Web Components. Status of this Document This section describes the status of this document at the time of its publication. This document was published by the Web Applications Working Group as a First Public Working Draft. Table of Contents 3 Templates
Metaprogramming in ES6: Symbols and why they're awesome You've heard of ES6 right? It's the new version of JavaScript that is awesome in so many ways. I frequently wax lyrical about all of the amazing new features I keep discovering with ES6, much to the chagrin of my colleagues (consuming someone's lunch break talking about ES6 Modules seems to be not to everyone's liking). A set of great new features for ES6 comes in the form of a slew of new metaprogramming tools, which provide low level hooks into code mechanics. Not much has been written on them, so I thought I'd do a teensy weensy 3 part post on them (sidebar; because I'm so lazy and this post has been sat in my drafts folder - 90% done - for three months, a bit more has been written about them since I said that): Part 1: Symbols (this post) Part 2: Reflect Part 3: Proxies (coming soonish) First, let's take a quick detour and discover the wonderful world of Metaprogramming. class BoringClass end class CoolClass def ==(other_object) other_object.is_a? So how does each one work? 1. 3.
lukehoban/es6features: Overview of ECMAScript 6 features ES6 In Depth – Symbols 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. Note: There is now a Vietnamese translation of this post, created by Julia Duong of the Coupofy team. What are ES6 symbols? Symbols are not logos. They’re not little pictures you can use in your code. let 😻 = 😺 × 😍; They’re not a literary device that stands for something else. They’re definitely not the same thing as cymbals. (It is not a good idea to use cymbals in programming. So, what are symbols? The seventh type Since JavaScript was first standardized in 1997, there have been six types . UndefinedNullBooleanNumberStringObject Each type is a set of values. The set of Object values, however, is open-ended. ES6 symbols are values, but they’re not strings. Let’s talk about a scenario where they might come in handy. One simple little boolean How can you solve this? One way is to use CSS APIs to ask the browser if the element is moving. Hmm.
How to debug ES6 mocha tests in Visual Studio Code | Through the binary Previously, when I tried to debug the failed test in mocha, I start mocha in bash with --debug-brk, and attached the Visual Studio Code to that mocha process. My code is written in ES6, and I run mocha via babel-register. When I tried to enjoy the built-in debug function in VSC. Somehow, the stack seems completely irrelative to the actual code. Take me a while to figure it out. I searched a lot online, assembled all the information to solve the problem, I think it worths a blog to save someone else time. Basically, 2 methods available. This article assumed that you have already set up the testing environment otherwise you won’t even have the debug problem. 1. The ES6 here means ES6 for both source code and tests file. In a word, 2 steps: add a user settings which enable you to debug ES6 codeuse built-in debug function to debug without running a separate mocha process Step 1: Add the following sections to your Launch Configurations. The 1st line to where you hold your test file Step 2: 2. ".
De Stijl: How necessary are var, let, and const? Disclaimer: JavaScript the language has some complicated edge cases, and as such, the following essay has some hand-wavey bits and some bits that are usually correct but wrong for certain edge cases. If it helps any, pretend that nearly every statement has a footnote reading, “for most cases in practice, however ______.” ECMAScript-2015 gives us three different variable declaration statements: var, let, and const. We already had var. One way to answer that question is to perform a thought experiment: Take a function using one of these features, and convert it to an equivalent function that doesn’t use the feature. is var necessary? Let’s try this with var. Variables declared with var have exactly the same scope as function arguments. So: function callFirst (fn, larg) { return function () { var args = Array.prototype.slice.call(arguments, 0); return fn.apply(this, [larg].concat(args)) }} Would become: We can manually hoist any var that doesn’t appear at the top of the function, so: And then:
Hilbert's Grand JavaScript School (2015 Edition) (This material originally appeared, using ECMAScript-5 semantics, in 2013.) Dr. Hilbert “Bertie” David grows tired of blogging about JavaScript, and decides to cash in on the seemingly inexhaustible supply of impressionable young minds seeking to “Learn JavaScript in Five Days.” He opens his Grand JavaScript School on the shores of the Andaman Sea in Thailand, and with some clever engineering, he is able to install a countably infinite number of seats in his lecture hall. day one Well, an infinite number of students show up on the first day. Bertie quickly whips out a JavaScript IDE he has devised, and he writes himself a generator. function* Numbers (from = 0) { let number = from; while (true) yield number++;}; const seats = Numbers(); for (let seat of seats) { console.log(seat);} //=> 0 1 2 3 ... He simply calls out the numbers as they are printed, and the students file into the auditorium in an orderly fashion, filling it completely. day two Out comes the IDE and the bullhorn. day three
Deploying ECMAScript 6 This blog post describes the options you have for deploying ECMAScript 6 in current JavaScript environments. It is selective w.r.t. the amount of tools it covers. If you want a comprehensive list of tools, I suggest you look at Addy Osmani’s “ECMAScript 6 Tools”. Consult the blog post “Using ECMAScript 6 today” for an overview of ES6 features. Using ECMAScript 6 today What options do you have for using ECMAScript 6 today? ECMAScript 6 features are continually appearing in engines. Especially if you take support for legacy engines into consideration, compiling ES6 to ES5 will be the only viable option for using ES6 for quite a while. The nice thing about ES6 is that it is a superset of ES5, which means that all of your ES5 code bases are already valid ES6. Using ECMAScript 6 natively As soon as the first engine fully supports ES6 and until all non-ES6 engines go away, a hybrid approach could be used for client-side apps: Transpilation tools Choosing a transpiler Static transpilation ES6 REPLs
ECMAScript 6: New Features: Overview and Comparison