Programação Funcional Reativa em Javascript

Apresentação no 1º Meetup do PagSeguro Developers sobre Programação Funcional Reativa em Javascript

Outras referências:
https://youtu.be/9QveBbn7t_c - Monad
https://youtu.be/e-5obm1G_FY - FP

Transcript

1. PROGRAMAÇÃO FUNCIONAL REATIVA
2. demos...
3. PROGRAMAÇÃO FUNCIONAL E REATIVA é... 1. Uma maneira de ter a sua apresentação aprovada nas conferências. 2. A mais recente maneira que desenvolvedores JS inventou para impressionar seus colegas. fim, obrigado! :D
4. Pedro Araujo @pedrotcaraujo
6. https://www.meetup.com/Javascript-SP/
7. Software não é como o jogo Jenga
8. + O QUE É PROGRAMAÇÃO FUNCIONAL 1. Paradigma de programação. 2. Code style. 3. Mindset. 4. Sexy. <3
9. map, filter, reduce não são programação funcional...
10. map, filter, reduce são apenas tools
11. importância da separação COISAS SOBRE FP QUE VAMOS CONHECER... funções puras curry e composition functors e monads
12. importância da separação funções puras curry e composition functors e monads COISAS SOBRE FP QUE VAMOS CONHECER...
13. PAGSEGURO | TechBlog E ai Sr. Pedro sair Admin Report Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura Programar é vida Comprovado cientificamente que program. reativa faz bem a saude e … Ver 10 mins leitura A morte Segundo a fonte Arial Black, linguagens nao funcionais tende a morrer no … Ver 10 mins leitura Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura
14. function report(api) { let url = new URL(api); let params = { id: window.location.search, time: new Date().getTime(); } Object.keys(params).forEach(key => url.searchParams.append(key, params[key])); return fetch(url).then((res) => res); } separação: input e environment Qual a melhor maneira de testar?
15. function report(api, params) { let url = new URL(api); Object.keys(params).forEach(key => url.searchParams.append(key, params[key])); return fetch(url).then((res) => res); } separação: input e environment let api = "https://blog.pagseguro.com.br/api"; let params = { id: window.location.search, time: new Date().getTime(); }; report(api, params).then(data => /* … */); Que tal assim?
16. PAGSEGURO | TechBlog E ai Sr. Pedro sair Admin Report Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura Programar é vida Comprovado cientificamente que program. reativa faz bem a saude e … Ver 10 mins leitura A morte Segundo a fonte Arial Black, linguagens nao funcionais tende a morrer no … Ver 10 mins leitura Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura
17. Separação: mutabilidade e os cálculos function teaser(size, element) { setText(element, slice(0, size, getText(element))); } Cálculo Mutação Problema: teaser está fazendo duas coisas, mutação e cálculo.
18. Separação: mutabilidade e os cálculos compose(setText, teaser(60), getText) Pipeline de cálculo independente const teaser = slice(0); // curry
19. importância da separação funções puras curry e composition functors e monads COISAS SOBRE FP QUE VAMOS CONHECER...
20. Lembra da professora de matemática? Peça desculpas...
21. Funções puras function(x, y) { return x + y; } (x, y) -> x + y
22. Funções puras (x, y) => { return x + y; } (x, y) -> x + y
23. Funções puras (x, y) => x + y; (x, y) -> x + y 7 3 10 o mesmo input é sempre o mesmo output SEM EFEITO COLATERAL! 8 4 12
24. Funções puras 1. O mesmo input produz sempre o mesmo output. 2. Produz nenhum efeito colateral. (imutabilidade)
25. Funções puras function square(x) { return x * x; } PURA
26. Funções puras let x = [1, 2, 3, 4, 5, 6]; x.slice(3); // [4, 5, 6] console.log(x); // [1, 2, 3, 4, 5, 6] PURA
27. Funções puras let x = [1, 2, 3, 4, 5, 6]; x.splice(3); // [4, 5, 6] console.log(x); // [1, 2, 3] IMPURA
28. Funções puras let x = [1, 2, 3, 4, 5, 6]; x.pop(6); // 6 console.log(x); // [1, 2, 3, 4, 5]; IMPURA
29. Funções puras let x = [1, 2, 3, 4, 5, 6]; x.slice(-1); // [6] console.log(x); // [1, 2, 3, 4, 5, 6] PURA
30. Funções puras let x = [1, 2, 3, 4, 5, 6]; x[x.length -1]; // 6 console.log(x); // [1, 2, 3, 4, 5, 6];
31. Funções puras são mais... 1. Confiáveis 2. Testáveis 3. Portáveis 4. Memoizáveis
32. importância da separação funções puras curry e composition functors e monads COISAS SOBRE FP QUE VAMOS CONHECER...
33. Currying function add(x, y) { return x + y } function add(x) { return function(y) { return x + y; } } Antes: Depois:
34. Currying function slice(x) { return function(y) { return function(z) { return z.slice(x, y); } } } let teaser = slice(0); teaser(60)(getText(element));
35. PAGSEGURO | TechBlog E ai Sr. Pedro sair Admin Report Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura Programar é vida Comprovado cientificamente que program. reativa faz bem a saude e … Ver 10 mins leitura A morte Segundo a fonte Arial Black, linguagens nao funcionais tende a morrer no … Ver 10 mins leitura Voce sabia? A palavra imperativa é a chave para todo mal do … Ver 10 mins leitura
36. Composition const greeting = (name, male) => `E ai ${male ? `Sr.` : `Sra.`} ${name}`;
37. Composition const formalGreeting = (name) => `Olá ${name}` const casualGreeting = (name) => `E ai ${name}` const male = (name) => `Sr. ${name}` const female = (name) => `Sra. ${name}` const doctor = (name) => `Dr. ${name}` const person = (name) => `${name}` casualGreeting(male(person('Pedro')); const greeting = compose(casualGreeting, male, person); greeting('Pedro'); // E ai Sr. Pedro;
38. importância da separação funções puras curry e composition functors e monads COISAS SOBRE FP QUE VAMOS CONHECER...
39. Functors e Monads Functor é qualquer coisa que implementa map. Monad é um functor que implementa flatMap.
40. Functors [1,2,3].map(n => n + 1) // [2,3,4] FUNCTOR
41. Functors function box(value) { this.value = value; } function boxFunctor(x) { return new box(x); } boxFunctor(10) // box { value: 10 }
42. Functors function plus3(x) { return x + 3 } box.prototype.map = function(fn) { return boxFunctor(fn(this.value)); } boxFunctor(2).map(plus3) // box { value: 5 } FUNCTOR
43. Functors
44. Monads MONAD fetch("https://algumacoisa.com/fulano/1") .then(function (result) { return result.json; //Retorna um valor, também pode lançar um erro }) .then(function (parsedJSON) { var contactId = parsedJSON.somebody[0]; return fetch("https://algumacoisa.com/siclano/" + contactId); // Uma promise dentro de outra promise }) .then(function (result) { return result.json(); // ‘result’ de https://algumacoisa.com/siclano/ }, function (err) { //Trata um erro console.error(err); });
45. Monads Array.prototype.flatMap = function(lambda) { return [].concat.apply([], this.map(lambda)); }; var half = function(val) { return val % 2 == 0 ? [val / 2] : []; } [20].map(half).map(half).map(half); //[[10]]... [[5]]... [[]] [20].flapMap(half).flapMap(half).flapMap(half); //[10]... [5]... [] MONAD
46. Monads
47. + PROGRAMAÇÃO REATIVA
48. Programação Reativa é programar com fluxo de dados assíncronos. Eventos com esteroides
50. Dizem que tudo é stream, mas... o que é tudo?
51. Time interval Mouse events Network Video Formulários Services Array etc [1, 2, 3, 4] ...
53. let $btn = document.querySelector('button'); let clickStream = Rx.Observable.fromEvent($btn, 'click') let doubleclicks = clickStream .buffer(clickStream.debounce(250)) .map(list => list.length) .filter(x => x >= 2); doubleclicks.subscribe(e => console.log(e)) ClickStream - RxJS Observable
56. Observer Iterator
57. let iterator = getNumbers(); console.log(iterator.next()) // { value: 1, done: false } console.log(iterator.next()) // { value: 2, done: false } console.log(iterator.next()) // { value: 3, done: false } console.log(iterator.next()) // { value: 4, done: false } console.log(iterator.next()) // { value: 5, done: false } console.log(iterator.next()) // { done: true } Iterator pattern em JavaScript
58. document.addEventListener('mousemove', e => { console.log(e); }) Observer em JavaScript clientX: 1163, clientY: 491…} clientX: 1162, clientY: 491…} clientX: 1161, clientY: 491…} clientX: 1160, clientY: 491…} clientX: 1159, clientY: 491…} EMPURRA DADOS
59. Qual a relação entre Arrays e Eventos? Os dois são collections
60. let keyups = Rx.Observable.fromEvent($input, 'keyup') .map(e => e.target.value) .filter(e => e.length > 2) .debounce(500) .distinct() .flatMap(searchWiki) keyups.subscribe(renderData); Instant search - RxJS
64. http://rxmarbles.com/
65. http://jaredforsyth.com/rxvision/examples/playground/
66. Um paradigma de programação para programar fluxo de dados assíncronos usando partes da programação funcional. PROGRAMAÇÃO FUNCIONAL E REATIVA é...
68. Referências: • RP - https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 • Functors/Monads - https://medium.com/@tzehsiang/javascript-functor-applicative-monads-in-pi ctures-b567c6415221#.3dx8lyzi7 • FRP - https://www.youtube.com/watch?v=mmWCuSxSXeY • Async Programming - https://www.youtube.com/watch?v=BwwgmB73Hzw Praticar: • https://xgrommx.github.io/rx-book/index.html • http://reactivex.io/learnrx/ • http://rxmarbles.com/ • http://jaredforsyth.com/rxvision/examples/playground/
69. Valeu, é nois! @pedrotcaraujo