The future of Javascript: episode 2

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
December 15, 2016

The future of Javascript: episode 2

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

December 15, 2016
Tweet

Transcript

  1. The future of Javascript Part II MARCO MUNARI 15.12.2016 @FEVR

  2. Javascript’s past and present The past The present

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

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

    to read  Redundancy  Hard to optimize for performance (parallelize)  How do we solve those problems?
  8. Wrapping functions?  Simplifies little  What if I need

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

    to add a parameter?
  10. From callbacks to Promises  Less identation levels  More

    understandable  Unified error handling (no redundancy)  And...
  11. From callbacks to Promises  ...we can parallelize and simplify!

    At the same time!
  12. 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
  13. 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.
  14. Callbacks to Promises  Promises can contain sub- chains 

    Branching is possible  Functions returning Promises can be then-ed  Only one catch per chain
  15. 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!
  16. 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.
  17. 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)
  18. Generators They can wrap async functions!

  19. 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
  20. 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
  21. Some neat addictions

  22. Array.includes()  True if element is contained in array, false

    otherwise  Replaces .indexOf()
  23. Rest destructuring  Simple syntax to destructure an object or

    an array (extract data into distinct variables)
  24. Exponentiation operator  Simpler and syntax for Math.pow()  Supported

    with assignment operator
  25. SIMD  Single Instruction/Multiple Data  Same operation on multiple

    data  Performance-oriented
  26. 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
  27. 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
  28. 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)
  29. “ ” Javascript is here to stay

  30. Thank you! Marco Munari marco.munari@outlook.com