Front-end funcional ELUG #11

Front-end funcional ELUG #11

Fcfcfbcdbe8543b6d76c7566d6e1693c?s=128

Ana Luiza Portello

November 04, 2017
Tweet

Transcript

  1. @anabastos ANA PORTELLO anabastos.me Full-Stack na Horizon Four.

  2. JSLADIES https://fb.com/jsladiesbr https://twitter.com/jsladiessp https://meetup.com/JsLadies-BR/

  3. ELM FRONT-END FUNCIONAL COM

  4. O QUE É FRONT END?

  5. • Front-end é tudo relacionado a codificar a interface world

    wide web • HTML(Marcação), CSS(estilo), JS(interação) • Responsabilidade de criar UIs fluidas que consomem e pegam dados. • Ele que faz a ligação com back-end
  6. JAVASCRIPT

  7. JAVASCRIPT É A LINGUAGEM QUE CONVERSAMOS COM O NAVEGADOR

  8. • Javascript foi pensado em 10 dias pelo Brendan Eich

    em 1995 • O intuito era ser implementada nos navegadores p/ permitir que páginas sejam interativas • Foi chamado de mocha, livescript até se chamar de JavaScript. • ECMAscript toca o JS
  9. None
  10. A web cresceu e uma linguagem que era pra ser

    de scripts web teve de se tornar robusta
  11. JORNADA DO JS

  12. VÁRIAS FORMAS DE FAZER A MESMA COISA

  13. http://www.phpied.com/files/location-location/location-location.html

  14. NÃO SABEMOS QUAL A FORMA CERTA

  15. None
  16. “undefined is not a function” “cannot read property of undefined”

  17. WTFJS https://github.com/denysdovhan/wtfjs

  18. SERÁ QUE APRENDER JS É SIMPLES?

  19. NÃO EXISTE UMA FORMA MELHOR DE FAZER FRONT-END?

  20. O QUE É ELM?

  21. FEITO PELO Evan Czaplicki

  22. ELM é tanto uma linguagem de programação quanto um ECOSSISTEMA.

  23. DESIGN da linguagem foi feito pra tentar de ajudar a

    fazer APLICAÇÕES ROBUSTAS de forma simples.
  24. COMPILADO

  25. HTML, JS, etc.. MAGICAL ELM CODE intuitive compiler...

  26. Mantainable but kind of scary Tipos estaticos OO Langs Linguagens

    Maneiras & Dinamicas Mantenabilidade (Facilidade p/ adicionar features) Usavel Fácil de aprender e de pôr em produção
  27. O UNICÓRNIO MÁGICO DO FRONT-END

  28. É uma linguagem funcional

  29. Nenhuma lib ou framework js pode te prover as vantagens

    do funcional.
  30. É focado em ser SIMPLES e PERFORMÁTICO.

  31. add x y = x + y

  32. 10 |> add 1 |> multiply 2 multiply 2(add 1

    10)
  33. É uma LINGUAGEM ESTATICAMENTE tipada.

  34. String Bool List Float Int Record

  35. add: Int -> Int -> Int add x y =

    x + y
  36. add42: Int -> Int add42 = add 42

  37. type Answer = Yes| No

  38. respond: Answer -> String respond answer = case answer of

    Yes -> … No -> ...
  39. type alias email = String userEmail: email userEmail = “ana@gmail.com”

  40. type alias cat = { name: String, age: Int }

    myCat: cat myCat = { name: “mimi”, age: 2}
  41. Mensagens de ERRO informativas

  42. None
  43. IMUTÁVEL

  44. Sem problemas de RUNTIME. Compilou tá certo.

  45. NoRedInk has 80k+ lines of ELM, and after more than

    a year in production, it still has not produced a single runtime exception. http://elm-lang.org/
  46. Valoriza MUITO simplicidade

  47. CURVA DE APRENDIZAGEM Muito conteúdo, exemplos, tutoriais, etc.

  48. None
  49. None
  50. None
  51. AMBIENTE

  52. npm install -g elm

  53. SUPORTE PARA EDITORES DE TEXTO

  54. elm-package http://package.elm-lang.org/

  55. elm-package.json elm-stuff/ elm-package install elm-lang/html

  56. elm-make

  57. elm-repl

  58. elm-format

  59. elm-reactor

  60. PROBLEMAS DE DOM

  61. REAL DOM VIRTUAL DOM

  62. BLAZING FAST RENDERING 50% mais rapido que React

  63. None
  64. ARQUITETURA

  65. REDUX é inspirado no ELM

  66. Fluxo de dados é UNIDIRECIONAL. Estado IMUTÁVEL. Efeitos COLATERAIS CONTROLADOS.

  67. MODEL VIEW UPDATE RENDER M SG

  68. None
  69. main = contador { model = model, view = view,

    update = update }
  70. Descreve o estado da sua tela Model State

  71. Model 0 { Model = 0 }

  72. Recebe o estado e renderiza a nossa a interface de

    forma declarativa. View Render View (Model)
  73. div [] [ button [ onClick Decrement ] [ text

    "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] ~virtual dom~
  74. Toda tag HTML é uma função

  75. p ( atributos, conteúdo)

  76. h1 [] [ text “Olá mundo”] p [ class =”alert”]

    [ text “tudo bem?”] h1 [] [ text ‘Olá mundo’] p [ class = ‘alert’] [ text ‘tudo bem?’] h1 [] [ text “Olá mundo”] p [ class =”alert”] [ text “tudo bem?”] <h1>Olá mundo</h1> <p class =”alert”> tudo bem? </p>
  77. Olá mundo tudo bem?

  78. h1 [] [ text “Olá mundo”] p [ class =”alert”]

    [ text “tudo bem?”] class alert[ color (hex `CCFFFF`) ] h1 [] [ text “Olá mundo”] p [ class =”alert”] [ text “tudo bem?”] .alert { color: #CCFFFF; }
  79. Olá mundo tudo bem?

  80. h1 [] [ text “Olá mundo”] p [ class =”alert”]

    [ text “tudo bem?”] p [ class =`alert`] [ text `o ELUG é `, , strong [] [ text `TOP`] , text `!` ] h1 [] [ text “Olá mundo”] p [ class =”alert”] [ text “tudo bem?”] <p class=”alert”> o ELUG é <strong>TOP</strong> ! </p>
  81. o ELUG é TOP

  82. Toda árvore de DOM é feita por funções dentro de

    funções
  83. View div [] [ button [ onClick Decrement ] [

    text "-" ] , div [] [ text “” ] , button [ onClick Increment ] [ text "+" ] ] + -
  84. View 0 view model = div [] [ button [

    onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] + -
  85. É o evento base para todos os eventos acontecendo quando

    rola interação na ui(clicks, inputs no form, etc) Msgs Actions
  86. type Msg = Increment | Decrement Increment Decrement 0 +

    -
  87. Recebe uma msg e state como input Retorna um novo

    estado e cmd. Essa função é pura e não gera efeitos colaterais Update Reduce
  88. type Msg = Increment | Decrement update msg model =

    case msg of Increment -> model + 1 Decrement -> model - 1 0 + - Update
  89. • Clicamos no botão de “+” no html da View

    • Isso envia uma mensagem de Increment que o Update vai lidar. • O Update nota que a msg de Increment deve adicionar 1 na nossa Model(que atualmente é 0). • O Update atualiza a Model p/ 1 e a nova Model é renderizada na View 0 + - Update MODEL VIEW UPDATE RENDER M SG
  90. • Clicamos no botão de “+” no html da View

    • Isso envia uma mensagem de Increment que o Update vai lidar. • O Update nota que a msg de Increment deve adicionar 1 na nossa Model. • O Update atualiza a Model p/ 1 e a nova Model é renderizada na View 1 + - Update MODEL VIEW UPDATE RENDER M SG
  91. http://elm-lang.org/examples/buttons

  92. http://elm-lang.org/examples/forms

  93. TIME TRAVELLING DEBUG http://debug.elm-lang.org/edit/Mario.elm

  94. None
  95. None
  96. https://github.com/pzavolinsky/elm-bootstrap https://package.elm-lang.org/packages/jystic/elm-font-awesome https://package.elm-lang.org/packages/TheSeamau5/elm-material-icons https://github.com/debois/elm-mdl

  97. https://ellie-app.com/z6GP8QGKGba1/0

  98. PORQUÊ ELM: CHEGA DE DOR DE CABEÇA COM FRONT-END, CHEGA

    DE JAVASCRIPT https://cuducos.me/2016/09/17/porque-elm.html VAMOS APRENDER ELM https://cuducos.me/2016/10/24/vamos-aprender-elm. html
  99. try-elm/examples learnyouanelm.github.io/ elm-lang.org/ elmrepl.cuberoot.in/

  100. REACT ELM COMPONENTS https://github.com/evancz/react-elm-components

  101. t.me/elmbrasil elmlang.slack.com/ elmweekly.nl/

  102. OBRIGADA :) https://speakerdeck.com/anabastos

  103. DÚVIDAS?