Programação Funcional em JavaScript na prática com Ramda

Não existe solução única para todos os problemas em tecnologia. O mesmo acontece para linguagens de programação! Aprenderemos mais sobre elas através do paradigma de programação funcional. Abordaremos paradigmas de programação, programação funcional e conceitos relacionados como funções de primeira classe, alta ordem e puras, estados, imutabilidade, transparência referencial, funções parciais, currying, composição e recursão. Veremos exemplos utilizando JavaScript puro e a biblioteca Ramda.js construída para o estilo de programação funcional.

Transcript

1. Marcel Gonçalves dos Santos @marcelgsantos programação funcional na prática c o Ramda JavaScript em
2. pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos
3. @phpsp phpsp.org.br
4. Interaja nas mídias sociais! 
 
 - fale sobre o evento, palestrantes e conteúdo - tire fotos do evento e publique 
 - interaja com outros participantes do evento - tire dúvidas ou dê feedbacks para os palestrantes
5. O que é programação funcional?
6. é um paradigma de programação que utiliza funções puras e foca na transformação do estado
7. O que é paradigma de programação?
8. são modelos ou estilos de programação suportados por linguagens que agrupam certas características comuns
9. os p ar adigmas de pro gr amação definem c om o os códigos são es tr ut ur ados…
10. principais paradigmas de programação 
 os dois principais paradigmas são o imperativo e o declarativo
11. paradigma imperativo 
 descreve a resolução de um problema através de comandos que o computador pode compreender e executar
12. paradigma imperativo 
 os paradigmas procedural e orientado a objetos são exemplos de paradigmas imperativos
13. let result = 0; / / Imperative code to sum 1 to 10 for (let i = 0; i < = 10; i + + ) { result += i; } console.log(result); / / 55
14. paradigma declarativo 
 permite especi fi car o que deve ser computado e não como deve ser computado
15. paradigma declarativo 
 os paradigmas funcional e lógico são exemplos de paradigmas declarativos
16. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; / / Declarative code to sum 1 to 10 const sum = (a, b) = > a + b; const result = numbers.reduce(sum); console.log(result);
17. paradigmas de algumas linguagens de programação 
 
 imperativo 
 procedural - C e Pascal orientado a objetos - C++, Java, PHP, Python e Ruby 
 
 declarativo 
 lógico - Prolog funcional - Clojure, Elixir, Elm, Erlang, F#, Haskell, Lisp, OCaml e Scala
18. Programação Funcional λ
19. paradigma de programação que utiliza funções puras e foca na transformação do estado
20. baseado no cálculo lambda proposto por Alonzo Church na década de 30
21. na programação funcional as funções são tratadas como conceito principal
22. Uma função matemática tr ata-se de um simples mapeamento en tr e o d om ínio e o c on tr a-d om ínio. 1 2 3 D B A C X Y
23. JavaScript λ
24. presente em todos os lugares como navegadores, servidores, mobile, desktop e dispositivos IoT
25. muito popular e utilizada
26. todos os programadores deveriam aprender
27. possui suporte para diversas funcionalidades de programação funcional
28. Estado λ
29. o estado de um programa é representado pelos valores dos dados armazenados na memória em qualquer ponto de execução do programa
30. o estado de uma aplicação é alterado a cada interação feita pelo usuário…
31. …ou pelo próprio sistema e pode ser representado por uma estrutura de dados
32. a maioria dos bugs são relacionados ao controle de estado
33. Funções Puras λ
34. 1. ter parâmetros de entrada 
 2. não depender do estado externo 
 3. retorno baseado nos valores de entrada 
 4. não devem causar efeitos colaterais funções puras
35. / / pure or impure function? let counter = 0; function increment() { counter + + ; return counter; } console.log(increment()); / / 1
36. / / pure function (ES5 syntax) function add(x, y) { return x + y; } console.log(add(2, 3)); / / 5
37. / / pure function (ES6 syntax) const add = (x, y) = > x + y; console.log(add(2, 3)); / / 5
38. por que utilizar funções puras? 
 são reutilizáveis, componíveis, fáceis de testar, fáceis de cachear e paralelizáveis
