Introdução a Elm - programação funcional no front-end

Elm é uma linguagem de programação funcional para construir aplicações front-end. Nesta palestra serão apresentadas as motivações de utilização da linguagem Elm, suas principais características e uma breve introdução a programação funcional. Ela abordará as principais estruturas da linguagem (funções, pattern matching e tipagem estática), o ecossistema, como uma aplicação Elm funciona e referências para aprendizado da linguagem.

Transcript

1. Marcel Gonçalves dos Santos @marcelgsantos programação funcional no front-end a Elm Introdução
2. pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos
4. @femugsp sp.femug.com
5. @phpsp phpsp.org.br
6. O que é Elm?
7. é uma linguagem de programação funcional
8. projetada para o front-end
9. Características
10. foi cuidadosamente projetada por Evan Czaplicki
11. é poderosa e simples de utilizar
12. possui tipagem estática ou seja, sem erros em tempo de execução!
13. de fácil depuração e refatoração
14. melhor testabilidade
15. força o versionamento semântico
16. Ambiente
17. possui instalador para Windows e Mac
18. pode ser instalado através do NPM
19. ➜ npm intall -g elm
20. possui excelente suporte para editores como Atom e Sublime
21. pode-se utilizar o elm-format e o elm-oracle para formatação e auto-complete
22. e fazer a integração com o editor de texto predileto
23. elm repl
 ferramenta de read-eval-print loop na linha de comando
24. elm make
 ferramenta para compilação de seu código Elm
25. elm package
 ferramenta de gerenciamento de pacotes do Elm
26. elm reactor
 ferramenta que compila e cria um servidor automaticamente para rodar o seu projeto
27. Programação Funcional
28. paradigma de programação com foco em funções matemáticas e na transformação de estados
29. possui funções de alta ordem e de primeira classe
30. as funções puras são funções livres de efeitos colaterais
31. as funções puras são reusáveis, componíveis, testáveis, cacheáveis e paralelizáveis
32. a aplicação parcial de funções permite chamar uma função passando parte de seus argumentos
33. o currying é uma forma de aplicação parcial de uma função
34. a recursão é utilizada para iteração
35. uma aplicação é composta por estado e alteração do estado
36. a imutabilidade permite um melhor controle do estado
37. a programação funcional é sobre eliminar o estado quando possível e controlar o estado quando necessário
38. é possível utilizar a programação funcional em linguagens não-funcionais como JavaScript, PHP e Ruby
39. A linguagem
40. uma aplicação mínima em Elm
41. module Main exposing (..) import Html main = Html.text "Hello World!"
42. ➜ elm package install elm-lang/html
43. um arquivo com as dependências chamado elm-package.json é criado
44. e também um diretório chamado elm-stuff
45. ➜ elm reactor
46. uma função em Elm
47. add x y = x + y
48. module Main exposing (..) import Html add x y = x + y main = Html.text ("1 + 2 is " ++ (toString (add 1 2)))
49. podemos utilizar o operador pipe|> semelhante a linha de comando Unix
50. module Main exposing (..) import Html import String add x y = x + y main = add 1 2 |> toString |> String.append "1 + 2 is " |> Html.text
51. para criar funções anônimas utilizamos a barra invertida \
52. module Main exposing (..) import Html import List numbers = [ 1, 2, 3 ] main = List.map (\a -> a * 2) numbers |> toString |> Html.text
53. podemos utilizar o operador de composição >> para fazer composição de funções
54. module Main exposing (..) import Html import List double x = x * 2 plus1 x = x + 1 doublePlus1 = double >> plus1 main = List.map doublePlus1 [ 1, 2, 3 ] |> toString |> Html.text
55. o currying de funções é feito automaticamente
56. module Main exposing (..) import Html add x y = x + y plus1 = add 1 main = plus1 9 |> toString |> Html.text
57. é possível definir valores locais utilizando o bloco let..in
58. module Main exposing (..) import Html import String joinUpper x y = let text = x ++ y in String.toUpper text main = joinUpper "hello " "world" |> Html.text
59. e definir condições utilizando o bloco if..then…else
60. pattern matching é uma funcionalidade muito importante
61. o Elm possui tipos primitivos como String, Char, Bool, Float e number
62. o tipo List representa uma lista de valores todos do mesmo tipo
63. module Main exposing (..) import Html import List numbers = [ 1, 2, 3 ] main = List.map (\a -> a * 2) numbers |> toString |> Html.text
64. o tipo tupla representa uma lista ordenada de valores, por exemplo (“pi”, 3.14)
65. o tipo record representa uma estrutura de dados semelhante a um objeto em JavaScript
66. module Main exposing (..) import Html import String person = { name = "James", age = 42 } main = String.append "Hello " person.name |> Html.text
67. em Elm, as estruturas de dados são imutáveis
68. module Main exposing (..) import Html import String person = { name = "James", age = 42 } newPerson = { person | age = 32 } main = "My age is " ++ (toString newPerson.age) |> Html.text
69. tipos mais complexos podem ser representados através de union types
70. as union types assemelham- se a enumerações de tipos diferentes
71. type Msg = Edit Player | Score Player Int | Input String | Save | Cancel | DeletePlay Play
72. os type aliases permite criar novos tipos a partir de tipos existentes
73. type alias Player = { id : Int , name : String , points : Int } type alias Play = { id : Int , playerId : Int , name : String , points : Int } type alias Model = { players : List Player , name : String , playerId : Maybe Int , plays : List Play }
74. o tipo Maybe é uma union type que pode ter ou não um valor
75. type Maybe a = Just a | Nothing
76. as anotações de tipo são utilizadas para informar o tipo de entrada e saída de uma função ou constante
77. module Main exposing (..) import Html add : Int -> Int -> Int add x y = x + y main = "2 + 3 is " ++ toString (add 2 3) |> Html.text
78. a anotação de tipos é opcional em Elm
79. o compilador pode inferir os tipos
80. Aplicação Elm
81. uma aplicação Elm possui três partes: model, view e update
82. a model é um contêiner que armazena os dados que a aplicação necessita
83. a model pode ser um tipo primitivo como um Int ou String ou um tipo complexo como um Record
84. o update é responsável por atualizar a model ou estado da aplicação
85. na seção update definimos (1) o que pode acontecer na aplicação e (2) como a model é atualizada
86. a função update retorna uma nova model atualizada
87. a view é responsável por criar uma representação visual do estado da aplicação
88. a view é criada de maneira declarativa
89. as funções responsáveis pela criação das tags HTML possuem assinaturas consistentes
90. a função beginnerProgram é responsável por juntar as três partes de uma aplicação Elm
91. o módulo Html.App é responsável por: (1) manter o estado da aplicação, (2) gerenciar as mensagens e (3) chamar view e update
92. Quem usa?
93. * Prezi * NoRedInk * Adobe * Serenata de Amor (Jarbas) Empresas e projetos
94. Referências
95. * elm-lang.org * www.elm-tutorial.org * learnxinyminutes.com/docs/elm * bit.ly/vamos-aprender-elm * bit.ly/aprenda-elm-em-y-minutos * elmweekly.nl Tutoriais e vídeos
96. * @czaplic * @rtfeldman * @jessitron * @_rchaves_ * @cuducos * @elmlang * @elmweekly * @elmconf Quem seguir no Twitter?
97. Avalie!
98. bit.ly/avalie-elm-floripa
99. Perguntas?
100. Obrigado. @marcelgsantos speakerdeck.com/marcelgsantos