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.

Webapps confiaveis com elm

173 views

Published on

Webapps confiรกveis com Elm

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Webapps confiaveis com elm

  1. 1. !
  2. 2. ! ๐Ÿ›๐Ÿ’ฅ ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ’ฅ ๐Ÿ’ฅ ๐Ÿ’ฅ ๐Ÿ’ฅ ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ›
  3. 3. $%&'$ ()* ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ› ๐Ÿ›
  4. 4. ๐Ÿ˜ฑ
  5. 5. โœจ
  6. 6. Webapps con๏ฌรกveis com @hugobessaa
  7. 7. ๐Ÿ“ฑ. ๐Ÿ“ฑ๐Ÿ“ฑ
  8. 8. View UpdateModel
  9. 9. Model O estado da sua aplicaรงรฃo
  10. 10. Model O estado da sua aplicaรงรฃo Dados necessรกrios para renderizar a interface
  11. 11. Model R$ 6 R$ 10 R$ 5 x 1 x 1 Total: R$ 15
  12. 12. Model [ Burger, IceCream ] List
  13. 13. Model [ Burger, IceCream ] type Product = Pizza | Burger | IceCream Um tipo! "Union"
  14. 14. Model [ Burger, IceCream ]
  15. 15. View UpdateModel
  16. 16. View R$ 6 R$ 10 R$ 5 x 1 x 1 Total: R$ 15
  17. 17. View R$ 6 R$ 10 R$ 5 x 1 x 1 [ Burger, IceCream ] Total: R$ 15
  18. 18. View Funรงรตes! ๐ŸŽ‰
  19. 19. View countProduct Pizza [ Pizza, Burger] Funรงรฃo Argumentos
  20. 20. View button [ class "product pizza" ] [] span [] [ text "Total:" ] countProduct Pizza [ Pizza, Burger]
  21. 21. View Declarativo! Mais ou menos como o React
  22. 22. View E as interaรงรตes? ๐Ÿค”
  23. 23. View button [ class "product pizza" , onClick (Order Pizza) ] []
  24. 24. View button [ class "product pizza" , onClick (Order Pizza) ] [] Uma Msg
  25. 25. View Uma descriรงรฃo da alteraรงรฃo que vocรช quer fazer Order Pizza
  26. 26. View UpdateModel
  27. 27. Update Transformar o Model
  28. 28. Update Order Pizza
  29. 29. Update Order Pizza type Msg = Order Product
  30. 30. Update Order Pizza Order Burguer Order IceCream
  31. 31. Update update msg model = case msg of Order product -> product :: model
  32. 32. Update update msg model = case msg of Order product -> product :: model
  33. 33. Update update msg model = case msg of Order product -> product :: model
  34. 34. Update update msg model = case msg of Order product -> product :: model
  35. 35. Update update msg model = case msg of Order product -> product :: model
  36. 36. Update Order Pizza update [Pizza] []
  37. 37. View UpdateModel
  38. 38. View UpdateModel Elm Architecture
  39. 39. Funรงรตes
  40. 40. Funรงรตes Tipos
  41. 41. Funรงรตes Tipos Dados
  42. 42. Restriรงรตes Uma funรงรฃo sempre retorna Estaticamente tipado Funรงรตes puras
  43. 43. function sum() { console.log('boom') }
  44. 44. function sum() { console.log('boom') }
  45. 45. ๐Ÿค– Garante todas as restriรงรตes Ajuda a consertar erros Compilador
  46. 46. Restriรงรตes trazem Con๏ฌanรงa
  47. 47. View UpdateModel Elm Architecture
  48. 48. View Updel
  49. 49. ๐Ÿ“ฑ
  50. 50. Elm Runtime Altamente testada e segura Conecta seu webapp puro ao mundo "impuro"
  51. 51. Elm Runtime main = beginnerProgram { model = model , view = view , update = update }
  52. 52. main = beginnerProgram { model = model , view = view , update = update } Elm Runtime
  53. 53. Seu WebApp Elm Elm Runtime
  54. 54. Ferramentas Restriรงรตes trazem
  55. 55. Ferramentas
  56. 56. Ferramentas
  57. 57. Ferramentas
  58. 58. Ferramentas
  59. 59. Ferramentas ๐Ÿค– ๐Ÿ‘
  60. 60. Ferramentas
  61. 61. Ferramentas
  62. 62. ๐Ÿ˜Œ Ferramentas que ajudam Cรณdigo con๏ฌรกvel Arquitetura simples
  63. 63. ๐Ÿค” Paradigma diferente Menos pro๏ฌssionais quali๏ฌcados Comunidade menor Fortemente tipado
  64. 64. ๐ŸŒŽ elm-lang.org t.me/elmbrasil elm-lang.slack.com
  65. 65. hugobessa.com.br Obrigado!

ร—