The future of Javascript: episode 2

by FEVR

Slide 1

Slide 1 text

The future of Javascript Part II MARCO MUNARI 15.12.2016 @FEVR

Slide 2

Slide 2 text

Javascript’s past and present The past The present

Slide 3

Slide 3 text

Javascript’s past and present The past The present  Add a simple interactivity layer  Alerts, inputs, popups, etc.  Forms  Go where CSS couldn’t  Positioning and sizing  Basic animations  Block the user  No right clicking!  No copy paste!  AJAX!  No more full page reloads  DOM manipulation  Client-side rendering  Data binding (MVVC/MVM/React/...)  Presentation and persistence of complex applications  Caching  Routing

Slide 4

Slide 4 text

Javascript’s past and present The past The present Enhance what’s provided by the server Offload as much as possible to the client

Slide 5

Slide 5 text

The early Web 2.0 (late 00s)  The good  New APIs & standards enable responsive, interactive applications  A widening support  The bad  Adoption by browser vendors is slow  Shared standards take ages and multiple iterations  The ugly  Javascript is still single-threaded: heavy work blocks the UI!

Slide 6

Slide 6 text

The obvious async example: XMLHttpRequest (aka $.ajax)  JS engine spawns a background thread to handle the request  The main/UI thread doesn’t freeze (continues execution)  XHR control goes back to the main thread once the request is over  The callback function is invoked

Slide 7

Slide 7 text

The problem with callbacks  N identation levels  Hard to read  Redundancy  Hard to optimize for performance (parallelize)  How do we solve those problems?

Slide 8

Slide 8 text

Wrapping functions?  Simplifies little  What if I need to add a parameter?

Slide 9

Slide 9 text

Wrapping functions?  Simplifies little  What if I need to add a parameter?

Slide 10

Slide 10 text

From callbacks to Promises  Less identation levels  More understandable  Unified error handling (no redundancy)  And...

Slide 11

Slide 11 text

From callbacks to Promises  ...we can parallelize and simplify! At the same time!

Slide 12

Slide 12 text

But what is a promise?  ES6 Standard  Wrapper for an asynchronous operation  Has one state of three:  Pending  Resolved  Rejected  Can resolve with a value (and rejects with an error)  Can be chained to other promises with .then()  Each promise in the chain has access to the result of the previous

Slide 13

Slide 13 text

Callbacks to Promises  Use the Promise constructor  Provides callbacks to turn callback-based functions into Promises  Inside .then(), return another Promise or Promise.resolve() to resolve immediately.

Slide 14

Slide 14 text

Callbacks to Promises  Promises can contain sub- chains  Branching is possible  Functions returning Promises can be then-ed  Only one catch per chain

Slide 15

Slide 15 text

Using promises  Cross-browser standard  IE <=10 compatible via polyfill  Standard implementation’s utility methods  Promise.all()  Promise.race()  Third-party implementations  q  jQuery’s $.Deferred()  Bluebird  Not for eventing!

Slide 16

Slide 16 text

Generators  Functions that return Iterable objects  Iterations done with yield  Function starts «freezed»  When next() is called, code runs through next yield;  yield returns a value to the next() caller.

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Generators They can wrap async functions!

Slide 19

Slide 19 text

Async/await  The future of async javascript  Async functions return a Promise  Can contain await statements  await pauses method execution until a promise resolves  Coming in ES8 (2017)  Support with transpilers  TypeScript has native support

Slide 20

Slide 20 text

Decorators  Allow declaration and annotation of class/properties metadata  Can modify a property descriptor  Can be parametrized  Still in definition  Hopefully coming to ES8  Supported by Transpilers and TypeScript  Angular 2.0 is built on these

Slide 21

Slide 21 text

Some neat addictions

Slide 22

Slide 22 text

Array.includes()  True if element is contained in array, false otherwise  Replaces .indexOf()

Slide 23

Slide 23 text

Rest destructuring  Simple syntax to destructure an object or an array (extract data into distinct variables)

Slide 24

Slide 24 text

Exponentiation operator  Simpler and syntax for Math.pow()  Supported with assignment operator

Slide 25

Slide 25 text

SIMD  Single Instruction/Multiple Data  Same operation on multiple data  Performance-oriented

Slide 26

Slide 26 text

The roadmap  EcmaScript 7 (ES2016)  Array.prototype.includes()  Object rest destructuring  Exponentiation operator: x ** y == Math.pow(x, y);  SIMD (Single Instruction/Multiple Data)  EcmaScript 8 (ES2017)  Async/await  Decorators

Slide 27

Slide 27 text

Use everything now  Transpilers: Babel/Traceur  Generators, async/await, decorators...  Typescript  Transpiles decorators and async/await to ES6  For Promises  Polyfills and third-party implementations

Slide 28

Slide 28 text

The future of Javascript  Asynchronous  Promises  Async/await  Generators  Web workers  A mature and powerful language  Dynamic typing  Powerful syntax (classes/decorators/destructuring/...)  Supersets for static typing (TypeScript)