JAVASCRIPT
FUNCIONAL
THE DEVELOPERS CONFERENCE
λ04/05/2017
HENRIQUE
RECIDIVE
DESENVOLVEDOR FULL-STACK
λTALLER.NET.BR
BLOG.TALLER.NET.BR
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
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)
PLATAFORMAS
PLATAFORMAS
PLATAFORMAS
Browsers
PLATAFORMAS
Browsers
Servidores
PLATAFORMAS
Browsers
Servidores
Microcontroladores
PLATAFORMAS
Browsers
Servidores
Microcontroladores
Mobile
ES6
ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}
ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}
ES6
!// Arrow functions.
function soma(a, b) {
return a + b
}
const soma = (a, b) !=> a + b
ES6
!// Spread.
const object = {
foo: 'bar'
}
const anotherObject = {
!!...object,
baz: ‘qux'
}
ES6
!// Spread.
const object = {
foo: 'bar'
}
const anotherObject = {
!!...object,
baz: ‘qux'
}
{
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions"]
}
}]
]
}
{
"presets": [
["env", {
"targets": {
"chrome": 52,
"browsers": ["last 2 versions"]
}
}]
]
}
TRANSPARÊNCIA
REFERENCIAL
var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
Não transparente
var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
Não transparente
PUREZA
PUREZA
SIDE EFFECTS
var content = 'Lorem Ipsum';
function setContent() {
document.getElementById('paragraph')
.innerHTML = content;
}
setContent()
function setContent(element, content) {
element.innerHTML = content
}
const content = 'Lorem Ipsum'
const element = document
.getElementById('paragraph')
setContent(element, content)
function setContent(element, content) {
element.innerHTML = content
}
const content = 'Lorem Ipsum'
const element = document
.getElementById('paragraph')
setContent(element, content)
IMUTABILIDADE
let x = 1
let y = x
y = 2
!// x !== 1 (imutável)
let a = {}
let b = a
b.foo = true
!// a !== { foo: true } (mutável)
let c = { bar: ‘bar' }
!// Torna o objeto imutável.
Object.freeze(c)
c.baz = 'baz'
!// c = {bar: 'bar'} (imutável)
!// Cria um novo objeto.
let d = Object.assign({}, c, {
baz: 'baz'
})
!// Torna o objeto imutável.
Object.freeze(d)
HTTPS://GITHUB.COM/SWANNODETTE/MORI
HTTPS://GITHUB.COM/FACEBOOK/IMMUTABLE-JS
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
RECURSÃO
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
const fibonacci = n !=> (n !<= 1
? n
: fibonacci(n - 1) + fibonacci(n - 2))
fibonacci(10)
!// 55
FERRAMENTAS
FERRAMENTAS DE PRIMEIRA GERAÇÃO
FERRAMENTAS DE SEGUNDA GERAÇÃO
import { curry } from 'ramda'
const sum = (a, b) !=> a + b
const curriedSum = curry(sum)
const sumTen = curriedSum(10)
sumTen(5)
!// 15
import { curry, !__ } from 'ramda'
const divide = (a, b) !=> a / b
const curriedDivide = curry(divide)
const divideByTen = curriedDivide(!__, 10)
divideByTen(1000)
!// 100
FANTASY LAND
HTTPS://GITHUB.COM/FANTASYLAND/FANTASY-LAND
HTTPS://GITHUB.COM/CWMYERS/MONET.JS
HTTPS://GITHUB.COM/RAMDA/RAMDA-FANTASY
PORQUE USAR?
Desacoplamento
Testes automatizados
Codebase enxuta
Aplicações eficientes
THE END

Javascript Funcional - TDC Florianópolis 2017