ECMAScript: Understanding how JS evolves

Daniela Matos de Carvalho

@sericaia

Sep 2017

about me

I code at

{

}

I organize

I like

Disclaimer

first 5-10min are more conceptual/political than technical

recap about

1995 Brendan Eich

(Mocha > LiveScript > JavaScript)

1996 JS joins ECMA

JS has several versions

recap about

JS versions

...

ES3 (1999)
ES5 (2009)
ES6 (2015)
ES7 (2016)
ES8 (2017)

...

recap about

"ECMAScript is the name of the official standard, with JavaScript being the most well known of the implementations."

(https://www.w3.org)

recap about

ECMAScript it's not only about JS

recap about

ECMAScript it's not only about JS

but ALMOST only!

E_TOO_MANY_STUFF

ECMA International
General Assembly (GA)

Technical Comitee (TC) & Task Groups (TG)

ECMAScript

ECMA International

1961 Created by "European Computer Manufacturers"

1994 Reaches other subjects (HW, SW, Media, Storage)

ECMA GA

...

ECMA International

contains several Technical Committees (TCs) and Task Groups (TGs)

ECMA International

contains several Technical Committees (TCs) and Task Groups (TGs)

TC39 ECMAScript

TC49 C#

...

TC39

ECMA-262 it's the "JS" spec

What does the spec contain?

nearly everything!

What does the spec contain?

nearly everything!

What does the spec contain?

nearly everything!

What should I do if I want to submit a proposal?

There are requirements...

(https://tc39.github.io/process-document/)

What should I do if I want to submit a proposal?

"submissions must either come from members of TC39 or from non-members who have registered via Ecma International."

1. Post to the es-discuss mailing list

2. Convince others about the proposal

3. Recruit TC39

How to submit a proposal

1. Post to the es-discuss mailing list

2. Convince others about the proposal

3. Recruit someone from TC39

How to submit a proposal

...your company has to pay or be NFP

To be a TC39 member...

"Members are organizations, not individuals"

(from ECMA International slides)

TC39 Concepts

Web Compatibility and Web Reality

TC39 Meetings

happens every 2 months

https://esdiscuss.org/notes

They should be doing one now

Proposals have Stages

0 Strawman

1 Proposal

2 Draft

3 Candidate

4 Finished

https://github.com/tc39/proposals/blob/master/stage-0-proposals.md

Enough bull*it

let's look into some features!

WHATWG URL (0)
https://github.com/jasnell/proposal-url

https://url.spec.whatwg.org/

Pipeline Operator (0)
https://github.com/tc39/proposal-pipeline-operator/

    let result = duplicate(multByThree(2));


    let result = 2
      |> multByThree
      |> duplicate;

using pipeline operator:

Pipeline Operator (0)
https://github.com/tc39/proposal-pipeline-operator/

I love it

Pipeline Operator (0)

I love it

There's a preset in for stage-0

Pipeline Operator (0)

I love it

There's a preset in for stage-0

but it didn't pass for TC39

myself, 09/2017

3 days ago (26/09/2017)

Hurray!

Temporal Proposal (1)
https://github.com/tc39/proposal-temporal

new CivilDate(year, month, day)

Temporal Proposal (1)
https://github.com/tc39/proposal-temporal


    function addOneWeek(myDate) {
        myDate.setDate(myDate.getDate() + 7);
        return myDate;
    }
     
    var today = new Date();
    var oneWeekFromNow = addOneWeek(today);
     
    console.log(`today is ${today.toLocaleString()}, 
        and one week from today will be ${oneWeekFromNow.toLocaleString()}`);

(example kindly copied from https://maggiepint.com/2017/04/11/fixing-javascript-date-web-compatibility-and-reality/)

Private methods and getter/setters for JS classes (2)
https://github.com/tc39/proposal-private-methods


    class Counter {
      #xValue = 0;
    
      get #x() { return #xValue; }
      set #x(value) {
        this.#xValue = value; 
      }
    
      #clicked() {
        this.#x++;
      }
    
      constructor() {
        super();
        this.onclick = this.#clicked.bind(this);
      } 
      //... 
    }

(example adapted from https://github.com/tc39/proposal-private-methods)

Object rest spread (3)

https://github.com/tc39/proposal-object-rest-spread

array rest & spread but for objects!

https://babeljs.io/docs/plugins/transform-object-rest-spread/

https://babeljs.io/docs/plugins/preset-stage-3/

Object rest spread (3)

https://github.com/tc39/proposal-object-rest-spread

    // array
    
    let [first, second] = [1, 2];
    let [first, second, ...rest] = [1, 2, 3, 4, 5];

    // object
    
    let {first, second} = {first: 1, second: 2}
    let {first, second, ...rest} = {first: 1, second: 2, third: 3, fourth: 4}

Async Functions (4) [async await]

https://github.com/tc39/ecmascript-asyncawait


    async function getById(id) {
      const item = await db.getById(id);
      return item;
    }

https://babeljs.io/docs/plugins/transform-async-to-generator/

https://babeljs.io/docs/plugins/preset-stage-3/ (will be removed soon)

Async Functions (4) [async await]


    async function getById(id) {
      try {
        const item = await db.getById(id);
        return item;
      } catch(err) {
        // deal with it (reject the promise)!
      }
    }

Async Functions (4) [async await] pitfall

    // some Hapi.js route
    server.route({
        method: 'GET',
        path: '/',
        handler: async function (request, reply) {
            const {
                firstId,
                secondId
            } = request.params;

            const firstItem = await db.getById(firstId);
            const secondItem = await db.getById(secondId);    
            reply({first: firstItem, second: secondItem});
        }
    });

don't do this!

Async Functions (4) [async await] pitfall solution

    // some Hapi.js route
    server.route({
        method: 'GET',
        path: '/',
        handler: async function (request, reply) {
            const {
                firstId,
                secondId
            } = request.params;

            const [ firstItem, secondItem ] = await Promise.all([
               db.getById(firstId),
               db.getById(secondId)
            ]);

            reply({ first: firstItem, second: secondItem });
        }
    });

to infinity and beyond

Please do not code like