O documento descreve como o Elm aborda a complexidade das interfaces do usuário interativas na web de maneira simples e pura. O Elm usa um modelo de estado único, funções de atualização puras e arquitetura baseada em mensagens para representar as interações do usuário como dados imutáveis. Isso permite que as interfaces do usuário sejam desenvolvidas de forma previsível e livre de bugs.

1. ElmUma luz na Era das Trevas da
complexidade de UIs na web

2. http://example.com

3. http://example.com
Conteúdo estático
Estado na URL

4. http://example.com

5. http://example.com
Conteúdo dinâmico
Estado acumulado
durante uso

7. 👈

8. 2

9. 2
👈

10. 2
👈

11. 1
Estado acumulado
durante uso

12. 5

13. 5

14. NaN

15. Mutação de estado
compartilhado
👎

16. Elm✨

18. header [] []
buttons
[ circle
, triangle
, square
]
bigTriangle [ color Dark ] square [ color Light ]
socialButtons
{ facebook = True
, twitter = False
, instagram = False
div []
[
]

19. div [] []

20. div [ class "main" ] []

21. div [] [ text "Oi!" ]

22. div []
[ span [] [ text "Oi!" ] ]

23. 1
+
-

24. 1
+
-
button [] [ text "+" ]
span [] [ text "1" ]
button [] [ text "-" ]

25. div []
[ button [] [ text "+" ]
, span [] [ text "1" ]
, button [] [ text "-"
]

26. div []
[ button [] [ text "+" ]
, span [] [ text "1" ]
, button [] [ text "-"
]

27. div []
[ button [] [ text "+" ]
, span []
[ text (toString model) ]
, button [] [ text "-"
]

28. Model é a única
fonte da verdade
👍

29. Model?

30. View
1

31. 1
1
+
-

32. 2
2
+
-

33. 20
20
+
-

34. +button [] [ text "+" ]

35. +button [] [ text "+" ]
👈

36. +button [] [ text "+" ]
👈
Increment

37. +button [] [ text "+" ]
👈
Increment
Incremen
Increment
Increment
Increment

38. +button [] [ text "+" ]
👈
onClick Increment

39. +button [ onClick Increment ] [ text "+" ]

40. -button [ onClick Decrement ] [ text "+" ]

41. Decrement
1
0
Increment

42. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

43. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

44. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

45. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

46. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

47. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

48. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1

49. update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
Puro
Simples

50. Html Msg Html

51. main =
beginnerProgram
{ model = model
, view = view
, update = update
}

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

53. Elm Runtime
Model
View
Update
Puro
Impuro
JavaScript
Simples

54. Elm Runtime
Model
View
Update

55. Elm Runtime
Msg
update
Html

56. Html
http
random
websockets
js
scroll
url
notificação

57. Random
Cmd Msg

58. Elm Runtime
Msg
update
Html

59. Elm Runtime
Msg
update
HtmlCmd

60. ?button [ onClick Roll ] [ text "+" ]

61. ?button [ onClick Roll ] [ text "+" ]
👈
Roll
Roll
Roll
RollRoll

62. update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Random.generate
Rolled
(Random.int 1 6)
)

63. update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Random.generate
Rolled
(Random.int 1 6)
)

64. update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Random.generate
Rolled
(Random.int 1 6)
)

65. update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Random.generate
Rolled
(Random.int 1 6)
)

66. Random.generate Rolled (Random.int 1 6)

67. update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Random.generate
Rolled
(Random.int 1 6)
)
Rolled num -> (num, Cmd.none)
Rolled 5

68. 1+ -
?

69. 1+ -
? 👈
Decrement

70. 0+ -
?
👈 IncrementIncrement

71. 2+ -
?👈Roll

72. 2+ -
?👈Roll
🤖Rolled 5

73. 5+ -
?

74. Elm Runtime
Msg
update
HtmlCmd

75. http
random
websockets
js
scroll
url
notificação
Html

76. Interações
representadas por
dados
👍

77. 2
👈
Read 0

78. 1Read 0
👈
Read 1

79. 1Read 0
👈
Read 1
Unread 1

80. 1Read 0
Read 1
Unread 2

81. 1
Read 0
Read 1
Unread 2

82. 2
Read 0
Read 1
Unread 2
👈

83. 1
Read 0
Read 1
Unread 2
👈

84. 0
Read 0
Read 1
Unread 2
👈

85. 1
Read 0
Read 1
Unread 2
👈

86. Navegar entre estados
👍

87. Webapp Elm

88. Webapp Elm
🌎
Dados

89. Dados
Tipos
Funções puras
Arquitetura simples

90. É assim que o Elm
resolve a COMPLEXIDADE
gerada pela demanda
dos USUÁRIOS por
UIs INTERATIVAS

91. Comunidade pequena
🥀
Interoperação verbosa
Compilador exigente

92. guide.elm-lang.org
📚
elmlang.slack.com
t.me/elmbrasil

93. 📬
@hugobessaa
hugobessa.com.br

94. 🤙
Obrigado!