Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FRONTIN | Elas Programam - Programação Funciona...

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

Ana Luiza Portello

April 29, 2023
Tweet

More Decks by Ana Luiza Portello

Other Decks in Programming

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
  3. Funções - Código que pode ser executado mais de uma

    vez - Relação entre input e output
  4. 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
  5. ***** Password Cada um deles é um componente com estado

    E tem o estado e comportamento referente também ao botão [email protected] Email ana Name OK
  6. ***** Password [email protected] 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….
  7. • Bibliotecas(JQuery, ImmutableJS, Lodash, ) • Linguagens em cima do

    JS(Typescript, Babel) • Atualizações melhorando a linguagem • Padrões de codigo
  8. 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.
  9. PENSAMENTO IMPERATIVO Vou num restaurante com amigos Filtra o que

    estiver abaixo de 5 reais Precisa adicionar os 10% E somar o valor total
  10. - Mutações de qualquer variável ou objeto - Logs -

    Banco de dados - Async / API - Fazer trigger de algum processo
  11. Se a referência mudou eu tive uma mudança Se a

    referência não mudou está igual
  12. state REF 21909 { name: "Ola" address: {..} } New

    State { name: "Ola" address: {..} }
  13. 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
  14. • 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.
  15. ELM

  16. ELM

  17. • 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
  18. 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
  19. CREDITS: This presentation template was created by Slidesgo, including icons

    by Flaticon and infographics & images by Freepik Perguntas? [email protected] anabastos.dev Contact @naluhh anabastos