Front-end funcional ELUG #11

https://www.meetup.com/elug_sp/events/243230058/

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