TDC2013 - Programação assíncrona com Javascript

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

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/
47. Perguntas?
48. Obrigado breno_ferreira breno.ferreira@lambda3.com.br Aproveitem o evento! Inscrevam-se no DNAD!