Engenheira de software & cientista da computação
Programming languages, crypto, web
Gêmeos ascendente em escorpião
Sometimes speaker, sometimes community
manager, always shitposter
Ana Luiza Portello Bastos
Slide 2
Slide 2 text
● Saber o que é funcional e identificar o
que é um pensamento mais relacionado
a esse paradigma
● Influências disso em como lidamos com
front-end em soluções que existem
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
PENSAMENTO IMPERATIVO
Sequência de instruções que
alteram o estado do programa a
medida que são executadas
Slide 5
Slide 5 text
PENSAMENTO
IMPERATIVO
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
IMPERATIVA
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
"a maneira como o
programador pensa sobre a
tarefa de programar".
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
● ENTIDADES
● COM ESTADO(DADOS)
● COM COMPORTAMENTO
Slide 14
Slide 14 text
Funcional
Slide 15
Slide 15 text
FUNCIONAL
Slide 16
Slide 16 text
Funções
- Código que pode ser executado mais de uma vez
- Relação entre input e output
OOP x FUNCIONAL
- Base teorica por trás
- Dados e comportamento são separados
- OOP muda estado enquanto FP faz os dados fluírem
- Um o foco é em loops, if elses e metodos enquanto o outro chama funções(que
vao fazer a função desses if e elses)
- Um é declarativo outro imperativa
Slide 30
Slide 30 text
O que que isso tem a
ver com front-end?
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Olá
Netscape 1995
hello@anabastos.me
Email
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Scripting Language
…..
….if
……for
…..
Slide 35
Slide 35 text
Pensando de forma
orientada objetos
Slide 36
Slide 36 text
State
valor digitado
Behavior
Caso seja invalido fica
vermelho
hello@anabastos.me
Email
Slide 37
Slide 37 text
*****
Password
Cada um deles é um
componente com estado
E tem o estado e
comportamento referente
também ao botão
hello@anabastos.me
Email
ana
Name
OK
Slide 38
Slide 38 text
*****
Password
hello@anabastos.me
Email
ana
Name
OK
Checar se está logado em algum lugar
Se a pessoa clicar em um outro botão
enquanto esta nessa tela ela fecha
Se a pessoa clicar em tal coisa outra
acontece …. Etc etc….
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Interfaces extremamente
complexas
Mais abstrações e
complexidades
Slide 42
Slide 42 text
● Bibliotecas(JQuery, ImmutableJS, Lodash, )
● Linguagens em cima do JS(Typescript, Babel)
● Atualizações melhorando a linguagem
● Padrões de codigo
Slide 43
Slide 43 text
Quando a gente começa a
encapsular as
responsabilidades…
PUREZA
Quando as funções são puras, ou seja, independentes de
estado ou do ambiente, não precisamos dar a mínima
importância para quando ou onde elas serão computadas.
Slide 49
Slide 49 text
2 + 2 = 4
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Não existe dependência
ou acoplamento de algo
externo a função
Estruturas mutáveis representam
apenas ponteiros na memória
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
Linguagens funcionais
SEQUER PERMITEM MUTAÇOES
Slide 117
Slide 117 text
ELM
● Tem um sistema de tipos super forte
● A ideia é que o compilador é tão rigido te avisando dos possíveis
problemas que é muito dificil ter erros em runtime
Slide 118
Slide 118 text
● Função para criar o codigo HTML
● Eventos da interface são tratados de forma centralizada por pelo update
● O update muda o estado da aplicação
● A view atualiza o código.
Slide 119
Slide 119 text
DEBUGGING
Funções puras + imutabilidade
Slide 120
Slide 120 text
ELM
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
ELM
Slide 123
Slide 123 text
REDUX
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
Pra resolver um problema talvez
você precise do problema?
Slide 126
Slide 126 text
STATE MANAGEMENT
Controle do estado por meio de um single source of truth
Estado Global
Slide 127
Slide 127 text
Estado Global
View
Slide 128
Slide 128 text
Estado Global
View
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
● O estado fica isolado
● Usamos código puro para trata-lo
● Se precisa de um estado local acoplado, encapsule-o em
funções puras.
● Efeitos colaterais são necessários, mas podem ficar isolados e
abstraídos
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
A gente não modela só o
front-end assim…
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
Funcional é usado
para solucionar
problemas comuns
nossos
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
Temos muito a aprender com
todas as formas de pensar
-
Slide 138
Slide 138 text
Recentemente certos padrões e maneiras de pensar recebem
mais atenção por ser uma forma de ajudar a estruturar o seu
código e pensar na qualidade dele
Não precisamos das partes difíceis, precisamos das partes úteis
CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon and infographics &
images by Freepik
Perguntas?
hello@anabastos.me
anabastos.dev
Contact
@naluhh
anabastos