Lucchesi
topo

Como criar um site simples em Haskell #1

Você sabia que é possível criar um site em Haskell?

Por incrível que pareça, Haskell não é (somente) uma linguagem de programação obscura, repleta de paradigmas e conceitos super abstratos e sem nenhuma aplicação prática, que só é usada por matemáticos e acadêmicos muito loucos.

Isso pode parecer óbvio e até mesmo sem sentido, mas a verdade é que tem muita gente por aí que acha que Haskell é uma “linguagem limitada”.

Este é o primeiro artigo de um tutorial de 3 partes. Nesta primeira parte eu dou uma breve contextualização e te ensino como criar estrutura básica do projeto.

Leia também: Parte 2 e Parte 3.

Tempos estranhos

Se você parar pra pensar, a gente vive um período meio nebuloso dentro da computação…

Hoje em dia é muito comum encontrar desenvolvedores que avaliam a utilidade e a relevância de uma tecnologia usando uma lógica +ou- assim:

Óbvio que essa é uma curva hipotética, até porque eu tenho fortes motivos para acreditar que o cenário real deve estar mais próximo de uma f(x) = k \times e^x.

Enfim, o ponto é que a métrica “quão fácil é fazer um site com a tecnologia X?” acabou se popularizando e já não pode mais ser ignorada.

Por esse motivo eu resolvi fazer este tutorial, para que nós possamos desenvolver juntos um site em Haskell e para lhe mostrar que não é necessário um PhD em Ciência da Computação e outro em Matemática para se fazer “coisas úteis” em Haskell.

Eu espero que eu consiga despertar em você pelo menos um bit de curiosidade sobre essa linguagem fantástica que é Haskell.

Criando o projeto

Neste tutorial nós criaremos o frontend de um site de lista de presentes usando o Bootstrap e o Heist. Você precisará ter o Stack instalado e eu recomendo fortemente que você siga este tutorial para instalá-lo integrado ao Docker.

Começaremos criando um projeto básico:

stack new gift-list simple

Agora precisamos instalar o Heist e alguns pacotes auxiliares. Para isso, abra o arquivo gift-list.cabal e adicione as linhas a seguir abaixo de base na seção build-depends (use espaços, não tabs, para alinhar as strings).

build-depends: base >= 4.7 && < 5 ,
               blaze-builder      ,
               blaze-html         ,
               heist              ,
               lens               ,
               map-syntax         ,
               text               ,
               xmlhtml

Baixando os assets

Eu adaptei um template do StartBootstrap para servir de base para o site que nós construiremos neste tutorial.

Nosso ponto de partida será o arquivo index.html. Você pode fazer o download desse arquivo e dos demais assets clicando no link abaixo.

ponto-de-partida.zipBaixar

Nós trabalharemos em cima desse arquivo de forma incremental, explicando os principais conceitos do Heist e adicionando novas funcionalidades ao longo das seções que se seguem.

O próximo passo é fragmentar a index.html em múltiplos arquivos e reconstrui-la usando um sistema de templates. É exatamente isso que faremos na Parte 2 desse tutorial. Te vejo lá!