Back-End

6 mai, 2016

Clojurescript Boot Live-Reload Weasel Vim-Fireplace Piggieback

Publicidade

Tantas palavras-chave que não há espaço para o resto!

Minha longa queixa sobre Clojurescript é que é uma dor para chegar em execução. Pessoas que preferem Leiningen parecem ter achado um caminho para isso com o figwheel; no entanto, aqueles de nós que saltaram no trem do Boot (que é mais recente e, portanto, melhor!) ainda têm que fazer alguma construção para obter a configuração live-reloading auto-compiling repl que se tornou o padrão para o desenvolvimento Clojurescript.

Como muitos problemas no universo Clojure, isso é menos um problema de tecnologia e mais um problema de documentação acessível. Com apenas um pouco de configuração e alguma compreensão, você também pode montar essa configuração dev perfeita Clojurescript usando o Boot.

Se você nunca usou boot antes, aqui estão alguns pontos que você deve saber:

  • O arquivo build.boot é onde as suas dependências do projeto e a configuração de compilação vivem.
  • Execute boot <taskname> a partir da linha de comando para executar uma tarefa.
  • Você pode escolher onde colocar seus arquivos fonte e arquivos de recursos; eu os coloco no src/ e no resources/, respectivamente.

Com isso e mais algumas pesquisas no Google, você já deveria ser capaz de configurar o seu ambiente de desenvolvimento.

Passo 1: Colocando suas dependências em ordem

As ferramentas básicas que você precisa são boot-cljs, boot-cljs-repl e boot-reload. Aqui está o ambiente de boot definido para o seu build.boot:

(set-env!
  :source-paths #{"src/clj" "src/cljs"}
  :resource-paths #{"resources"}
  :dependencies '[[org.clojure/clojure "1.7.X" :scope "provided"]
                  [org.clojure/clojurescript "1.7.X"]
                  [adzerk/boot-cljs "1.7.X" :scope "test"]
                  [adzerk/boot-cljs-repl "X.X.X" :scope "test"]
                  [adzerk/boot-reload    "X.X.X" :scope "test"]])

Eu coloquei todas as dependências com x porque me recuso a ser o único responsável quando você não usar a versão mais recente de tudo. Problemas de versão de dependência são uma coisa real para esta operação, confie em mim – é o preço que pagamos por ter peças intercambiáveis.

Ainda estão faltando alguns requisitos – boot-cljs-repl tem algumas dependências que você precisa adicionar por si mesmo. No entanto, se você tentar executar a tarefa cljs-repl sem essas dependências, ela deve imprimir as dependências que você precisa para que você possa colá-las. Vamos fazer isso. Coloque esta linha em seu build.boot embaixo do set-env! Chame:

(require '[adzerk.boot-cljs-repl :refer :all])

Na linha de comando, execute $ boot cljs-repl. Em algum lugar no erro que se seguiu, você deve ver uma mensagem como a seguinte:

You are missing necessary dependencies for boot-cljs-repl.
Please add the following dependencies to your project:
[com.cemerick/piggieback “X.X.X” :scope “test”]
[weasel “X.X.X” :scope “test”]
[org.clojure/tools.nrepl “X.X.X” :scope “test”]

Você pode simplesmente copiar e colar essas linhas em suas dependências. Seu build.boot agora deve ter esta aparência:

(set-env!
  :source-paths #{"src/clj" "src/cljs"}
  :resource-paths #{"resources"}
  :dependencies '[[org.clojure/clojure "1.7.X" :scope "provided"]
                  [org.clojure/clojurescript "1.7.X"]
                  [adzerk/boot-cljs "1.7.X" :scope "test"]
                  [adzerk/boot-cljs-repl "X.X.X" :scope "test"]
                  [adzerk/boot-reload    "X.X.X" :scope "test"]
                  [com.cemerick/piggieback "X.X.X" :scope "test"]
                  [weasel "X.X.X" :scope "test"]
                  [org.clojure/tools.nrepl "X.X.X" :scope "test"]])

(require '[adzerk.boot-cljs-repl :refer :all])

Passo 2: Criando a tarefa Dev

Atualize seus requerimentos e adicione o seguinte – eu vou explicar depois.

(require '[adzerk.boot-cljs      :refer :all]
         '[adzerk.boot-cljs-repl :refer :all]
         '[adzerk.boot-reload :refer :all])

(deftask dev []
  (comp
    (watch)
    (reload)
    (cljs-repl)
    (cljs :optimizations :none)
    ))

Uma das partes difíceis sobre boot é intuir como as tarefas são compostas e por que a ordem delas importa. Basicamente, tudo são funções que retornam funções que retornam funções, por isso vou dar as anotações rápidas: as tarefas vão de baixo para cima. Então, aqui, temos:

  • Compile o clojurescript e adicione-o ao conjunto de arquivos
  • Inicie um repl e passe o conjunto de arquivos junto
  • Atualize os arquivos do navegador quando alguma coisa mudar, e
  • Veja os arquivos para alterações e reexecute as tarefas anteriores

Para iniciar essa tarefa, basta executar $ boot dev.

Passo 3: Incluindo o arquivo compilado

Por padrão, o ponto de entrada do Clojurescript é o arquivo main.js que aparece (novamente por padrão) no diretório target do seu projeto boot.

Se você é como eu, armazena seus ativos de site estático em resources/public, então você realmente quer que seu arquivo main.js esteja lá (ou possivelmente em resources/public/js. Aqui está uma outra falha irritante de documentação: para fazer isso, você precisa criar um arquivo “.cljs.edn” no seu caminho de origem que corresponda ao caminho de recursos onde você deseja que o arquivo seja apresentado. Então, se você quer seu arquivo main.js aparecendo em resources/public/js/main.js, você precisa colocar o seguinte src/cljs/public/js/main.cljs.edn:

{:require [myproject.core]
 :init-fns []
 :compiler-options {:asset-path "/js/main.out"}}

Substitua myproject.core por qualquer namespace clojurescript que você pretende carregar primeiro. Com essa configuração no lugar, seus arquivos clojurescript irão ficar em target/pubic/js/main.out. Agora você pode servir o conteúdo do public para fins de desenvolvimento; você poderia usar boot-http para isso, mas se você é preguiçoso e tem o Python instalado, também pode ir para o diretório target/public e executar $ python -mSimpleHTTPServer para começar a servir arquivos a partir desse diretório.

Falando nisso, você também vai querer criar uma página HTML para carregar o arquivo. Aqui está algo que você pode jogar no resources/public/index.html para começar:

<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World~</h1>
        <script src="/js/main.js">
    </body>
</html>

Depois de executar boot dev, você deve ser capaz de abrir aquilo em um navegador.

Passo 4: Conectando-se ao navegador REPL

Eu uso vim-fireplace para o desenvolvimento Clojure porque eu sou assim. Para conectar a um navegador repl cljs-repl fornecido, edite um namespace em algum lugar no seu diretório src/cljs e, em seguida, execute o seguinte no vim:

:Piggieback (adzerk.boot-cljs-repl/repl-env)

Tenha certeza de que você tem a página carregada em um navegador! Se você não fizer isso, só vai congelar e você não vai saber o que está errado. Carregue a página primeiro, em seguida, conecte-a com Piggieback.

Deve ser isso! Você pode testar isso avaliando um alerta de JavaScript e tê-lo aparecendo no navegador: (js/alert “HELLO WORLD”).

***

Adam Bard faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://adambard.com/blog/clojurescript-boot-fireplace/