Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introdução a Elm - programação funcional no fro...

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.

Marcel dos Santos

November 26, 2016
Tweet

More Decks by Marcel dos Santos

Other Decks in Programming

Transcript

  1. module Main exposing (..) import Html add x y =

    x + y main = Html.text ("1 + 2 is " ++ (toString (add 1 2)))
  2. module Main exposing (..) import Html import String add x

    y = x + y main = add 1 2 |> toString |> String.append "1 + 2 is " |> Html.text
  3. module Main exposing (..) import Html import List numbers =

    [ 1, 2, 3 ] main = List.map (\a -> a * 2) numbers |> toString |> Html.text
  4. 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
  5. module Main exposing (..) import Html add x y =

    x + y plus1 = add 1 main = plus1 9 |> toString |> Html.text
  6. module Main exposing (..) import Html import String joinUpper x

    y = let text = x ++ y in String.toUpper text main = joinUpper "hello " "world" |> Html.text
  7. module Main exposing (..) import Html import List numbers =

    [ 1, 2, 3 ] main = List.map (\a -> a * 2) numbers |> toString |> Html.text
  8. module Main exposing (..) import Html import String person =

    { name = "James", age = 42 } main = String.append "Hello " person.name |> Html.text
  9. 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
  10. type Msg = Edit Player | Score Player Int |

    Input String | Save | Cancel | DeletePlay Play
  11. 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 }
  12. as anotações de tipo são utilizadas para informar o tipo

    de entrada e saída de uma função ou constante
  13. module Main exposing (..) import Html add : Int ->

    Int -> Int add x y = x + y main = "2 + 3 is " ++ toString (add 2 3) |> Html.text
  14. a model pode ser um tipo primitivo como um Int

    ou String ou um tipo complexo como um Record
  15. na seção update definimos (1) o que pode acontecer na

    aplicação e (2) como a model é atualizada
  16. 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
  17. * Prezi * NoRedInk * Adobe * Serenata de Amor

    (Jarbas) Empresas e projetos
  18. * @czaplic * @rtfeldman * @jessitron * @_rchaves_ * @cuducos

    * @elmlang * @elmweekly * @elmconf Quem seguir no Twitter?