JAVASCRIPT FUNCIONALTHE DEVELOPERS CONFERENCE λ04/05/2017

HENRIQUE RECIDIVEDESENVOLVEDOR 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

PLATAFORMASBrowsers

PLATAFORMASBrowsers

Servidores

PLATAFORMASBrowsers

Servidores

Microcontroladores

PLATAFORMASBrowsers

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