Introdução

Neste tutorial, vamos explorar o processo de construção de uma aplicação web interativa utilizando PureScript, Halogen e Pux. A PureScript é uma linguagem funcional semelhante ao Haskell que compila para JavaScript, possibilitando o desenvolvimento de aplicações frontend robustas e eficientes. Halogen é um framework para construir interfaces web reativas em PureScript, enquanto Pux é uma alternativa que traz inspiração do Elm para a construção de aplicações com um padrão de design claro e simples. Neste guia, você aprenderá desde a configuração do ambiente até a implementação de componentes interativos, gerando assim uma aplicação que é tanto elegante quanto funcional. Ideal para desenvolvedores que desejam mergulhar no universo funcional e na programação reativa usando PureScript.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Para começar, você precisa ter o PureScript instalado em sua máquina. Você pode instalar o PureScript usando o npm, o gerenciador de pacotes do Node.js. Certifique-se também de que o Node.js e o npm estão instalados. Verifique as versões instaladas usando os comandos `purs –version` e `node –version`. Se ainda não tiver, siga as instruções oficiais para instalação.

    commands
    # Instalar PureScript
    npm install -g purescript
    # Verificar versão do PureScript
    purs --version
    # Verificar versão do Node.js
    node --version

  2. Criação do Projeto PureScript

    Crie um novo diretório para o seu projeto e inicialize um novo projeto PureScript com o bower e o psc-package. Para isso, siga os comandos abaixo. Isso estabelece a estrutura básica do seu projeto com as dependências necessárias.

    commands
    # Criar diretório do projeto
    mkdir my-purescript-app && cd my-purescript-app
    # Inicializar o projeto
    npm init -y
    # Instalar PureScript e Halogen
    npm install --save purescript halogen purescript-psci-support

  3. Configuração do Build com Spago

    Para facilitar a construção do seu projeto, você pode utilizar o Spago como gerenciador de pacotes. Ele permite que você gerencie dependências com facilidade. Instale o Spago usando o npm e crie um novo projeto com o comando de inicialização.

    commands
    # Instalar Spago
    npm install -g spago
    # Inicializar um novo projeto Spago
    spago init

  4. Estrutura do Projeto

    Crie a estrutura de pastas para o seu projeto PureScript. Você deve criar uma pasta `src` onde você armazenará seus módulos PureScript. Adicione também uma pasta `index.html` na raiz do projeto para configurar o HTML que irá carregar sua aplicação.

    commands
    # Criar estrutura de diretórios
    mkdir src
    touch index.html

  5. Construindo o Componente Principal com Halogen

    Dentro da pasta `src`, crie um arquivo chamado `Main.purs`. Este arquivo conterá o seu componente principal que usa Halogen para renderizar a interface. Abaixo, você encontrará um exemplo básico que define um componente simples que recebe uma mensagem do usuário.

    Main.purs
    module Main where

import Prelude
import HaloGen as H
import Effect (Effect)

main :: Effect Unit
main = do
    body <- H.awaitBody
    H.runUI app body

app :: H.HTML H.Input
app = H.div_ []( H.text "Olá, mundo!" )

  6. Implementação de Eventos e Interatividade

    Vamos agora adicionar eventos à aplicação. No arquivo `Main.purs`, você pode adicionar um evento que responde a um clique em um botão. Crie um botão que exibe uma mensagem ao ser clicado.

    Main.purs
    module Main where

import Prelude
import HaloGen as H
import Effect (Effect)

main :: Effect Unit
main = do
    body <- H.awaitBody
    H.runUI app body

app :: H.HTML H.Input
app = H.div_
    [ H.text "Olá, mundo!"
    , H.button_ [ H.onClick handleClick ] [ H.text "Clique aqui" ]
    ]

handleClick :: H.Event -> H.Update ()
handleClick _ = H.log "Botão clicado!"

  7. Adicionando Pux para Gerenciamento de Estado

    Agora que temos a interatividade, vamos usar o Pux para gerenciar o estado da aplicação. Instalamos o Pux anteriormente; vamos usá-lo para armazenar o estado do contador de cliques. Dentro de `Main.purs`, adicione a lógica para o gerenciamento de estado.

    Main.purs
    module Main where

import Prelude
import Pux as P
import Effect (Effect)

type State = { count :: Int }

initialState :: State
initialState = { count: 0 }

main :: Effect Unit
main = do
    body <- P.awaitBody
    P.runUI app body

app :: P.Model Program
app = P.model initialState update view

update :: P.Action -> State -> State
update Click state = state { count = state.count + 1 }

view :: State -> P.View
view state =
    P.div_
        [ P.text "Contador: " <> P.text (show state.count)
        , P.button_ [ P.onClick Click ] [ P.text "Clique aqui" ]
        ]

  8. Compilando e Executando a Aplicação

    Para compilar e executar sua aplicação, você pode usar o comando `spago build` para compilar seus arquivos PureScript e `spago run` para executar a aplicação. Certifique-se de que seu arquivo `index.html` esteja correto e referenciando o bundle gerado.

    commands
    # Compilar o projeto
    spago build
    # Executar a aplicação
    spago run

  9. Testando a Aplicação

    Para testar sua aplicação, abra um navegador e acesse `http://localhost:8080` (ou a porta que você configurou). Interaja com os elementos da interface e verifique se os eventos estão funcionando como esperado. Você pode usar o console do navegador para ver os logs.

    commands
    # Abra o navegador e acesse
    http://localhost:8080

Conclusão

Neste tutorial, você aprendeu a construir uma aplicação web interativa utilizando PureScript, Halogen e Pux. Começamos com a configuração do ambiente, passando pela criação de um projeto, implementação de componentes interativos e culminando com testes práticos da interface. Com essas ferramentas poderosas, você pode desenvolver aplicações robustas, elegantes e reativas que se destacam no cenário atual do desenvolvimento frontend. Agora você está preparado para explorar ainda mais o potencial do PureScript em suas aplicações.

Hashtags

#PureScript #Halogen #Pux #DesenvolvimentoWeb #Frontend #ProgramaçãoFuncional