Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ElmUma luz na Era das Trevas da
complexidade de UIs na web
http://example.com
http://example.com
Conteúdo estático
Estado na URL
http://example.com
http://example.com
Conteúdo dinâmico
Estado acumulado
durante uso
👈
2
2
👈
2
👈
1
Estado acumulado
durante uso
5
5
NaN
Mutação de estado
compartilhado
👎
Elm✨
header [] []
buttons
[ circle
, triangle
, square
]
bigTriangle [ color Dark ] square [ color Light ]
socialButtons
{ face...
div [] []
div [ class "main" ] []
div [] [ text "Oi!" ]
div []
[ span [] [ text "Oi!" ] ]
1
+
-
1
+
-
button [] [ text "+" ]
span [] [ text "1" ]
button [] [ text "-" ]
div []
[ button [] [ text "+" ]
, span [] [ text "1" ]
, button [] [ text "-"
]
div []
[ button [] [ text "+" ]
, span [] [ text "1" ]
, button [] [ text "-"
]
div []
[ button [] [ text "+" ]
, span []
[ text (toString model) ]
, button [] [ text "-"
]
Model é a única
fonte da verdade
👍
Model?
View
1
1
1
+
-
2
2
+
-
20
20
+
-
+button [] [ text "+" ]
+button [] [ text "+" ]
👈
+button [] [ text "+" ]
👈
Increment
+button [] [ text "+" ]
👈
Increment
Incremen
Increment
Increment
Increment
+button [] [ text "+" ]
👈
onClick Increment
+button [ onClick Increment ] [ text "+" ]
-button [ onClick Decrement ] [ text "+" ]
Decrement
1
0
Increment
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
update model msg =
case msg of
Increment -> model + 1
Decrement -> model - 1
Puro
Simples
Html Msg Html
main =
beginnerProgram
{ model = model
, view = view
, update = update
}
main =
beginnerProgram
{ model = model
, view = view
, update = update
}
Elm Runtime
Model
View
Update
Puro
Impuro
JavaScript
Simples
Elm Runtime
Model
View
Update
Elm Runtime
Msg
update
Html
Html
http
random
websockets
js
scroll
url
notificação
Random
Cmd Msg
Elm Runtime
Msg
update
Html
Elm Runtime
Msg
update
HtmlCmd
?button [ onClick Roll ] [ text "+" ]
?button [ onClick Roll ] [ text "+" ]
👈
Roll
Roll
Roll
RollRoll
update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Ran...
update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Ran...
update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Ran...
update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Ran...
Random.generate Rolled (Random.int 1 6)
update model msg =
case msg of
Increment -> (model + 1, Cmd.none)
Decrement -> (model - 1, Cmd.none)
Roll ->
( model
, Ran...
1+ -
?
1+ -
? 👈
Decrement
0+ -
?
👈 IncrementIncrement
2+ -
?👈Roll
2+ -
?👈Roll
🤖Rolled 5
5+ -
?
Elm Runtime
Msg
update
HtmlCmd
http
random
websockets
js
scroll
url
notificação
Html
Interações
representadas por
dados
👍
2
👈
Read 0
1Read 0
👈
Read 1
1Read 0
👈
Read 1
Unread 1
1Read 0
Read 1
Unread 2
1
Read 0
Read 1
Unread 2
2
Read 0
Read 1
Unread 2
👈
1
Read 0
Read 1
Unread 2
👈
0
Read 0
Read 1
Unread 2
👈
1
Read 0
Read 1
Unread 2
👈
Navegar entre estados
👍
Webapp Elm
Webapp Elm
🌎
Dados
Dados
Tipos
Funções puras
Arquitetura simples
É assim que o Elm
resolve a COMPLEXIDADE
gerada pela demanda
dos USUÁRIOS por
UIs INTERATIVAS
Comunidade pequena
🥀
Interoperação verbosa
Compilador exigente
guide.elm-lang.org
📚
elmlang.slack.com
t.me/elmbrasil
📬
@hugobessaa
hugobessa.com.br
🤙
Obrigado!
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had a SRE team at - Elm, Uma luz na era das treva...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had a SRE team at - Elm, Uma luz na era das treva...
Upcoming SlideShare
Loading in …5
×

TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had a SRE team at - Elm, Uma luz na era das trevas da complexidade de UIs na web

26 views

Published on

Trilha Programação Funcional How we figured out we had a SRE team at - Elm, Uma luz na era das trevas da complexidade de UIs na web

Published in: Education
  • Be the first to comment

TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had a SRE team at - Elm, Uma luz na era das trevas da complexidade de UIs na web

  1. 1. ElmUma luz na Era das Trevas da complexidade de UIs na web
  2. 2. http://example.com
  3. 3. http://example.com Conteúdo estático Estado na URL
  4. 4. http://example.com
  5. 5. http://example.com Conteúdo dinâmico Estado acumulado durante uso
  6. 6. 👈
  7. 7. 2
  8. 8. 2 👈
  9. 9. 2 👈
  10. 10. 1 Estado acumulado durante uso
  11. 11. 5
  12. 12. 5
  13. 13. NaN
  14. 14. Mutação de estado compartilhado 👎
  15. 15. Elm✨
  16. 16. header [] [] buttons [ circle , triangle , square ] bigTriangle [ color Dark ] square [ color Light ] socialButtons { facebook = True , twitter = False , instagram = False div [] [ ]
  17. 17. div [] []
  18. 18. div [ class "main" ] []
  19. 19. div [] [ text "Oi!" ]
  20. 20. div [] [ span [] [ text "Oi!" ] ]
  21. 21. 1 + -
  22. 22. 1 + - button [] [ text "+" ] span [] [ text "1" ] button [] [ text "-" ]
  23. 23. div [] [ button [] [ text "+" ] , span [] [ text "1" ] , button [] [ text "-" ]
  24. 24. div [] [ button [] [ text "+" ] , span [] [ text "1" ] , button [] [ text "-" ]
  25. 25. div [] [ button [] [ text "+" ] , span [] [ text (toString model) ] , button [] [ text "-" ]
  26. 26. Model é a única fonte da verdade 👍
  27. 27. Model?
  28. 28. View 1
  29. 29. 1 1 + -
  30. 30. 2 2 + -
  31. 31. 20 20 + -
  32. 32. +button [] [ text "+" ]
  33. 33. +button [] [ text "+" ] 👈
  34. 34. +button [] [ text "+" ] 👈 Increment
  35. 35. +button [] [ text "+" ] 👈 Increment Incremen Increment Increment Increment
  36. 36. +button [] [ text "+" ] 👈 onClick Increment
  37. 37. +button [ onClick Increment ] [ text "+" ]
  38. 38. -button [ onClick Decrement ] [ text "+" ]
  39. 39. Decrement 1 0 Increment
  40. 40. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  41. 41. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  42. 42. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  43. 43. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  44. 44. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  45. 45. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  46. 46. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1
  47. 47. update model msg = case msg of Increment -> model + 1 Decrement -> model - 1 Puro Simples
  48. 48. Html Msg Html
  49. 49. main = beginnerProgram { model = model , view = view , update = update }
  50. 50. main = beginnerProgram { model = model , view = view , update = update }
  51. 51. Elm Runtime Model View Update Puro Impuro JavaScript Simples
  52. 52. Elm Runtime Model View Update
  53. 53. Elm Runtime Msg update Html
  54. 54. Html http random websockets js scroll url notificação
  55. 55. Random Cmd Msg
  56. 56. Elm Runtime Msg update Html
  57. 57. Elm Runtime Msg update HtmlCmd
  58. 58. ?button [ onClick Roll ] [ text "+" ]
  59. 59. ?button [ onClick Roll ] [ text "+" ] 👈 Roll Roll Roll RollRoll
  60. 60. 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) )
  61. 61. 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) )
  62. 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. 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. 64. Random.generate Rolled (Random.int 1 6)
  65. 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) ) Rolled num -> (num, Cmd.none) Rolled 5
  66. 66. 1+ - ?
  67. 67. 1+ - ? 👈 Decrement
  68. 68. 0+ - ? 👈 IncrementIncrement
  69. 69. 2+ - ?👈Roll
  70. 70. 2+ - ?👈Roll 🤖Rolled 5
  71. 71. 5+ - ?
  72. 72. Elm Runtime Msg update HtmlCmd
  73. 73. http random websockets js scroll url notificação Html
  74. 74. Interações representadas por dados 👍
  75. 75. 2 👈 Read 0
  76. 76. 1Read 0 👈 Read 1
  77. 77. 1Read 0 👈 Read 1 Unread 1
  78. 78. 1Read 0 Read 1 Unread 2
  79. 79. 1 Read 0 Read 1 Unread 2
  80. 80. 2 Read 0 Read 1 Unread 2 👈
  81. 81. 1 Read 0 Read 1 Unread 2 👈
  82. 82. 0 Read 0 Read 1 Unread 2 👈
  83. 83. 1 Read 0 Read 1 Unread 2 👈
  84. 84. Navegar entre estados 👍
  85. 85. Webapp Elm
  86. 86. Webapp Elm 🌎 Dados
  87. 87. Dados Tipos Funções puras Arquitetura simples
  88. 88. É assim que o Elm resolve a COMPLEXIDADE gerada pela demanda dos USUÁRIOS por UIs INTERATIVAS
  89. 89. Comunidade pequena 🥀 Interoperação verbosa Compilador exigente
  90. 90. guide.elm-lang.org 📚 elmlang.slack.com t.me/elmbrasil
  91. 91. 📬 @hugobessaa hugobessa.com.br
  92. 92. 🤙 Obrigado!

×