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

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.

52711e2157a6fed933b0361cc06a6953?s=128

Marcel dos Santos

November 26, 2016
Tweet

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

  3. None
  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