JavaScript

Beyond The Dent

Asynchronous JavaScript

WHO IS THIS GUY?

Amit Jain

Front-end engineer, CSS, HTML , JavaScript junkie and web lover. 

Senior Engineer UI @ inmobi.com

@a3itJain 

PLEASE ASK QUESTIONS

• If anything isn’t clear
• If you want to know more about something
• If I don’t know I can find out for you :)

THE FLEXIBILITY OF JAVASCRIPT

One of the most powerful features of the language is its flexibility. As a JavaScript programmer, you can make your programs as simple or as complex as you wish them to be

WHAT I’M GOING TO TALK ABOUT

1. For
2. Foreach
3. Map
4. Filter
5. ConcatAll

ASYNC JS & It's Issues

1. Race Conditions
2. Memory Leaks
3. Complex State Machines
4. Uncaught Async Errors

Events and Arrays are both

collections

we can program them the same way

Iterator

var iterator = [1,2,3].iterator(); 

Observer Pattern

Text

document.addEventListener(
    “mousemove”,
    function next(e) {
        console.log(e);
    });
);



{ clientX: 425, clientY: 543 }
{ clientX: 536, clientY: 123 }
{ clientX: 267, clientY: 239 }

Iterator -- progressively send information to consumer -- Observer

The Iterator and Observer Pattern are Symmetrical

Push APIs

Introducing Observable

Observable cont..

• Observable are lazy.
• You can not pull a value from observable like sync pull a value out of array with index.
• Observable are very cheap to make copies as they don't store items in memory not collecting  item in memory, they forward to call backs.
• Unlike for loop foreach can run asynchronously.

Observables can model..

1. Events
2. Async Server Requests
3. Animations

Events to Observables

var mouseMoves =
   Observable.
      fromEvent(element, “mousemove”);


// “subscribe”
var subscription = 
   mouseMoves.forEach({
      onNext: event => console.log(event), // error
      onError: error => console.error(error),// completed
      onCompleted: () => console.log(“done”)
   });
// “unsubscribe”
subscription.dispose();

Map over observable

var clicks = Observable.fromEvent(button, 'click');

var points = 
    clicks.map(function(e) {
        return {x: e.clientX, y: e.clientY};
    });

Drag and Drop

var drags = 
  mouseDowns.
    map(function(e) {
      return MouseMoves.
        takeUntil(MouseUps);
    }).
    concatAll();

THANK YOU.