Javascript Funcional - TDC Florianópolis 2017

268 visualizações

Publicada em

Apresentação realizada por Henrique Recidive na edição de Florianópolis do evento The Developer's Conference 2017, na trilha de Programação Funcional.

Publicada em: Software
  • Seja o primeiro a comentar

Javascript Funcional - TDC Florianópolis 2017

  1. 1. JAVASCRIPT FUNCIONAL THE DEVELOPERS CONFERENCE λ04/05/2017
  2. 2. HENRIQUE RECIDIVE DESENVOLVEDOR FULL-STACK λTALLER.NET.BR BLOG.TALLER.NET.BR
  3. 3. História do JavaScript 1995 - Primeira release (Netscape Navigator 2) 1996 - Adoção pela Microsoft (Internet Explorer 3) 1997 - Padronização (ECMAScript) 1998 - ECMAScript 2 1999 - ECMAScript 3
  4. 4. História do JavaScript (continuação) 2003 - ECMAScript 4 é "abortado" 2009 - ECMAScript 5 2015 - ECMAScript 2015 (ES6) 2016 - ECMAScript 2016 (ES7) 2017 - ECMAScript 2017 (ES8)
  5. 5. PLATAFORMAS
  6. 6. PLATAFORMAS
  7. 7. PLATAFORMAS Browsers
  8. 8. PLATAFORMAS Browsers Servidores
  9. 9. PLATAFORMAS Browsers Servidores Microcontroladores
  10. 10. PLATAFORMAS Browsers Servidores Microcontroladores Mobile
  11. 11. ES6
  12. 12. ES6 !// Arrow functions. function soma(a, b) { return a + b }
  13. 13. ES6 !// Arrow functions. function soma(a, b) { return a + b }
  14. 14. ES6 !// Arrow functions. function soma(a, b) { return a + b } const soma = (a, b) !=> a + b
  15. 15. ES6 !// Spread. const object = { foo: 'bar' } const anotherObject = { !!...object, baz: ‘qux' }
  16. 16. ES6 !// Spread. const object = { foo: 'bar' } const anotherObject = { !!...object, baz: ‘qux' }
  17. 17. { "presets": [ ["env", { "targets": { "chrome": 52, "browsers": ["last 2 versions"] } }] ] }
  18. 18. { "presets": [ ["env", { "targets": { "chrome": 52, "browsers": ["last 2 versions"] } }] ] }
  19. 19. TRANSPARÊNCIA REFERENCIAL
  20. 20. var content = 'Lorem Ipsum'; function setContent() { document.getElementById('paragraph') .innerHTML = content; }
  21. 21. var content = 'Lorem Ipsum'; function setContent() { document.getElementById('paragraph') .innerHTML = content; }
  22. 22. var content = 'Lorem Ipsum'; function setContent() { document.getElementById('paragraph') .innerHTML = content; } Não transparente
  23. 23. var content = 'Lorem Ipsum'; function setContent() { document.getElementById('paragraph') .innerHTML = content; } Não transparente
  24. 24. PUREZA
  25. 25. PUREZA
  26. 26. SIDE EFFECTS
  27. 27. var content = 'Lorem Ipsum'; function setContent() { document.getElementById('paragraph') .innerHTML = content; } setContent()
  28. 28. function setContent(element, content) { element.innerHTML = content } const content = 'Lorem Ipsum' const element = document .getElementById('paragraph') setContent(element, content)
  29. 29. function setContent(element, content) { element.innerHTML = content } const content = 'Lorem Ipsum' const element = document .getElementById('paragraph') setContent(element, content)
  30. 30. IMUTABILIDADE
  31. 31. let x = 1 let y = x y = 2 !// x !== 1 (imutável)
  32. 32. let a = {} let b = a b.foo = true !// a !== { foo: true } (mutável)
  33. 33. let c = { bar: ‘bar' } !// Torna o objeto imutável. Object.freeze(c) c.baz = 'baz' !// c = {bar: 'bar'} (imutável)
  34. 34. !// Cria um novo objeto. let d = Object.assign({}, c, { baz: 'baz' }) !// Torna o objeto imutável. Object.freeze(d)
  35. 35. HTTPS://GITHUB.COM/SWANNODETTE/MORI HTTPS://GITHUB.COM/FACEBOOK/IMMUTABLE-JS
  36. 36. import { Map } from ‘immutable' const map1 = Map({ a: 1, b: 2, c: 3 }) const map2 = map1.set('b', 50) map1.get('b') !// 2 map2.get('b') !// 50
  37. 37. RECURSÃO
  38. 38. const recursiveSum = collection !=> collection.reduce((prev, curr) !=> (Array.isArray(curr) ? prev + recursiveSum(curr) : prev + curr), 0) const collection = [1, [2, [3, 4]], 5] recursiveSum(collection) !// 15
  39. 39. const fibonacci = n !=> (n !<= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2)) fibonacci(10) !// 55
  40. 40. FERRAMENTAS
  41. 41. FERRAMENTAS DE PRIMEIRA GERAÇÃO
  42. 42. FERRAMENTAS DE SEGUNDA GERAÇÃO
  43. 43. import { curry } from 'ramda' const sum = (a, b) !=> a + b const curriedSum = curry(sum) const sumTen = curriedSum(10) sumTen(5) !// 15
  44. 44. import { curry, !__ } from 'ramda' const divide = (a, b) !=> a / b const curriedDivide = curry(divide) const divideByTen = curriedDivide(!__, 10) divideByTen(1000) !// 100
  45. 45. FANTASY LAND
  46. 46. HTTPS://GITHUB.COM/FANTASYLAND/FANTASY-LAND
  47. 47. HTTPS://GITHUB.COM/CWMYERS/MONET.JS
  48. 48. HTTPS://GITHUB.COM/RAMDA/RAMDA-FANTASY
  49. 49. PORQUE USAR? Desacoplamento Testes automatizados Codebase enxuta Aplicações eficientes
  50. 50. THE END

×