Usando Elm para desenhar um frontend de fazer inveja

Nessa palestra eu introduzo os principais aspectos da linguagem, que é puramente funcional (e por isso carrega todas as características de uma linguagem funcional) e foi feita para ser usada no frontend.

* a imagem que apresenta o fluxo de uma aplicação Elm (slide 17) foi retirada de uma oficina apresentada por Roberto e Rogério [1]

[1]: http://robertosoares.me/oficina-elm/#/

Transcript

1. usando elm para desenhar um frontend de fazer inveja 1
2. Eduardo Braga consultor de desenvolvimento @ ThoughtWorks @ebragaparah | github.com/ebragaparah 2
3. elm, por elm 3
4. compila para javascript 4
5. eita, mais uma linguagem pra usar no frontend? 5
6. e por que não javascript? :( 6
7. principalmente por causa de armadilhas 7
8. infelizmente é bastante fácil errar 8
9. null e undefined podem ser cruéis 9
11. mas, já tem um monte de linguagens que resolvem esse problema… 11
12. Maybe? type Maybe a = Nothing | Just a > Nothing Nothing : Maybe a > Just <function> : a -> Maybe a > Just "oi" Just "oi" : Maybe String > Just 3.14 Just 3.14 : Maybe Float 12
13. Maybe! type alias User = { nome : String , idade : Maybe Int } edu = { nome = "Edu", idade = Nothing } ardo = { nome = "Ardo", idade = Just 25 } podeBeber usuario = case usuario.idade of —— Elm te obriga a tratar Nothing -> todos os casos False Just idade -> idade >= 21 13
14. Na prática, sem runtime errors 14
15. 15 http://bit.ly/runtime-errors-elm
16. arquitetura —— model estado da sua aplicação —— update recebe um estado atual e retorna um novo model —— view uma forma de enxergar o estado, em HTML 16
18. ferramentas embutidas —— repl $ elm-repl —— compilador $ elm-make —— gerenciador de pacotes $ elm-package —— servidor de desenvolvimento $ elm-reactor 18
19. + framework embutido 19
20. compilador que conversa com você 20
22. principais tipos —— valores 42 : number 'e' : Char "rsjs" : String (12, "que horas é o almoço?") : (number, String) [8, 7, 6] : List number {x = 6, y = 8} : { x: number, y: number } —— aliases type alias Ponto = { x : number, y : number } 22
23. funções add : number -> number -> number add x y = x + y > add 4 5 9 : number 23
24. map, filter e piping menorQueDois item = item < 2 quadrado numero = numero * numero menoresQueDois lista = 
 List.filter menorQueDois lista 
 tudoAoQuadrado lista = List.map quadrado menoresQueDois minhaLista
 |> tudoAoQuadrado 24
25. inferência de tipos add x y = x + y <function> : number -> number -> number add : number -> number -> number add x y = x + y horaDoAlmoco : Boolean horaDoAlmoco = True 25
26. funções parcialmente aplicadas add : number -> number -> number add x y = x + y > add 4 5 9 : number > add4 = add 4 add : number -> number > add4 5 9 : number 26
27. imutabilidade ponto = { x = 3, y = 5 } —— você pode ler ponto.x —— mas não pode alterar assim ponto.x = 4 —— mas assim pode outroPonto = { ponto | x = 4 } 27
28. view model = div [ class "content" ] [ h1 [] [ text model.nome ] ] e HTML, comofas?! view model = div [] [
 input [ type "text"] [] , div [] [ text (String.reverse "ualbax") ]
 ] 28
29. module Main exposing (..) import Html exposing (..) import Html.Attributes exposing (class) model = { nome = "Edu" } view model = div [ class "content" ] [ h1 [] [ text model.nome ] ] update model = 
 model main = Html.beginnerProgram { view = view , update = update , model = model } agora tudo junto 29
30. e pra instalar? $ npm install -g elm
 pacotes de instalação (windows e mac) 
 repositório: https://github.com/elm-lang/elm-platform 30
31. onde encontrar mais coisas? https://elmlang.herokuapp.com/ (convites) https://guide.elm-lang.org/ https://elmlang.slack.com https://learnyouanelm.github.io/ 31 canal #brazil no slack https://telegram.me/elmbrasil
32. perguntas?
34. obrigado ;)