Trilha DevOps How we figured out we had a SRE team at JavaScript

1. JAVASCRIPT
FUNCIONAL
THE DEVELOPERS CONFERENCE
λ04/05/2017

2. HENRIQUE
RECIDIVE
DESENVOLVEDOR FULL-STACK
λTALLER.NET.BR
BLOG.TALLER.NET.BR

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. 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. PLATAFORMAS

6. PLATAFORMAS

8. PLATAFORMAS
Browsers

10. PLATAFORMAS
Browsers
Servidores

12. PLATAFORMAS
Browsers
Servidores
Microcontroladores

13. PLATAFORMAS
Browsers
Servidores
Microcontroladores
Mobile

14. ES6

15. ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}

16. ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}

17. ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}
const soma = (a, b) !=> a + b

18. ES6
!// Spread.
const object = {
foo: 'bar'
}
const anotherObject = {
!!...object,
baz: ‘qux'
}

19. ES6
!// Spread.
const object = {
foo: 'bar'
}
const anotherObject = {
!!...object,
baz: ‘qux'
}

21. {
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions"]
}
}]
]
}

22. {
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions"]
}
}]
]
}

23. TRANSPARÊNCIA
REFERENCIAL

24. var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}

25. var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}

26. var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
Não transparente

27. var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
Não transparente

28. PUREZA

29. PUREZA

30. SIDE EFFECTS

31. var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
setContent()

32. function setContent(element, content) {
element.innerHTML = content
}
const content = 'Lorem Ipsum'
const element = document
.getElementById('paragraph')
setContent(element, content)

33. function setContent(element, content) {
element.innerHTML = content
}
const content = 'Lorem Ipsum'
const element = document
.getElementById('paragraph')
setContent(element, content)

34. IMUTABILIDADE

35. let x = 1
let y = x
y = 2
!// x !== 1 (imutável)

36. let a = {}
let b = a
b.foo = true
!// a !== { foo: true } (mutável)

37. let c = { bar: ‘bar' }
!// Torna o objeto imutável.
Object.freeze(c)
c.baz = 'baz'
!// c = {bar: 'bar'} (imutável)

38. !// Cria um novo objeto.
let d = Object.assign({}, c, {
baz: 'baz'
})
!// Torna o objeto imutável.
Object.freeze(d)

39. HTTPS://GITHUB.COM/SWANNODETTE/MORI
HTTPS://GITHUB.COM/FACEBOOK/IMMUTABLE-JS

40. import { Map } = ‘immutable'
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set('b', 50)
map1.get('b') !// 2
map2.get('b') !// 50

41. RECURSÃO

42. 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

43. const fibonacci = n !=> (n !<= 1
? n
: fibonacci(n - 1) + fibonacci(n - 2))
fibonacci(10)
!// 55

44. FERRAMENTAS

45. FERRAMENTAS DE PRIMEIRA GERAÇÃO

46. FERRAMENTAS DE SEGUNDA GERAÇÃO

47. import { curry } from 'ramda'
const sum = (a, b) !=> a + b
const curriedSum = curry(sum)
const sumTen = curriedSum(a)
sumTen(5)
!// 15

48. import { curry, !__ } from 'ramda'
const divide = (a, b) !=> a / b
const curriedDivide = curry(divide)
const divideByTen = curriedDivide(!__, 10)
divideByTen(1000)
!// 100

50. FANTASY LAND

51. HTTPS://GITHUB.COM/FANTASYLAND/FANTASY-LAND

52. HTTPS://GITHUB.COM/CWMYERS/MONET.JS

53. HTTPS://GITHUB.COM/RAMDA/RAMDA-FANTASY

54. PORQUE USAR?
Desacoplamento
Testes automatizados
Codebase enxuta
Aplicações eficientes

55. THE END