39. transparência referencial 
 propriedade que garante que a saída de uma função pura sempre será a mesma dado um mesmo conjunto de argumentos
40. / / referential transparency const add = (x, y) = > x + y; console.log(add(2, 3) = = = 5); / / true console.log(5 = = = 5); / / true
41. pode não ser fácil criar funções puras
42. porém, a restritividade ajuda a melhorar o foco
43. Mais sobre Funções λ
44. funções de alta ordem e 
 funções de primeira classe 
 são funções que podem ser atribuídas a variáveis, passadas como argumentos e retornadas de uma função
45. / / high - order function const add = (x, y) = > x + y; const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce(add); const sum10 = numbers.reduce(add, 10); console.log(sum); / / 15 console.log(sum10); / / 25
46. funções anônimas 
 funções que não possuem nome e que, geralmente, são passadas como argumento ou atribuídas
47. / / anonymous function const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((x, y) = > x + y); console.log(sum); / / 15
48. closures 
 funções que possuem acesso à valores do escopo externo
49. / / closure function function greet(greeting) { return function (name) { return `${greeting} ${name}!`; }; } const greet2 = greeting = > name = > `${greeting} ${name}!`; console.log(greet('Hello')('Mary')); / / Hello Mary! console.log(greet2('Hello')('John')); / / Hello John!
50. recursão 
 é quando uma função é definida em termos de si própria, ou seja, quando a função chama ela mesma
51. diferença entre função e procedimento (procedure) 
 uma função recebe um valor e retorna um resultado; um procedimento é um conjunto de comandos executados numa ordem
52. “D on 't think of functi on s as a c ol lecti on of ins tr ucti on s. Think of them as n on -des tr uctive op er ati on s on input `d ou ble = n => n * 2;`” Eric Ellio tt , 2016. https:/ /twitter.com/_ericelliott/status/685172918784004097
53. memoize 
 técnica que permite que funções custosas sejam cacheadas para execuções posteriores mais rápidas
54. Imutabilidade λ
55. a imutabilidade diz que um dado não pode ser alterado após a sua criação
56. a imutabilidade permite maior con fi ança e evita que erros ocorram
57. o JavaScript não possui suporte a dados imutáveis de forma nativa
58. porém, pode-se trabalhar com dados imutáveis em JavaScript utilizando algumas técnicas
59. Currying e aplicação parcial λ
60. o currying é a técnica que permite transformar uma função que recebe múltiplos argumentos em uma função que…
61. …recebe apenas um argumento e que retorna uma função que aceita os argumentos restantes
62. a aplicação parcial é quando se executa uma função e passa apenas parte de seus argumentos
63. a aplicação parcial permite fazer a especialização de uma função mais genérica
64. / / specialization from a curried function / / using partial application const greet = R.curry((greeting, name) = > `${greeting} ${name}`); const greetMorning = greet('Good Morning'); console.log(greetMorning('Alice')); / / Good Morning Alice
65. currying e aplicação parcial são recursos muito utilizados em programação funcional
66. na programação funcional deve-se levar em consideração a ordem dos parâmetros
67. os parâmetros mais genéricos devem vir mais para o início e os parâmetros mais especí fi cos devem vir mais para o fi nal
68. o JavaScript não possui suporte nativo para currying como nas linguagens puramente funcionais Elm ou Haskell
69. Composição de Funções λ
70. a composição é o processo de combinar uma ou mais funções para criar uma nova função
71. / / composing some functions to achieve a new behaviour const sentence = 'estava à toa na vida o meu amor me chamou pra ver a banda passar cantando coisas de amor'; const wordCount = R.length(R.split(' ', sentence)); console.log(wordCount); / / 19
72. é uma solução elegante e legível e ajuda a evitar a utilização do aninhamento de funções
73. o Ramda possui uma função que permite criar uma nova função a partir da composição de funções
74. / / create a function using composition const sentence = 'estava à toa na vida o meu amor me chamou pra ver a banda passar cantando coisas de amor'; const countWords = R.compose(R.length, R.split); console.log(countWords(' ', sentence)); / / 19
75. Biblioteca 
 Ramda λ
