Front-End Funcional Com ELM - Front End SP #5

https://www.meetup.com/Frontend-Dev-SP-Meetup/events/242887383/?eventId=242887383

Transcript

1. @anabastos ANA PORTELLO http://anabastos.github.io/ 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. PRECISAMOS FALAR SOBRE JAVASCRIPT
5. JORNADA DO JAVASCRIPT
6. Nenhum pattern que as pessoas falam que é o certo. 10 formas de fazer um objeto. 20 formas de invocar uma função.
7. http://www.phpied.com/files/location-location/location-location.html
8. “undefined is not a function” “cannot read property of undefined” Terminal começa a jogar na nossa cara coisas tipo
10. WTFJS https://github.com/denysdovhan/wtfjs
14. SERÁ QUE APRENDER JS É SIMPLES?
16. O QUE É ELM?
17. 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
18. O UNICÓRNIO MÁGICO DO FRONT-END
19. ELM é tanto uma linguagem de programação quanto um ECOSSISTEMA.
20. DESIGN da linguagem foi feito pra tentar de ajudar a fazer APLICAÇÕES ROBUSTAS de forma simples.
21. FEITO PELO Evan Czaplicki
22. COMPILADO
23. HTML, JS, etc.. MAGICAL ELM CODE intuitive compiler...
24. Mensagens de ERRO informativas
26. É uma LINGUAGEM ESTATICAMENTE tipada.
27. String Bool List Float Int Record
28. É uma linguagem funcional
29. Nenhuma lib ou framework js pode te prover as vantagens do funcional.
30. • Nunca fica legado: Codigo bem arquiteturado que continua bem arquiteturado mesmo com o crescimento da sua aplicação • Anti-Gambiarra: Menos Bugs pq todas as funções são puras. • Declarativo: Sucinto, Reusavel, e deixa tudo muito mais claro quando vc está lidando com estado
31. IMUTÁVEL
32. “null” “NaN” “undefined is not a function”
33. Sem problemas de RUNTIME. Compilou tá certo.
34. 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/
35. É focado em ser SIMPLES e PERFORMÁTICO.
36. import html main = Html.text "Hello"
37. add x y = x + y
38. Valoriza MUITO simplicidade
39. CURVA DE APRENDIZAGEM Muito conteúdo, exemplos, tutoriais, etc.
43. AMBIENTE
44. npm install -g elm
45. SUPORTE PARA EDITORES DE TEXTO
46. elm-package http://package.elm-lang.org/
47. elm-package.json elm-stuff/ elm-package install elm-lang/html
48. elm-make
49. elm-repl
50. elm-format
51. elm-reactor
53. TIME TRAVELLING DEBUG http://debug.elm-lang.org/edit/Mario.elm
54. PROBLEMAS DE DOM
55. REAL DOM VIRTUAL DOM
56. ?
57. BLAZING FAST RENDERING 50% mais rapido que React
59. Blazing fast DOM
60. REDUX é inspirado no ELM
61. ARQUITETURA
62. Dataflow UNIDIRECIONAL. Estado IMUTÁVEL. Efeitos COLATERAIS CONTROLADOS.
63. MODEL VIEW UPDATE RENDER M SG
64. main = contador { model = model, view = view, update = update }
65. Descreve o estado da sua tela Model State
66. Model 0 { Model = 0 }
67. Recebe o estado e renderiza a nossa view(HTML) de forma declarativa. View Render
68. View div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text “” ] , button [ onClick Increment ] [ text "+" ] ] + - ~virtual dom~
69. View 0 view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] + -
70. É o evento base p/ todos os eventos acontecendo quando rola interação na ui(clicks, inputs, etc) Msgs Actions
71. type Msg = Increment | Decrement Increment Decrement 0 + -
72. 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
73. type Msg = Increment | Decrement update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 0 + - Update
74. http://elm-lang.org/examples/buttons
75. DEMO
76. 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
77. REACT ELM COMPONENTS https://github.com/evancz/react-elm-components
78. try-elm/examples learnyouanelm.github.io/ elm-lang.org/ elmrepl.cuberoot.in/
79. t.me/elmbrasil elmlang.slack.com/ elmweekly.nl/
80. OBRIGADA :) https://speakerdeck.com/anabastos
81. DÚVIDAS?