Arthur Xavier, Researcher e Developer fala sobre Javascript Funcional no JS Experience'17 Saiba mais em https://eventos.imasters.com.br/jsexperience

1. PROGRAMAÇÃO
FUNCIONAL
EM
JAVASCRIPT

2. PROGRAMAÇÃO
FUNCIONAL
EM
JAVASCRIPT
COMO E POR QUÊ?

3. Sim, é minha única foto boa e eu uso ela pra tudo.
Estudante de Ciência da Computação apaixonado por
programação funcional e pesquisador independente
(do grego: de mentira) em linguagens de programação.
Não tenho muita coisa interessante pra falar de mim
mesmo então vou preencher o slide com lorem ipsum
dolor sit amet, consectetur adipiscing elit.
ARTHUR
XAVIER

4. — BRET VICTOR
“A tecnologia muda rápido, mas o modo
de pensar das pessoas muda devagar.”

5. THE FUTURE OF
PROGRAMMING
BRET VICTOR
youtu.be/8pTEmbeENF4
“Pode haver muita resistência a
novas formas de trabalho que
demandem que você desaprenda o
que já aprendeu e pense de forma
diferente.”

6. s : → ℤ = α ↦
0 se α = ε
x + s(β) se α = x • β
f : ℤ → ℕ = x ↦ |x|JEITO
ESTILO
PARADIGMAMINDSET

7. O QUE É
PROGRAMAR?

8. TRANSFORMAR
PROBLEMAPROBLEMAPROBLEMAPROBLEMAPROBLEMA

9. TRANSFORMAR
SOLUÇÃO

10. PROBLEMAPROBLEMAPROBLEMAPROBLEMAPROBLEMA
DECOMPOR

11. SOLUÇÃO
DECOMPOR

12. MINDSET

17. λ?

18. PROGRAMAÇÃO
IMPERATIVA
PROGRAMAÇÃO
DECLARATIVA
VS.

19. // const values : Array<number>;
console.log(values.map(x => x*x));

20. // const values : Array<number>;
let squares = [];
for (let value of values) {
squares.push(value*value);
}
console.log(squares);

21. // const names : Array<string>;
let promises = [];
for (let name of names) {
promises.push(name);
}
Promise.all(promises);

22. // const names : Array<string>;
Promise.all(names.map(getUserByName));

23. // const userId : string;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
for (let step of steps) {
await step(userId);
}

24. // const userId : string;
// Promise.sequence = ps => Promise.reduce(ps, (_, p) => p);
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
return Promise.sequence(steps.map(f => f(userId)));

25. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
for (let userId of userIds) {
for (let step of steps) {
await step(userId);
}
}

26. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
return Promise.sequence(steps.map(step => userIds.map(step)));

27. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
const promises = steps.map(step => userIds.map(step));
return Promise.sequence(promises);

28. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
for (let step of steps) {
await Promise.all(userIds.map(userId => step(userId));
}

29. // const userIds : Array<string>;
const steps = [
removeUserComments,
removeUserPosts,
removeUserFriends,
removeUserData,
];
const runStepOnUsers = step => Promise.all(userIds.map(step));
return Promise.sequence(steps.map(runStepOnUsers));

30. PROGRAMAÇÃO
IMPERATIVA
PROGRAMAÇÃO
DECLARATIVA
VS.

31. λ¿

32. — EU
“Paradigma de programação onde computações são
representadas por funções ou expressões puras,
evitando efeitos colaterais e dados mutáveis, e que
utiliza amplamente de composição de funções e
funções de primeira classe.”

33. ≠FUNÇÃO PROCEDIMENTO

34. X Y
x
f(x)
f : X → Y

35. FUNÇÃO (PURA)

36. — WIKIPEDIA
“Uma função ou expressão produz efeitos colaterais se ela
modifica algum estado fora de seu escopo ou realiza
alguma interação observável com as funções que a
chamaram ou com o mundo externo.”

37. function append(x) {
this.array.push(x);
}

38. function appendTo(array, x) {
array.push(x);
}

39. function appendTo(array, x) {
return [...array, x];
}

40. IMUTABILIDADE

41. function increment(counter) {
counter.value += 1;
}

42. function increment(counter) {
return {
...counter,
value: counter.value + 1,
};
}

43. function increment(counter) {
counter = {
...counter,
value: counter.value + 1,
};
return counter;
}

44. EFEITOS COLATERAIS

45. function sumOfSquares(array) {
let result = 0;
for (let x of array) {
result += x*x;
}
console.log(result);
};

46. function sumOfSquares(array) {
let result = 0;
for (let x of array) {
result += x*x;
}
Database.deleteEverything();
console.log(result);
};

47. function sumOfSquares(array) {
let result = 0;
for (let x of array) {
result += x*x;
}
return result;
};
console.log(sumOfSquares([2, 3, 5]));

48. const square = x => x*x;
const add = (a, b) => a + b;
function sumOfSquares(array) {
return array.map(square).reduce(add, 0);
}
console.log(sumOfSquares([2, 3, 5]));

49. function sumOfSquares(array) {
return array.reduce((x, sum) => sum + x*x, 0);
}
console.log(sumOfSquares([2, 3, 5]));

50. EFEITOS COLATERAIS?

51. EFEITOS!

52. DADOS
EFEITOS
EFEITOS
EFEITOS
EFEITOS

53. COMPOSIÇÃO

55. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

56. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

57. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

58. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

59. FUNÇÕES DE PRIMEIRA CLASSE

60. =FUNÇÃO VALOR

61. function* watchLoadMoreStarred() {
while (true) {
const {login} = yield take(actions.LOAD_MORE_STARRED);
yield fork(loadStarred, login, true);
}
}
function* loadStarred(login, loadMore) {
const starredByUser = yield select(getStarredByUser, login);
if (!starredByUser || loadMore)
yield call(fetchStarred, login, starredByUser.nextPageUrl);
}

62. FUNÇÕES DE ALTA ORDEMALTA

63. ABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃO

64. OTIMIZAÇÃO

65. ABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃOABSTRAÇÃO

66. mapfilter reduce

67. function buildElements(n, factory) {
return Array(n).fill(0)
.map(Math.random)
.map(factory);
}
appendToDom(10, x => <h2>{x}</h2>);

68. function buildElements(n, factory) {
return Array(n).fill(0)
.map(Math.random)
.map(factory);
}
appendToDom(10, h2);

69. function buildElements(n, factory) {
return Array(n).fill(0)
.map(compose(factory, Math.random));
}
appendToDom(10, h2);

70. λ!

71. function getAvatarURL(user) {
return Maybe(user)
.then(user => user.avatar)
.then(avatar => avatar.url);
}
getAvatarURL({ avatar: { url: 'barbaz' } });
// == Maybe('test')
getAvatarURL(null);
// == Maybe(null)
getAvatarURL({ name: 'foobar' });
// == Maybe(null)

72. function getAvatarURL(user) {
let user;
return Maybe(user)
.then(_user => {
user = _user;
return _user.name;
})
.then(name => user.hasPage ? nameToURL(name) : null);
}
generateUserURL({ name: 'foobar', hasPage: true });
// == Maybe('https://fezbok/foobar')
generateUserURL({ name: 'barbaz' });
// == Maybe(null)
generateUserURL(null);
// == Maybe(null)
getAvatarURL({ hasPage: true });
// == Maybe(null)

73. function Do(m, f) {
const gen = f();
function doRec(v) {
const {value, done} = gen.next(v);
const valueM = value instanceof m ? value : m.of(value);
return done ? valueM : valueM.then(doRec);
}
return doRec(undefined);
}

74. function generateUserURL(userMaybe) {
return Do(Maybe, function*() {
let user = yield userMaybe;
let name = yield user.name;
return user.hasPage ? nameToURL(name) : null;
});
}
generateUserURL({ name: 'foobar', hasPage: true });
// == Maybe('https://fezbok/foobar')
generateUserURL({ name: 'barbaz' });
// == Maybe(null)
generateUserURL(null);
// == Maybe(null)
getAvatarURL({ hasPage: true });
// == Maybe(null)

75. // Promise.of = Promise.resolve;
Do(Promise, function*() {
let hello = yield new Promise(resolve => {
setTimeout(() => resolve('Hello'), 1000);
});
let world = yield 'world!';
console.log(hello, world);
});

76. // Array.of = a => [a];
// Array.prototype.then = function(f) {
// return [].concat.apply([], this.map(f));
// };
Do(Array, function*() {
let a = yield [1, 2, 3];
let b = yield ['a', 'b'];
console.log(a, b);
});
// 1, 'a'
// 1, 'b'
// 2, 'a'
// 2, 'b'
// 3, 'a'
// 3, 'b'

77. // Array.of = a => [a];
// Array.prototype.then = function(f) {
// return [].concat.apply([], this.map(f));
// };
Do(Array, function*() {
let a = yield [1, 2, 3];
let b = yield ['a', 'b'];
console.log(a, b);
});
// 1, 'a'
// 1, 'b'
// 2, 'a'
// 2, 'b'
// 3, 'a'
// 3, 'b'

78. // Array.of = a => [a];
// Array.prototype.then = function(f) {
// return [].concat.apply([], this.map(f));
// };
[1, 2, 3].then(a => {
['a', 'b'].then(b => console.log(a, b));
});
// 1, 'a'
// 1, 'b'
// 2, 'a'
// 2, 'b'
// 3, 'a'
// 3, 'b'

79. λ!

80. ?

84. 1Evite mutação
Use dados e APIs imutáveis e sempre use const ao invés de let e var.
Reduz o risco de estado compartilhado;

85. 2Evite dependências implícitas
Podem trazer efeitos colaterais indesejados e estado compartilhado.
this é uma dependência implícita;

86. 3Desacople dados e comportamento
Pense em unidades de trabalho pequenas e genéricas.
Abstraia e componha.

87. — EU
“Programação funcional é uma ótima
ferramenta para controle de complexidade.”

88. O(n²)

90. AbstractSingletonProxyFactoryBeanImpl

91. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem
de execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE TESTAR
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

92. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem
de execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE REFATORAR
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

93. 1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;
3 Ligado a uma ordem de
execução predefinida.
CÓDIGO
IMPERATIVO É
DIFÍCIL
DE ENTENDER
Difícil de identificar e
decompor em partes;
Depende de recursos
compartilhados;
Ligado a uma ordem de
execução predefinida.

94. CÓDIGO
FUNCIONAL É
FÁCIL
DE ENTENDER
1 Difícil de identificar e
decompor em partes;
2 Depende de recursos
compartilhados;asdasda
sdas
3 Ligado a uma ordem de
execução predefinida.
Força a decomposição
de tarefas complexas;
Abstrai e generaliza
estruturas de controle
de fluxo;
Completamente
previsível.

95. REQUER
DESAPRENDER

96. REQUER
REAPRENDER

97. Brian Lonsdorf (Dr. Boolean)
PROFESSOR FRISBY’S
MOSTLY ADEQUATE GUIDE
TO FUNCTIONAL
PROGRAMMING

98. Luis Atencio
FUNCTIONAL
PROGRAMMING
IN JAVASCRIPT

99. Evan Czaplicki
ELM

100. @arthurxavierx @arthur-xavier
goo.gl/kL4SNH