76. uma biblioteca construída para o estilo de programação funcional que facilita a utilização de pipelines e dados imutáveis
77. possui foco no estilo puramente funcional
78. todas as funções do Ramda são auto-curried
79. os argumentos das funções do Ramda são organizados de forma a facilitar a utilização de currying
80. Caso de Uso 1 somar os preços dos produtos de um carrinho de compras
81. / / shopping cart const cart = [ {id: 1, product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them 
 / / using intermediate values const cartPrices = R.map(item = > item.price, cart); const cartSum = R.sum(cartPrices); console.log(cartSum); / / 1877 realiza o mapeamento da lista de produtos (objetos) para uma lista de preços (números) faz a somatória da lista de números e retorna o total Passo 1
82. / / shopping cart const cart = [ {id: 1, product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them 
 / / using function composition const totalCart = R.compose( R.sum, R.map(item = > item.price), ); console.log(totalCart(cart)); / / 1877 cria uma nova função a partir da composição de funções e elimina valores intermediários Passo 2 aplicação parcial da função map a composição é feita da direita para a esquerda
83. / / shopping cart const cart = [ {id: 1, product: 'iPhone', price: 499}, {id: 2, product: 'Kindle', price: 179}, {id: 3, product: 'Macbook Pro', price: 1199}, ]; / / get prices from shopping cart and sum them / / using function composition with pipe const totalCart = R.pipe( R.map(item = > item.price), R.sum, ); console.log(totalCart(cart)); / / 1877 Passo 3 o pipe de funções é feito da esquerda para a direita e facilita a leitura do código
84. Caso de Uso 2 limpar dados vindo de um formulário e realizar um cálculo
85. / / cleaning data from an input const price = '100'; const discount = (perc, value) = > perc * value; let priceInt = parseInt(price); let priceDiscount = discount(0.2, priceInt); console.log(priceDiscount); / / 20 Passo 1
86. / / cleaning data from an input const price = '100'; const discount = (perc, value) = > perc * value; / / using partial application const discount20 = R.partial(discount, [0.2]); let priceInt = parseInt(price); let priceDiscount = discount20(priceInt); console.log(priceDiscount); / / 20 Passo 2 cria uma nova função a partir da aplicação parcial de uma existente
87. / / cleaning data from an input const price = '100'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / 20 Passo 3 cria uma nova função a partir da composição de funções utilizando a função pipe e elimina valores intermediários
88. / / cleaning data from an input const price = 'lambda!'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / null Passo 4 erro ao receber um valor não numérico
89. / / cleaning data from an input const price = 'lambda!'; const discount = (perc, value) = > perc * value; / / using function composition const priceDiscount = R.pipe( parseInt, R.defaultTo(0), R.partial(discount, [0.2]), ); console.log(priceDiscount(price)); / / 0 Passo 5 retorna o valor padrão para o caso de um valor não truthy
90. Outras Bibliotecas λ
91. 1. RxJS 
 2. Lodash 
 3. Immutable.js 
 4. HyperApp outras bibliotecas
92. Conclusão
93. a programação funcional não é sobre não ter estado…
94. …e sim sobre eliminar estado e efeito colateral sempre que possível e controlar efeitos colaterais quando necessário
95. existem inúmeros conceitos relacionados a programação funcional como functors, mônades, lazy evaluation, lens, tail call optimization…
96. vá em frente e divirta-se!
97. Referências
98. 1. Mostly Adequate Guide 
 2. Functional-Light JavaScript 
 3. Ramda Docs 
 4. JavaScript Funcional - Arthur Xavier referências
99. Avalie!
100. @marcelgsantos speakerdeck.com/marcelgsantos Obrigado. Perguntas?