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
   

   View Slide

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
   

   View Slide

3. View Slide

4. PENSAMENTO IMPERATIVO
   Sequência de instruções que
   alteram o estado do programa a
   medida que são executadas
   

   View Slide

5. PENSAMENTO
   IMPERATIVO
   

   View Slide

6. View Slide

7. IMPERATIVA
   

   View Slide

8. View Slide

9. View Slide

10. "a maneira como o
    programador pensa sobre a
    tarefa de programar".
    

    View Slide

11. View Slide

12. View Slide

13. ● ENTIDADES
    ● COM ESTADO(DADOS)
    ● COM COMPORTAMENTO
    

    View Slide

14. Funcional
    

    View Slide

15. FUNCIONAL
    

    View Slide

16. Funções
    - Código que pode ser executado mais de uma vez
    - Relação entre input e output
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. Independentes
    Puras
    Dados fluem nelas
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Pesquisa
    Mainstream
    Linguagens
    Declarativas
    Linguagens
    Imperativas
    Orientacao
    Objetos
    

    View Slide

26. Pesquisa
    Mainstream
    

    View Slide

27. View Slide

28. Funcional
    Typed
    

    View Slide

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
    

    View Slide

30. O que que isso tem a
    ver com front-end?
    

    View Slide

31. View Slide

32. Olá
    Netscape 1995
    hello@anabastos.me
    Email
    

    View Slide

33. View Slide

34. Scripting Language
    <br/>…..<br/>….if<br/>……for<br/>…..<br/>
    

    View Slide

35. Pensando de forma
    orientada objetos
    

    View Slide

36. State
    valor digitado
    Behavior
    Caso seja invalido fica
    vermelho
    hello@anabastos.me
    Email
    

    View Slide

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
    

    View Slide

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….
    

    View Slide

39. View Slide

40. View Slide

41. Interfaces extremamente
    complexas
    Mais abstrações e
    complexidades
    

    View Slide

42. ● Bibliotecas(JQuery, ImmutableJS, Lodash, )
    ● Linguagens em cima do JS(Typescript, Babel)
    ● Atualizações melhorando a linguagem
    ● Padrões de codigo
    

    View Slide

43. Quando a gente começa a
    encapsular as
    responsabilidades…
    

    View Slide

44. App
    Header
    Posts
    Footer
    Login
    Post
    Comments
    

    View Slide

45. View Slide

46. PUREZA
    DECLARATIVO
    EFEITOS COLATERAIS
    IMUTABILIDADE
    

    View Slide

47. Funções
    x
    f(x) = x + 1
    x + 1
    f
    

    View Slide

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.
    

    View Slide

49. 2 + 2 = 4
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. Não existe dependência
    ou acoplamento de algo
    externo a função
    

    View Slide

54. PUREZA
    DECLARATIVO
    EFEITOS COLATERAIS
    IMUTABILIDADE
    

    View Slide

55. View Slide

56. PENSAMENTO IMPERATIVO
    Sequência de instruções
    que alteram o estado do
    programa a medida que
    são executadas
    

    View Slide

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
    

    View Slide

58. View Slide

59. Sequência de instruções que
    alteram o estado do programa a
    medida que são executadas
    

    View Slide

60. View Slide

61. f(g(x))
    

    View Slide

62. PUREZA
    DECLARATIVO
    EFEITOS COLATERAIS
    IMUTABILIDADE
    

    View Slide

63. f(10) -> 11(?)
    

    View Slide

64. PUREZA
    !=
    EFEITOS COLATERAIS
    

    View Slide

65. - Mutações de qualquer variável ou objeto
    - Logs
    - Banco de dados
    - Async / API
    - Fazer trigger de algum processo
    

    View Slide

66. Funcional não quer dizer
    que você não tem efeitos
    colaterais
    

    View Slide

67. PURO
    EFEITO
    COLATERAL
    

    View Slide

68. View Slide

69. CLASS COMPONENTS
    - Salvar um valor inicial
    - Ler o valor
    - Update valor
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. FUNCTION COMPONENTS
    

    View Slide

74. Componente
    Props
    DOM
    

    View Slide

75. View Slide

76. View Slide

