Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Programação Funcional Reativa em Javascript

Avatar for Pedro Araujo Pedro Araujo
November 09, 2016

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

Avatar for Pedro Araujo

Pedro Araujo

November 09, 2016
Tweet

More Decks by Pedro Araujo

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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?
  4. 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?
  5. 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
  6. 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.
  7. 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
  8. Funções puras 1. O mesmo input produz sempre o mesmo

    output. 2. Produz nenhum efeito colateral. (imutabilidade)
  9. 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
  10. Funções puras let x = [1, 2, 3, 4, 5,

    6]; x.splice(3); // [4, 5, 6] console.log(x); // [1, 2, 3] IMPURA
  11. Funções puras let x = [1, 2, 3, 4, 5,

    6]; x.pop(6); // 6 console.log(x); // [1, 2, 3, 4, 5]; IMPURA
  12. 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
  13. 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];
  14. Currying function add(x, y) { return x + y }

    function add(x) { return function(y) { return x + y; } } Antes: Depois:
  15. Currying function slice(x) { return function(y) { return function(z) {

    return z.slice(x, y); } } } let teaser = slice(0); teaser(60)(getText(element));
  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. 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;
  18. Functors e Monads Functor é qualquer coisa que implementa map.

    Monad é um functor que implementa flatMap.
  19. Functors function box(value) { this.value = value; } function boxFunctor(x)

    { return new box(x); } boxFunctor(10) // box { value: 10 }
  20. 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
  21. 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); });
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. Um paradigma de programação para programar fluxo de dados assíncronos

    usando partes da programação funcional. PROGRAMAÇÃO FUNCIONAL E REATIVA é...
  28. 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/