The future of Javascript: episode 2

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