Asynchronous programming you must... Use the flow, luke by @azendal

Slides de la quinta sesión de GDLJS del 29 de Septiembre.

Veremos las diferentes estrategias para programación asíncrona: Callbacks, node-style callbacks, promises, iterators, generators; exploraremos algunas posibilidades futuras como async y await, y veremos como estos patrones se aplican en flujos complejos de programación asíncrona. Finalmente veremos como usé Fluorine para resolver un flujo complejo que incluye paralelismo y asincronicidad.

Transcript

1. Asynchronous Programming you must... @azendal
2. Problema Cargar datos de varias APIS y procesar en la mejor secuencia posible para ganar velocidad.
3. Los buenos tiempos cargar A cargar B cargar C cargar D procesar A+B procesar B+C+D ya merito ok ya :)
4. jQuery/AJAX $.load(‘A’, function () {}); $.load(‘B’, function () {}); $.load(‘C’, function () {}); $.load(‘D’, function () {}); process1(); process2(); ya_mero(); ya();
5. jQuery/AJAX async $.load(‘A’, function () { $.load(‘B’, function () { $.load(‘C’, function () { $.load(‘D’, function () { process1(); process2(); ya_mero(); ya(); }); }); }); });
6. Promises $.load(‘A’).then(function() { return $.load(‘B’, function () {}); }).then(function() { return $.load(‘C’, function () {}); }).then(function() { return $.load(‘D’, function () {}); }).then(function() { process1(); process2(); ya_mero(); ya(); });
7. Promise utils Promise.all([$.load(‘A’), $.load(‘B’), $.load(‘C’), $.load(‘D’)]).then(function () { process1(); process2(); ya_mero(); ya(); });
8. Promise utils (really?) Promise.all([ $.load(‘A’), $.load(‘B’), $.load(‘C’), $.load(‘D’)]).then(function () { process1(); process2(); ya_mero(); ya(); });
9. Use the Flow Luke
10. Flow Based Programming Declara el flujo, no el programa Paralelismo Asincronicidad modularidad Menor carga mental
12. Fluorine https://github.com/freshout-dev/fluorine var flow = new Flow({name : ‘demo’}); flow.step().dependsOn()(function (step) {}); flow.step(‘process1’).dependsOn(‘fetch_a’, ‘fetch_b’)(function (step) { step.success() }); flow.step(‘process2’).dependsOn(‘fetch_b’, ‘fetch_c’)(function (step) { step.success() }); flow.step(‘fetch_a’).dependsOn()(function (step) { step.success() }); flow.step(‘fetch_b’).dependsOn()(function (step) { step.success() }); flow.step(‘fetch_c’).dependsOn()(function (step) { step.success() });
13. May the Flow be with you