Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The future of Javascript: episode 2

FEVR
December 15, 2016

The future of Javascript: episode 2

FEVR

December 15, 2016
Tweet

More Decks by FEVR

Other Decks in Technology

Transcript

  1. 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
  2. Javascript’s past and present The past The present Enhance what’s

    provided by the server Offload as much as possible to the client
  3. 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!
  4. 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
  5. The problem with callbacks  N identation levels  Hard

    to read  Redundancy  Hard to optimize for performance (parallelize)  How do we solve those problems?
  6. From callbacks to Promises  Less identation levels  More

    understandable  Unified error handling (no redundancy)  And...
  7. 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
  8. 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.
  9. Callbacks to Promises  Promises can contain sub- chains 

    Branching is possible  Functions returning Promises can be then-ed  Only one catch per chain
  10. 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!
  11. 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.
  12. 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.  Can be used with the for ... of construct (ES6)
  13. 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
  14. 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
  15. Rest destructuring  Simple syntax to destructure an object or

    an array (extract data into distinct variables)
  16. 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
  17. 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
  18. 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)