Desenvolvendo Aplicações Web com Elm – Parte 2

No post anterior da série sobre desenvolvimento de aplicações web com Elm, exploramos o núcleo da linguagem e pincelamos levemente a The Elm Architeture (a arquitetura Elm). Nesta parte, iremos mais a fundo na arquitetura e veremos como ela se aplica no “mundo real”.

No código abaixo podemos ver mais claramente a arquitetura sendo aplicada, onde temos o Model, Update e a View sendo declarados. Basicamente, basta preencher esse template com seu código! E É isso que iremos fazer agora.

import Html exposing (..)


-- MODEL

type alias Model = { ... }


-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...


-- VIEW

view : Model -> Html Msg
view model =
  ...

Primeiro, iremos criar uma pasta para o nosso projeto (vou chamar ela de meu-projeto) e, dentro dela, criaremos um arquivo com extensão .elm, o App.elm.

Após isso, basta rodar o comando elm-reactor dentro da pasta que foi criada. Isso irá iniciar o servidor do Elm na porta 8000 (acessado via http://localhost:8000/). Nesse link, temos todos os nossos arquivos .elm listados, basta selecionar o App.elm (o único que deve aparecer, visto que só criamos ele até o momento).

elm2

Se você selecionar o arquivo vazio, o nosso compilador deve dar diversos erros, visto que não encontrou a estrutura padrão de um arquivo .elm. Vamos começar a escrever nosso primeiro arquivo, onde faremos um contador simples (exemplo recomendado pela própria equipe do elm para entender como as coisas funcionam).

A primeira parte são os ‘imports’, eles são responsáveis por importar as bibliotecas e módulos que utilizaremos em nosso projeto, neste caso iremos usar 4 módulos vindo de Html e 1 vindo de Html.events (como na figura abaixo), onde Html é a biblioteca do Elm responsável por nos dar acesso aos elementos do HTML5.

 

import Html exposing (Html, button, div, text)

import Html.Events exposing (onClick)

 

Em seguida, definimos o nosso main, que será o ponto de partida do nosso arquivo e define o que será exibido na tela. Na linha abaixo, chamamos a função Html.beginnerProgram e passamos cada ‘parcela’ da nossa arquitetura para a mesma. Por baixo dos panos o Elm cria um Program que representa a maneira como nossa aplicação deve se comportar. Isso pode parecer um tanto estranho no começo, mas logo começa a fazer sentido.

 

main =

 Html.beginnerProgram { model = model, view = view, update = update }

 

Na sequência, criamos nosso Model, que será a representação do estado da nossa aplicação. Para o nosso contador, só precisamos verificar um número que começa em 0 e vai aumentando ou diminuindo conforme vamos interagindo com ele.

 

type alias Model = Int  --Iniciamos nosso Model do tipo Inteiro (Int)

 

model : Model  --Instanciamos a variavel model que será um novo Model

model = --Atribuímos o valor de zero

 0

Agora que temos nosso Model bem definido, iremos criar o Update que fará as alterações no nosso numero. Esse update será ‘ativado’ com o incremento ou decremento no contador.

 

type Msg = Increment | Decrement   --Definimos que o usuario será capaz de alterar nosso estado a partir do metodo Increment e Decrement. O tipo Msg define isso de forma que nossa aplicação entenda.

 

update : Msg -> Model -> Model  --A partir daqui descrevemos o que fazer em cada situação     (Increment e Decrement)

update msg model =

 case msg of

   Increment ->   --Caso a msg recebida seja Increment, soma 1 no nosso model

     model + 1

 

   Decrement ->  --Caso  a msg recebida seja Decrement, subtrai 1 no nosso model

     model - 1

Agora falta apenas mostrar pro usuário o nosso model e lhe dar uma maneira de interagir com o mesmo. Como importamos alguns elementos Html (button, div e text), iremos fazer uso deles agora na nossa View e dar a eles a possibilidade de alterar nosso estado.

No código abaixo podemos ver que os elementos como div e button se comportam como funções do Elm, recebendo como primeiro parametro possíveis atributos (como uma classe CSS, por exemplo) e como segundo uma lista de nós que serão filhos daquele elemento. Já na função onClick do button, temos uma interação direta com o nosso estado, mas fique tranquilo, o Elm cuida disso pra gente.

 

view : Model -> Html Msg

view model =

 div []

   [ button [ onClick Decrement ] [ text "-" ]

   , div [] [ text (toString model) ]

   , button [ onClick Increment ] [ text "+" ]

   ]

 

No final teremos algo assim, onde podemos interagir com nosso contador:

elm4

E o nosso código fonte fica assim:

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


main =
  Html.beginnerProgram { 
      model = model, 
      view = view, 
      update = update }


-- MODEL

type alias Model = Int 

model : Model
model =
  0


-- UPDATE

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1


-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

Na próxima parte, iremos mais a fundo na UI da linguagem e daremos “corpo” a nossa aplicação. Até lá 🙂

Código fonte disponível em: https://github.com/drdpedroso/elm-playground


Por EDUARDO PEDROSO

Desenvolvedor de software a 4 anos, a maior parte deles trabalhando com JavaScript e Ruby On Rails. Atualmente dedica seu tempo a projetos Open Source voltados para aplicações Mobile Híbridas e Nativas com JS.

Postado em: 18 de janeiro de 2017

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário