Exploring ECMAScript

by @snhasani

irdevconf - july 2016

I am Seyed Naser Hassani

a frontend developer

My home is naser.xyz,

and also you can find me with @snhasani ID almost all over the internet. from twitter, gmail, github, telegram... until fb, instagram and skype.

WTH ECMAScript, ES, Harmony and etc?

To answer that question, let’s take a step back through history, to...

1990s

???

Birth

  • created in 10 days in May 1995 by Brendan Eich.
  • the original name was Mocha, a name chosen by Marc Andreessen, founder of Netscape.
  • In September of 1995 the name was changed to LiveScript.
  • in December of 1995, upon receiving a trademark license from Sun, the name JavaScript was adopted.

The Browser Wars

another Birth (copy)!

JScript

is Microsoft implementations version of Javascript.

It was a reverse-engineered version of Javascript, designed to be compatible with Netscape’s implementation.

finding standard

The Netscape team submitted Javascript for official review in 1997,

and finally it become an ECMA defined language.

newborn! (TC39)

ECMA + Javascript = ECMAScript (ECMA-262)

ECMA is an international standards organization (originally the European Computer Manufacturers Association), and they handle a number of specs, including C#, JSON, and Dart.

JavaScript is what everyone calls the language, but that name is trademarked (by Oracle, which inherited the trademark from Sun). Therefore, the official name of JavaScript is ECMAScript.

 ES1

  • released in June 1997.
  • to bridge the gap between Javascript and Jscript and establish a plan for standardizing updates going forward.
  • It was designed to be compatible with Javascript 1.3, which had added call, apply, and various Date functions.

 ES2

  • released in June 1998.
  • changes were purely cosmetic.
  • They had been added to comply with a corresponding ISO version of the spec without changing the specification for the language itself, so it’s typically omitted from compatibility tables.

 ES3

  • released in December 1999.
  • marked the first major additions to the language.
  • It added support for regexes, .bind, and try/catch error handling.
  • ES3 became the “standard” for what the majority of browsers would support, underscored by the popularity of older IE browsers.
  • Even in February 2012 (13 years after the ES3 release!!), ES3 IE browsers still had over 20% of the browser market.

 ES4 (ES3.1)

  • Work on ES4 started after the release of ES3 in 1999.
  • In 2003, an interim report was released after which work on ES4 paused.
  • TC39 resuming work on ES4 in fall 2005.
  • In February 2005, Jesse James Garrett introduced Ajax.
  • now two groups working on future ECMAScript versions.
    • ​ECMAScript 4 was designed by Adobe, Mozilla, Opera, and Google and was a massive upgrade. Its planned feature sets included: classes, generators, modules, and many of the features that ended up in ES6!
    • ECMAScript 3.1 was designed by Microsoft and Yahoo. It was planned as a subset of ES4 and an incremental upgrade of ECMAScript 3, with bug fixes and minor new features. ECMAScript 3.1 eventually became ECMAScript 5
  • The two groups disagreed on the future of JavaScript and tensions between them continued to increase. The committee first published a draft of the spec in October 2007, But just as the spec was nearing completion, trouble struck!

 Harmony

At the end of July 2008, there was a TC39 meeting in Oslo, whose outcome was described as follows by Brendan Eich:

It’s no secret that the JavaScript standards body, Ecma’s Technical Committee 39, has been split for over a year, with some members favoring ES4 […] and others advocating ES3.1 […]. Now, I’m happy to report, the split is over.

The agreement that was worked out at the meeting consisted of four points:

  1. Develop an incremental update of ECMAScript (which became ECMAScript 5).
  2. Develop a major new release, which was to be more modest than ECMAScript 4, but much larger in scope than the version after ECMAScript 3. This version was code-named Harmony, due to the nature of the meeting in which it was conceived.
  3. Features from ECMAScript 4 that would be dropped: packages, namespaces, early binding.

 ES5

  • released in December 2009.
  • most browsers support today.
  • It brings several enhancements to the standard library and updated language semantics via a strict mode.

 ES5.1

  • released in June 2011.
  • it was submitted as an ISO standard.
  • in the process, minor corrections were made.
  • it is the same text as ISO/IEC 16262:2011.

 ES6 (June 2015)

This version went through several name changes:

  • ECMAScript Harmony: was the initial code name for JavaScript improvements after ECMAScript 5.
  • ECMAScript.next: It became apparent that the plans for Harmony were too ambitious for a single version, so its features were split into two groups: The first group of features had highest priority and was to become the next version after ES5. The code name of that version was ECMAScript.next, to avoid prematurely comitting to a version number, which proved problematic with ES4. The second group of features had time until after ECMAScript.next.
  • ECMAScript 6: As ECMAScript.next matured, its code name was dropped and everybody started to call it ECMAScript 6.
  • ECMAScript 2015: In late 2014, TC39 decided to change the official name of ECMAScript 6 to ECMAScript 2015, in light of upcoming yearly spec releases. However, given how established the name “ECMAScript 6” already is and how late TC39 changed their minds, I expect that that’s how everybody will continue to refer to that version.

May '95

Dec '95

Sep '95

1997

Aug '96

1999

1998

2009

2003

2015

2011

2016

Mocha (Brendan Eich, Netscape)

LiveScript

JavaScript

Edition 1

JScript (Microsoft)

Edition 2

Edition 3

Edition 4

Edition 5

Edition 5.1

Edition 6

Edition 7

ECMA-262 specification

Javascript Time-Line

The State of ES6

Common Excuses

Common Excuses #1

Babel lets you transpile most ES6 code so it will work in browsers dating back to IE8. Don’t get left behind.

I’m waiting for browser support.

ES6 compatibility table

If you’re building any non-trivial app, you should be compiling anyway, for many reasons.

I don’t want to introduce a compile step.

Common Excuses #2

things that superficially look like syntactic sugar (such as classes and modules) bring much-needed standardization to the language and serve as foundations for future features.

Several features were not created for normal programmers, but for library authors (e.g. generators, iterators, proxies). “Normal programmers” only need to know them superficially if at all.

Is ES6 bloated?.

Common Excuses #3

ES6 is JavaScript. It’s the current, official JavaScript standard, and all the new books and tutorials you’ll want to read are going to use ES6 examples

I’m a beginner and learning ES6 while I’m trying to learn JavaScript sounds hard.

Common Excuses #4

Do you have another excuse?

ES6 - GOALS

Goal #1: Be a better language

for writing:

  1. complex applications;
  2. libraries (possibly including the DOM) shared by those applications; (Modules)
  3. code generators targeting the new edition. (Proxies)

Goal #2: Improve interoperation

adopting de facto standards where possible. Examples are:

  1. Classes: are based on how constructor functions are currently used.
  2. Modules: picked up design ideas from the CommonJS module format.
  3. Arrow functions: have syntax that is borrowed from CoffeeScript.
  4. Named function parameters: There is no built-in support for named parameters. Instead, the existing practice of naming parameters via object literals is supported via destructuring in parameter definitions.

ES6 - FEATURES

modules

class declarations

lexical block scoping

iterators and generators

promises for asynchronous programming

destructuring patterns

  • Better syntax for features that already exist (e.g. via libraries):
    • Classes
    • Modules
  • New functionality in the standard library:
    • New methods for strings and Arrays
    • Promises
    • Maps, Sets
  • Completely new features:
    • Generators
    • Proxies
    • WeakMaps

Three major categories of features:

Modules

export function exampleFunction() {
  console.log('I\'m an example. #TrueStory');
}
import { exampleFunction } from './example-function';
import BaseController from './base-controller';

export default class ExampleController extends BaseController {
  constructor() {
    super();

    exampleFunction();
  }

  doSomething() {
    console.log('What should I do? Change the DOM?');
  }
}

Fat Arrow Functions

button.addEventListener('click', function(event) {
  console.log('The button has recevied a click', event);
});
button.addEventListener('click', event => {
  console.log('The button has recevied a click', event);
});

Template Strings

// Simple string substitution  
var name = "Gandalf";  
console.log('Yo, ${name}!');

// => "Yo, Gandalf!"
var a = 10;  
var b = 10;  
console.log('a+b = ${a+b}.');  
//=> a+b = 20.

function fn() { return "I am a result. Rarr"; }  
console.log('foo ${fn()} bar');  
//=> foo I am a result. Rarr bar.

Template Strings

// Simple string substitution  
var name = "Gandalf";  
console.log('Yo, ${name}!');

// => "Yo, Gandalf!"
var a = 10;  
var b = 10;  
console.log('a+b = ${a+b}.');  
//=> a+b = 20.

function fn() { return "I am a result. Rarr"; }  
console.log('foo ${fn()} bar');  
//=> foo I am a result. Rarr bar.

ES6 - READING LIST

+ ES6 extra resources list

 ES6: resources

ES6 - TOOLS

  • Transpilation: Babel
  • Linting and Style Checks: ESLint

+ ES6 more tools list

 ES6: tools

twitter: @tehranjs

at rahnemaco.com

Karina Mobile Solutions

we are hiring frontend developer

CV to n.kashani at karinaco dot com

Questions!

Exploring ECMAScript by snhasani

By Naser Hassani

Source: draft

Exploring ECMAScript by snhasani

  • 1,681

More from Naser Hassani