77. const [isItOn, setIsItOn] = React.useState(true)
    HOOKS
    comportamento
    acesso
    

    View Slide

78. Stateless components não tem
    Estado mas ainda assim lidam com ele
    HOOKS
    

    View Slide

79. (state, action)
    

    View Slide

80. View Slide

81. Componente
    Input
    Output
    

    View Slide

82. View Slide

83. Componente
    Mocked
    Input
    Output
    State
    Lifecycle
    

    View Slide

84. View Slide

85. Componente
    

    View Slide

86. PUREZA
    DECLARATIVO
    EFEITOS COLATERAIS
    IMUTABILIDADE
    

    View Slide

87. IMUTABILIDADE
    INT: 1
    REF 21909
    COUNT
    COUNT++
    

    View Slide

88. IMUTABILIDADE
    INT: 2
    REF 21909
    

    View Slide

89. INT: 1
    REF 21909
    COUNT
    INC
    INT: 2
    REF 21909
    

    View Slide

90. View Slide

91. View Slide

92. OBJ
    REF 21909
    variavel obj
    variavel other_obj
    

    View Slide

93. View Slide

94. View Slide

95. OBJ
    REF 21909
    variavel obj
    variavel other_obj
    OBJ
    

    View Slide

96. const
    1
    REF 21909
    2
    

    View Slide

97. const
    {name: "Ana"}
    REF 21909
    REF 21923
    "Ana"
    

    View Slide

98. const
    {name: "Bob"}
    REF 21909
    REF 21923
    "Bob"
    

    View Slide

99. valor
    x
    referência
    

    View Slide

100. Se a referência mudou eu tive uma
     mudança
     Se a referência não mudou está
     igual
     

     View Slide

101. View Slide

102. Predictabilidade
     Change tracking
     Reatividade
     

     View Slide

103. a b
     re-renderizar
     

     View Slide

104. View Slide

105. View Slide

106. STATE MANAGEMENT
     - Salvar um valor inicial
     - Ler o valor
     - Update valor
     

     View Slide

107. setState
     
     muda a
     referência do
     estado
     
     (com novo estado)
     User input Reconciliation
     

     View Slide

108. setState()
     

     View Slide

109. state
     REF 21909
     {
     name: "Ola"
     address: {..}
     }
     OBJ
     REF 21910
     

     View Slide

110. state
     REF 21909
     {
     name: "Ola"
     address: {..}
     }
     New
     State
     {
     name: "Ola"
     address: {..}
     }
     

     View Slide

111. View Slide

112. Imagine que esse mesmo objeto é
     referência em múltiplas variáveis
     em múltiplos lugares da sua
     aplicação
     

     View Slide

113. https://stackoverflow.com/questions/373419/whats-the-diffe
     rence-between-passing-by-reference-vs-passing-by-value
     

     View Slide

114. Estruturas mutáveis representam
     apenas ponteiros na memória
     

     View Slide

115. View Slide

116. Linguagens funcionais
     SEQUER PERMITEM MUTAÇOES
     

     View Slide

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
     

     View Slide

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.
     

     View Slide

119. DEBUGGING
     Funções puras + imutabilidade
     

     View Slide

120. ELM
     

     View Slide

121. View Slide

122. ELM
     

     View Slide

123. REDUX
     

     View Slide

124. View Slide

125. Pra resolver um problema talvez
     você precise do problema?
     

     View Slide

126. STATE MANAGEMENT
     Controle do estado por meio de um single source of truth
     Estado Global
     

     View Slide

127. Estado Global
     View
     

     View Slide

128. Estado Global
     View
     

     View Slide

129. View Slide

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
     

     View Slide

131. View Slide

132. A gente não modela só o
     front-end assim…
     

     View Slide

133. View Slide

134. View Slide

135. Funcional é usado
     para solucionar
     problemas comuns
     nossos
     

     View Slide

136. View Slide

137. Temos muito a aprender com
     todas as formas de pensar
     -
     

     View Slide

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
     

     View Slide

139. View Slide

140. t.me/lambdastudygroup
     github.com/lambda-study-group
     meetup.com/Lambda-I-O-Sampa-Meetup
     Lambda.IO
     

     View Slide

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
     

     View Slide