Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Editions ES7, ES8 and ES9 vs V8

Walkthrough latest and future editions of JavaScript, including cutting-edge stage 3 proposals

JavaScript Editions ES7, ES8 and ES9 vs V8

  1. 1. ES7 & ES8 vs
  2. 2. @Rafael_Casuso A B O U T M E •CTO @StayApp •CEO @SnowStormIO •Organizer @BotDevMad & @VueJSMadrid •Software Engineer with +10 years of experience leading teams and developing. •Software Architect looking for revolutionary ways to change the world.
  3. 3. A BRIEF SETTING + INTRODUCTION
  4. 4. JAVASCRIPT VERSIONS JAVASCRIPT (December 4th 1995) Netscape and Sun press release ECMAScript Standard Editions: ES1 (June 1997) Object-based, Scripting, Relaxed syntax, Prototypes ES2 (June 1998) Editorial changes for ISO 16262 ES3 (December 1999) Regexps, Try/Catch, Do-While, String methods ES5 (December 2009) Strict mode, JSON, .bind, Object mts, Array mts ES5.1 (June 2011) Editorial changes for ISO 16262:2011 ES6 (June 2015) Classes, Modules, Arrow Fs, Generators, Const/Let,
 Destructuring, Template Literals, Promise, Proxy, Symbol, Reflect ES7 (June 2016) Exponentiation operator (**) and Array Includes ES8 (June 2017) Async Fs, Shared Memory & Atomics
  5. 5. JAVASCRIPT ENGINES V8 (Chrome V8) by Google Used in Chromium/Chrome & NodeJS SPIDERMONKEY by Mozilla Foundation Used in Gecko/Mozilla Firefox & SpiderNode CHAKRACORE, by Microsoft Used in Edge & Node ChakraCore JAVASCRIPTCORE by Apple RHINO Written in Java
  6. 6. HOW DOES A RELEASE WORK? + INTRODUCTION
  7. 7. TECHNICAL COMMITEES TC39 Its members are companies Operates by consensus Evolves the standard Yearly edition using TC39 process TSC (Technical Steering Committee) Key contributors with technical expertise and commitment Frequent meetings Chooses Collaborators (300+) Define Working Groups over Specific Areas
  8. 8. RELEASE PROCESS TC39 PROCESS STAGE 0: STRAWMAN Submitted ideas by TC39 member or contributor STAGE 1: PROPOSAL TC39 member responsible (Champion). Problem described in prose, solution via examples, API. Obstacles identification. STAGE 2: DRAFT First version of eventual inclusion. Formal description of syntax and semantics. Two experimental implementations needed. STAGE 3: CANDIDATE Feedback stage. Designated reviewer and TC39 editor must sign-off. Two spec-compliant implementations. STAGE 4: FINISHED Ready for standard. Test262 unit tests for the feature. Two implementations that pass tests. TC39 editor’s approval. STANDARD EDITION Each June and ongoing DRAFT with Stage 4 features.
  9. 9. ES7 Edition (2016) + OVERVIEW
  10. 10. ARRAY INCLUDES Array.prototype.includes(searchElement[, fromIndex]) // => Boolean WHY array.indexOf(el) !== -1 || array.indexOf(el) >= 0 It does not work with NaN Not explicit syntax EXAMPLES assert([1, 2, 3].includes(2) === true); assert([1, 2, 3].includes(4) === false); assert([1, 2, NaN].includes(NaN) === true); assert(["a", "b", "c"].includes("a") === true); assert(["a", "b", "c"].includes("a", 1) === false);
  11. 11. EXPONENTIATION OPERATOR x ** y // => Math.pow(x, y) WHY Math.pow(x, y) More succint syntax EXAMPLES let squared = 3 ** 2; // 9 let num = 3; num **= 3; // 9
  12. 12. ES8 Edition (2017) + OVERVIEW
  13. 13. ASYNC FUNCTIONS async function () {} async () => {} //=> Promise WHY Sequential much more succinct way to deal with Asynchrony Better understandable than callbacks (no jumps) and mere Promises Basic implementation async function asyncFunc() { return 123 }; asyncFunc().then( x => console.log(x) ); //=> 123 async function asyncFunc() { throw new Error(‘Problem’) }; asyncFunc().catch( err => console.log(err) ); //=> Error: Problem
  14. 14. ASYNC FUNCTIONS: AWAIT OPERATOR async function asyncFunc() { const result1 = await otherAsyncFunc1(); //Waits for Promise1 to settle console.log(result1); const result2 = await otherAsyncFunc2(); //Waits for Promise2 to settle console.log(result2); try { await otherAsyncFunc3() } catch(e) { //Handles err } } If Promise is resolved await returns its value If it is rejected it throws an exception (so Try/Catch is encouraged) If operand is not a Promise it converts it to a resolved one Don’t forget it. It has use case even if async function does not return. You don’t need await if you “fire and forget” Use Promise.all (parallel) instead of multiple await (sequential) whenever possible
  15. 15. ASYNC FUNCTIONS: EXECUTION 1) Async function is started synchronously. Its return Promise is created. 2) Its body is executed. It ends permanently via return (resolves Promise with value) or throw (rejects Promise with error). It ends temporarily via await (and resumed later). 3) Its Promise is returned. Notification of Promise resolution happens asynchronously, so .then or .catch will always be executed after. async function asyncFunc() { console.log(‘1’); return ‘3’; } asyncFunc().then( x => console.log(x); console.log(‘2’); //1 //2 //3
  16. 16. PARALLELISM & CONCURRENCY Parallelism (parallel vs serial): Execute multiple tasks simultaneously Data Parallelism: Same code is executed several times in parallel through instances on different elements of same datset (Ex: MapReduce) Task Parallelism: Different code is executed in parallel (Ex: Web Workers) Concurrency (concurrent vs sequential): Execute several tasks during overlapping periods of time Web Workers brought Task Parallelism to usually single-thread JavaScript They hay a dedicated global scope Communication between workers and main thread by messaging system They can communicate cloned data structures Transferable objects are cleared from sender and owned by receiver
  17. 17. SHARED ARRAY BUFFER Primitive building-block for high-level concurrency abstractions Share the bytes of SharedArrayBuffer between multiple workers and the main thread You can share data between workers more quickly Coordination between workers becomes simpler and faster Currently only Array of Integers can be shared // main.js const worker = new Worker('worker.js'); // To be shared const sharedBuffer = new SharedArrayBuffer(10 * Int32Array.BYTES_PER_ELEMENT); // 10 elements // Share sharedBuffer with the worker worker.postMessage({sharedBuffer}); // clone // worker.js self.addEventListener('message', function (event) { const {sharedBuffer} = event.data; const sharedArray = new Int32Array(sharedBuffer); // ··· });
  18. 18. ATOMICS Global variable to synchronize the activity of multiple workers using same SharedArrayBuffer Synchronization: // main.js console.log('notifying...'); Atomics.store(sharedArray, 0, 123); // worker.js while (Atomics.load(sharedArray, 0) !== 123) ; console.log('notified'); Waiting: Atomics.wait(int32, 0, 0); console.log(int32[0]); // 123 Operations: Atomics.add(ta, 0, 12); // returns 0, the old value Atomics.load(ta, 0); // 12
  19. 19. OBJECT.ENTRIES() & OBJECT.VALUES() Object.entries({ one: 1, two: 2 }) //[ [ 'one', 1 ], [ 'two', 2 ] ] WHY A better way to allow object entries iteration let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) { console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`); } Object.values({ one: 1, two: 2 }) //[ 1 , 2 ]
  20. 20. STRING PADDING String.prototype.padStart(maxLength, fillString=' ‘) String.prototype.padEnd(maxLength, fillString=' ') WHY Adding a count or an ID to a file name or a URL, for example EXAMPLES 'x'.padStart(5, ‘ab') //‘ababx’ 'x'.padEnd(5, ‘ab') //‘xabab’
  21. 21. OBJECT.GETOWNPROPERTYDESCRIPTORS() const obj = { [Symbol('foo')]: 123, get bar() { return 'abc' }, }; console.log(Object.getOwnPropertyDescriptors(obj)); // Output: // { [Symbol('foo')]: // { value: 123, // writable: true, // enumerable: true, // configurable: true }, // bar: // { get: [Function: bar], // set: undefined, // enumerable: true, // configurable: true } } WHY Copying properties into an object or cloning it
  22. 22. ES9 Current Draft (2018) + OVERVIEW
  23. 23. OBJECT DESTRUCTURING (STAGE 3) REST PROPERTIES Analog to Array rest properties let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x; // 1 y; // 2 z; // { a: 3, b: 4 } SPREAD PROPERTIES Analog to Array spread properties let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }
  24. 24. ASYNC ITERATION (STAGE 3) for await (const line of readLines(filePath)) { console.log(line); } const { value, done } = syncIterator.next(); asyncIterator.next().then(({ value, done }) => /* ... */); WHY A sequential iteration due to await to async operations
  25. 25. IMPORT() (STAGE 3) import(`./section-modules/${link.dataset.entryModule}.js`) .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; }); WHY Enabling dynamically load parts of a JavaScript application at runtime
  26. 26. THANK YOU

×