Uma sequência de besouros e explosões é mostrada, com cada besouro representando uma linha de código em Elm. A arquitetura de Elm é então explicada brevemente em três partes: View, Update e Model.

1. !

2. !
🐛💥
🐛
🐛
🐛
🐛
💥
💥
💥
💥
🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛 🐛 🐛 🐛
🐛 🐛 🐛 🐛 🐛
🐛

3. $%&'$
()*
🐛
🐛
🐛
🐛
🐛
🐛
🐛
🐛
🐛
🐛
🐛

4. 😱

5. ✨

7. Webapps
confiáveis com
@hugobessaa

8. 📱. 📱📱

9. View UpdateModel

10. Model
O estado da sua aplicação

11. Model
O estado da sua aplicação
Dados necessários para
renderizar a interface

12. Model
R$ 6 R$ 10 R$ 5
x 1 x 1
Total: R$ 15

13. Model
[ Burger, IceCream ]
List

14. Model
[ Burger, IceCream ]
type Product
= Pizza
| Burger
| IceCream
Um tipo!
"Union"

15. Model
[ Burger, IceCream ]

16. View UpdateModel

17. View
R$ 6 R$ 10 R$ 5
x 1 x 1
Total: R$ 15

18. View
R$ 6 R$ 10 R$ 5
x 1 x 1
[ Burger, IceCream ]
Total: R$ 15

19. View
Funções!
🎉

20. View
countProduct Pizza [ Pizza, Burger]
Função
Argumentos

21. View
button [ class "product pizza" ] []
span [] [ text "Total:" ]
countProduct Pizza [ Pizza, Burger]

22. View
Declarativo!
Mais ou menos como o React

23. View
E as interações?
🤔

24. View
button
[ class "product pizza"
, onClick (Order Pizza)
]
[]

25. View
button
[ class "product pizza"
, onClick (Order Pizza)
]
[]
Uma Msg

26. View
Uma descrição da
alteração que você quer
fazer
Order Pizza

27. View UpdateModel

28. Update
Transformar o Model

29. Update
Order Pizza

30. Update
Order Pizza
type Msg = Order Product

31. Update
Order Pizza
Order Burguer
Order IceCream

32. Update
update msg model =
case msg of
Order product -> product :: model

33. Update
update msg model =
case msg of
Order product -> product :: model

34. Update
update msg model =
case msg of
Order product -> product :: model

35. Update
update msg model =
case msg of
Order product -> product :: model

36. Update
update msg model =
case msg of
Order product -> product :: model

37. Update
Order Pizza
update
[Pizza]
[]

38. View UpdateModel

39. View UpdateModel
Elm Architecture

40. Funções

41. Funções
Tipos

42. Funções
Tipos
Dados

43. Restrições
Uma função sempre retorna
Estaticamente tipado
Funções puras

44. function sum() { console.log('boom') }

45. function sum() { console.log('boom') }

46. 🤖
Garante todas as restrições
Ajuda a consertar erros
Compilador

47. Restrições trazem
Confiança

48. View UpdateModel
Elm Architecture

49. View Updel

50. 📱

51. Elm Runtime
Altamente testada e segura
Conecta seu webapp puro ao mundo "impuro"

52. Elm Runtime
main =
beginnerProgram
{ model = model
, view = view
, update = update
}

53. main =
beginnerProgram
{ model = model
, view = view
, update = update
}
Elm Runtime

54. Seu WebApp Elm
Elm Runtime

55. Ferramentas
Restrições trazem

56. Ferramentas

57. Ferramentas

58. Ferramentas

59. Ferramentas

60. Ferramentas
🤖 👍

61. Ferramentas

62. Ferramentas

63. 😌
Ferramentas que ajudam
Código confiável
Arquitetura simples

64. 🤔
Paradigma diferente
Menos profissionais qualificados
Comunidade menor
Fortemente tipado

65. 🌎
elm-lang.org
t.me/elmbrasil
elm-lang.slack.com

66. hugobessa.com.br
Obrigado!