TDC2013 - Programação assíncrona com Javascript

TDC2013 - Programação assíncrona com Javascript

Palestra sobre programação assíncrona com Javascript no TDC2013 em Floripa, na trilha de HTML5/Javascript

22cac40ebe7d9e1e7854ea9808debd7b?s=128

Breno Ferreira

May 27, 2013
Tweet

Transcript

  1. Assincronia em Javascript Breno Ferreira @breno_ferreira github.com/brenoferreira

  2. Fora do mundo JS, a maior parte do código que

    escrevemos é síncrono.
  3. var client = new WebClient(); var html = client.DownloadString("http:/ /www.google.com");

    Console.WriteLine(html);
  4. Em JS, nosso código é assíncrono Afinal, só temos 1

    thread, e não podemos nos dar ao luxo de esperar algo terminar.
  5. Isso nos força a usar callbacks

  6. Quem nunca fez isso? (Piramid of Doom) $.get('http:/ /whateverjson.com', {

    ! success: function(json1){ ! ! ... ! ! $.post('http:/ /xpto.com', data, { ! ! ! ... ! ! ! success: function(res){ ! ! ! ! $.get('http:/ /anotherjson.com', { ! ! ! ! ! success: function(json2){ ! ! ! ! ! ! .... ! ! ! ! ! } ! ! ! ! }); ! ! ! } ! ! }); ! } });
  7. Reações <- Sua!

  8. Reações <- Do time!

  9. Callbacks são úteis

  10. Callbacks são úteis Quando são simples. $(‘.btn’).click(function(){ $(‘.text’).color(‘#FF0000’); });

  11. Callbacks são úteis

  12. Callbacks são úteis Mas qualquer coisa além disso, torna-se complexo

    fazer coisas simples. app.put('/todos/:id', function(req, res){ //Código em Node.JS para update no MongoDB getTodosCollection().findById(req.params.id, function(err, item){ if(err) res.send(500, ‘Erro ao atualizar os dados’); else { todo = item; todo.completed = req.body.completed; getTodosCollection().save(todo, function(err, item){ if(err) res.send(500, ‘Erro ao atualizar os dados’); else res.send(item); }); } }); });
  13. Mas existe solução? Promises Functional Reactive Programming (FRP) SIM!!!

  14. Promises A promise represents the eventual value returned from the

    single completion of an operation. http:/ /wiki.commonjs.org/wiki/Promises/A
  15. Promises - Interface .then(fulfilledHandler, errorHandler, progressHandler) .state() .resolve(value) .reject(error)

  16. Promises - state Unfulfilled Fulfilled Failed

  17. Promises - State Unfulfilled

  18. Promises - State Unfulfilled Fulfilled

  19. Promises - State Unfulfilled Fulfilled Failed

  20. Promises - State Unfulfilled Fulfilled Failed Isso ocorre somente uma

    vez!
  21. $.Deferred Promises no jQuery

  22. $.Deferred $.get('/twitter?q=' + query) .then( function(result) { ... }, function(error)

    { ... } );
  23. $.Deferred var asyncOp = function(){ var deferred = $.Deferred(); setTimeout(function(){

    deferred.resolve('done'); }, 1000); return deferred.promise(); };
  24. $.Deferred var asyncOp = function(){ var deferred = $.Deferred(); setTimeout(function(){

    deferred.reject('error'); }, 1000); return deferred.promise(); };
  25. $.Deferred - Continuations $.ajax(....) ! .then(function(resultado){ ! / /faz alguma

    coisa com resultado ! return $.ajax(...); / /outra ação async ! }) ! .then(function(outroResultado){ ! / /faz outra coisa com outro resultado ! }) ! .fail(function(erro){ ! / /erro caso qualquer operação falhe ! });
  26. $.Deferred - when var d1 = $.get('search.twitter.com/search.json?q=TDC2013'); var d2 =

    $.get('search.twitter.com/search.json?q=Floripa'); var d3 = $.get('search.twitter.com/search.json?q=Javascript'); $.when(d1, d2, d3) .done(function(tdc, floripa, jurere){ ... });
  27. Functional Reactive Programming Tratando eventos Like a Boss com Reactive

    Extensions (Rx)
  28. Na maior parte do tempo estamos reagindo ao ambiente

  29. Dados de location (GPS) Push notifications (web sockets, twitter, etc.)

    Eventos complexos de UI
  30. Iterator x Observer interface IEnumerable<T> { ! IEnumerator<T> GetEnumerator(); }

    interface IEnumerator<T> { ! bool MoveNext(); / / throws Exception ! T Current { get; } }
  31. Iterator x Observer interface IObservable<T> { ! IEnumerator<T> GetEnumerator(); }

    interface IEnumerator<T> { ! bool MoveNext(); / / throws Exception ! T Current { get; } }
  32. Iterator x Observer interface IObservable<T> { ! IEnumerator<T> GetEnumerator(); }

    interface IObserver<T> { ! bool MoveNext(); / / throws Exception ! T Current { get; } }
  33. Iterator x Observer interface IObservable<T> { ! void Subscribe(IObserver<T> observer)

    } interface IObserver<T> { ! bool MoveNext(); / / throws Exception ! T Current { get; } }
  34. Iterator x Observer interface IObservable<T> { ! void Subscribe(IObserver<T> observer)

    } interface IObserver<T> { ! void OnNext(T item) ! T Current { get; } }
  35. Iterator x Observer interface IObservable<T> { ! void Subscribe(IObserver<T> observer)

    } interface IObserver<T> { ! void OnNext(T item) ! void OnError(Exception ex) }
  36. Iterator x Observer interface IObservable<T> { ! void Subscribe(IObserver<T> observer)

    } interface IObserver<T> { ! void OnNext(T item) ! void OnError(Exception ex) void OnCompleted() }
  37. O verdadeiro poder do Rx filtros (where, distinct, skip, take,

    all, any) agregações (count, min, max, avg, sum, aggregate, scan) Transformações (map, flatMap) Combinações (concat, merge, zip) Schedulers You don’t know the power of Rx (yet)
  38. Fatality var sequencia = [ 38, / / up 38,

    / / up 40, / / down 40, / / down 37, / / left 39, / / right 37, / / left 39, / / right 66, / / b 65 / / a ];
  39. Fatality Rx.Observable.fromEvent(document, 'keyup') .select(function (e) { return e.keyCode; / /

    pega o keycode }) .bufferWithCount(10) / / ultimos 10 .where(function (input) { return arrayEquals(sequencia, input); }) / / sequencia correta .subscribe(function () { alert('FATALITY!'); / / FATALITY! });
  40. Mouse drag var mouseDown = Rx.Observable .fromEvent(canvas, 'mousedown') var mouseMove

    = Rx.Observable .fromEvent(canvas, 'mousemove') .map(function(e){ return getInputCoordinates(e); }); var mouseUp = Rx.Observable .fromEvent(canvas, 'mouseup');
  41. Mouse drag var mouseDrag = mouseMove .skipUntil(mouseDown) .takeUntil(mouseUp); mouseDrag.subscribe(function(coordinates){ ...

    })
  42. Quem usa? Netflix - Usado para serviços internos assíncronos. Escrito

    em Java Github - Cliente para Windows (C#) e Mac (Objective-C) SQL Server Stream Insight
  43. Open-Source http:/ /rx.codeplex.com/ (.NET, JS, C++) https:/ /github.com/Netflix/RxJava (Java, Scala,

    Groovy, Clojure, JRuby) https:/ /github.com/ReactiveCocoa/ ReactiveCocoa (Objective-C)
  44. Aprenda mais http:/ /www.introtorx.com (C#) http:/ /channel9.msdn.com/tags/Rx/ http:/ /rxwiki.wikidot.com/101samples http:/

    /csl.stanford.edu/~christos/pldi2010.fit/ meijer.duality.pdf (Paper do Erik Meijer sobre dualidade de IEnumerable x IObservable)
  45. http:/ /dnad.azurewebsites.net/

  46. None
  47. Perguntas?

  48. Obrigado breno_ferreira breno.ferreira@lambda3.com.br Aproveitem o evento! Inscrevam-se no DNAD!

  49. None