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

Slide 1

Slide 1 text

Marcel Gonçalves dos Santos @marcelgsantos programação funcional no front-end a Elm Introdução

Slide 2

Slide 2 text

pensandonaweb.com.br desenvolvedor web full-stack Marcel Gonçalves dos Santos @marcelgsantos

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

@femugsp sp.femug.com

Slide 5

Slide 5 text

@phpsp phpsp.org.br

Slide 6

Slide 6 text

O que é Elm?

Slide 7

Slide 7 text

é uma linguagem de programação funcional

Slide 8

Slide 8 text

projetada para o front-end

Slide 9

Slide 9 text

Características

Slide 10

Slide 10 text

foi cuidadosamente projetada por Evan Czaplicki

Slide 11

Slide 11 text

é poderosa e simples de utilizar

Slide 12

Slide 12 text

possui tipagem estática ou seja, sem erros em tempo de execução!

Slide 13

Slide 13 text

de fácil depuração e refatoração

Slide 14

Slide 14 text

melhor testabilidade

Slide 15

Slide 15 text

força o versionamento semântico

Slide 16

Slide 16 text

Ambiente

Slide 17

Slide 17 text

possui instalador para Windows e Mac

Slide 18

Slide 18 text

pode ser instalado através do NPM

Slide 19

Slide 19 text

➜ npm intall -g elm

Slide 20

Slide 20 text

possui excelente suporte para editores como Atom e Sublime

Slide 21

Slide 21 text

pode-se utilizar o elm-format e o elm-oracle para formatação e auto-complete

Slide 22

Slide 22 text

e fazer a integração com o editor de texto predileto

Slide 23

Slide 23 text

elm repl  ferramenta de read-eval-print loop na linha de comando

Slide 24

Slide 24 text

elm make  ferramenta para compilação de seu código Elm

Slide 25

Slide 25 text

elm package  ferramenta de gerenciamento de pacotes do Elm

Slide 26

Slide 26 text

elm reactor  ferramenta que compila e cria um servidor automaticamente para rodar o seu projeto

Slide 27

Slide 27 text

Programação Funcional

Slide 28

Slide 28 text

paradigma de programação com foco em funções matemáticas e na transformação de estados

Slide 29

Slide 29 text

possui funções de alta ordem e de primeira classe

Slide 30

Slide 30 text

as funções puras são funções livres de efeitos colaterais

Slide 31

Slide 31 text

as funções puras são reusáveis, componíveis, testáveis, cacheáveis e paralelizáveis

Slide 32

Slide 32 text

a aplicação parcial de funções permite chamar uma função passando parte de seus argumentos

Slide 33

Slide 33 text

o currying é uma forma de aplicação parcial de uma função

Slide 34

Slide 34 text

a recursão é utilizada para iteração

Slide 35

Slide 35 text

uma aplicação é composta por estado e alteração do estado

Slide 36

Slide 36 text

a imutabilidade permite um melhor controle do estado

Slide 37

Slide 37 text

a programação funcional é sobre eliminar o estado quando possível e controlar o estado quando necessário

Slide 38

Slide 38 text

é possível utilizar a programação funcional em linguagens não-funcionais como JavaScript, PHP e Ruby

Slide 39

Slide 39 text

A linguagem

Slide 40

Slide 40 text

uma aplicação mínima em Elm

Slide 41

Slide 41 text

module Main exposing (..) import Html main = Html.text "Hello World!"

Slide 42

Slide 42 text

➜ elm package install elm-lang/html

Slide 43

Slide 43 text

um arquivo com as dependências chamado elm-package.json é criado

Slide 44

Slide 44 text

e também um diretório chamado elm-stuﬀ

Slide 45

Slide 45 text

➜ elm reactor

Slide 46

Slide 46 text

uma função em Elm

Slide 47

Slide 47 text

add x y = x + y

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

podemos utilizar o operador pipe|> semelhante a linha de comando Unix

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

para criar funções anônimas utilizamos a barra invertida \

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

podemos utilizar o operador de composição >> para fazer composição de funções

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

o currying de funções é feito automaticamente

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

é possível deﬁnir valores locais utilizando o bloco let..in

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

e definir condições utilizando o bloco if..then…else

Slide 60

Slide 60 text

pattern matching é uma funcionalidade muito importante

Slide 61

Slide 61 text

o Elm possui tipos primitivos como String, Char, Bool, Float e number

Slide 62

Slide 62 text

o tipo List representa uma lista de valores todos do mesmo tipo

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

o tipo tupla representa uma lista ordenada de valores, por exemplo (“pi”, 3.14)

Slide 65

Slide 65 text

o tipo record representa uma estrutura de dados semelhante a um objeto em JavaScript

Slide 66

Slide 66 text

module Main exposing (..) import Html import String person = { name = "James", age = 42 } main = String.append "Hello " person.name |> Html.text

Slide 67

Slide 67 text

em Elm, as estruturas de dados são imutáveis

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

tipos mais complexos podem ser representados através de union types

Slide 70

Slide 70 text

as union types assemelham- se a enumerações de tipos diferentes

Slide 71

Slide 71 text

Slide 72

Slide 72 text

os type aliases permite criar novos tipos a partir de tipos existentes

Slide 73

Slide 73 text

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 }

Slide 74

Slide 74 text

o tipo Maybe é uma union type que pode ter ou não um valor

Slide 75

Slide 75 text

type Maybe a = Just a | Nothing

Slide 76

Slide 76 text

as anotações de tipo são utilizadas para informar o tipo de entrada e saída de uma função ou constante

Slide 77

Slide 77 text

module Main exposing (..) import Html add : Int -> Int -> Int add x y = x + y main = "2 + 3 is " ++ toString (add 2 3) |> Html.text

Slide 78

Slide 78 text

a anotação de tipos é opcional em Elm

Slide 79

Slide 79 text

o compilador pode inferir os tipos

Slide 80

Slide 80 text

Aplicação Elm

Slide 81

Slide 81 text

uma aplicação Elm possui três partes: model, view e update

Slide 82

Slide 82 text

a model é um contêiner que armazena os dados que a aplicação necessita

Slide 83

Slide 83 text

a model pode ser um tipo primitivo como um Int ou String ou um tipo complexo como um Record

Slide 84

Slide 84 text

o update é responsável por atualizar a model ou estado da aplicação

Slide 85

Slide 85 text

na seção update deﬁnimos (1) o que pode acontecer na aplicação e (2) como a model é atualizada

Slide 86

Slide 86 text

a função update retorna uma nova model atualizada

Slide 87

Slide 87 text

a view é responsável por criar uma representação visual do estado da aplicação

Slide 88

Slide 88 text

a view é criada de maneira declarativa

Slide 89

Slide 89 text

as funções responsáveis pela criação das tags HTML possuem assinaturas consistentes

Slide 90

Slide 90 text

a função beginnerProgram é responsável por juntar as três partes de uma aplicação Elm

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Quem usa?

Slide 93

Slide 93 text

* Prezi * NoRedInk * Adobe * Serenata de Amor (Jarbas) Empresas e projetos

Slide 94

Slide 94 text

Referências

Slide 95

Slide 95 text

* 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

Slide 96

Slide 96 text

* @czaplic * @rtfeldman * @jessitron * @_rchaves_ * @cuducos * @elmlang * @elmweekly * @elmconf Quem seguir no Twitter?