FRONTIN | Elas Programam - Programação Funcional no Front-end

Transcript

1. 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
2. • 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
4. PENSAMENTO IMPERATIVO Sequência de instruções que alteram o estado do programa a medida que são executadas
5. PENSAMENTO IMPERATIVO
7. IMPERATIVA
10. "a maneira como o programador pensa sobre a tarefa de programar".
13. • ENTIDADES • COM ESTADO(DADOS) • COM COMPORTAMENTO
14. Funcional
15. FUNCIONAL
16. Funções - Código que pode ser executado mais de uma vez - Relação entre input e output
20. Independentes Puras Dados fluem nelas
25. Pesquisa Mainstream Linguagens Declarativas Linguagens Imperativas Orientacao Objetos
26. Pesquisa Mainstream
28. Funcional Typed
29. 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
30. O que que isso tem a ver com front-end?
32. Olá Netscape 1995 hello@anabastos.me Email
34. Scripting Language <script> ….. ….if ……for ….. </script>
35. Pensando de forma orientada objetos
36. State valor digitado Behavior Caso seja invalido fica vermelho hello@anabastos.me Email
37. ***** 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
38. ***** 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….
41. Interfaces extremamente complexas Mais abstrações e complexidades
42. • Bibliotecas(JQuery, ImmutableJS, Lodash, ) • Linguagens em cima do JS(Typescript, Babel) • Atualizações melhorando a linguagem • Padrões de codigo
43. Quando a gente começa a encapsular as responsabilidades…
44. App Header Posts Footer Login Post Comments
46. PUREZA DECLARATIVO EFEITOS COLATERAIS IMUTABILIDADE
47. Funções x f(x) = x + 1 x + 1 f
48. 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.
49. 2 + 2 = 4
53. Não existe dependência ou acoplamento de algo externo a função
54. PUREZA DECLARATIVO EFEITOS COLATERAIS IMUTABILIDADE
56. PENSAMENTO IMPERATIVO Sequência de instruções que alteram o estado do programa a medida que são executadas
57. PENSAMENTO IMPERATIVO Vou num restaurante com amigos Filtra o que estiver abaixo de 5 reais Precisa adicionar os 10% E somar o valor total
59. Sequência de instruções que alteram o estado do programa a medida que são executadas
61. f(g(x))
62. PUREZA DECLARATIVO EFEITOS COLATERAIS IMUTABILIDADE
63. f(10) -> 11(?)
64. PUREZA != EFEITOS COLATERAIS
65. - Mutações de qualquer variável ou objeto - Logs - Banco de dados - Async / API - Fazer trigger de algum processo
66. Funcional não quer dizer que você não tem efeitos colaterais
67. PURO EFEITO COLATERAL
69. CLASS COMPONENTS - Salvar um valor inicial - Ler o valor - Update valor
73. FUNCTION COMPONENTS
74. Componente Props DOM
77. const [isItOn, setIsItOn] = React.useState(true) HOOKS comportamento acesso
78. Stateless components não tem Estado mas ainda assim lidam com ele HOOKS
79. (state, action)
81. Componente Input Output
83. Componente Mocked Input Output State Lifecycle
85. Componente
86. PUREZA DECLARATIVO EFEITOS COLATERAIS IMUTABILIDADE
87. IMUTABILIDADE INT: 1 REF 21909 COUNT COUNT++
88. IMUTABILIDADE INT: 2 REF 21909
89. INT: 1 REF 21909 COUNT INC INT: 2 REF 21909
92. OBJ REF 21909 variavel obj variavel other_obj
95. OBJ REF 21909 variavel obj variavel other_obj OBJ
96. const 1 REF 21909 2
97. const {name: "Ana"} REF 21909 REF 21923 "Ana"
98. const {name: "Bob"} REF 21909 REF 21923 "Bob"
99. valor x referência
100. Se a referência mudou eu tive uma mudança Se a referência não mudou está igual
102. Predictabilidade Change tracking Reatividade
103. a b re-renderizar
106. STATE MANAGEMENT - Salvar um valor inicial - Ler o valor - Update valor
107. setState <componente> muda a referência do estado <componente> (com novo estado) User input Reconciliation
108. setState()
109. state REF 21909 { name: "Ola" address: {..} } OBJ REF 21910
110. state REF 21909 { name: "Ola" address: {..} } New State { name: "Ola" address: {..} }
112. Imagine que esse mesmo objeto é referência em múltiplas variáveis em múltiplos lugares da sua aplicação
113. https://stackoverflow.com/questions/373419/whats-the-diffe rence-between-passing-by-reference-vs-passing-by-value
114. Estruturas mutáveis representam apenas ponteiros na memória
116. Linguagens funcionais SEQUER PERMITEM MUTAÇOES
117. 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
118. • 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.
119. DEBUGGING Funções puras + imutabilidade
120. ELM
122. ELM
123. REDUX
125. Pra resolver um problema talvez você precise do problema?
126. STATE MANAGEMENT Controle do estado por meio de um single source of truth Estado Global
127. Estado Global View
128. Estado Global View
130. • 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
132. A gente não modela só o front-end assim…
135. Funcional é usado para solucionar problemas comuns nossos
137. Temos muito a aprender com todas as formas de pensar -
138. 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
140. t.me/lambdastudygroup github.com/lambda-study-group meetup.com/Lambda-I-O-Sampa-Meetup Lambda.IO
141. 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