O objetivo deste tutorial é configurar um ambiente de desenvolvimento que forneça os blocos de construção de um aplicativo ClojureScript – destinado a ser executado em um navegador da web.
Você criará um novo projeto ClojureScript com um objetivo de design simples – exibir uma saudação em um navegador da Web dizendo “Olá navegador” – deixando o resto para sua imaginação e determinação.
Este tutorial é destinado a pessoas que têm um conhecimento básico da linguagem de programação Clojure e suas estruturas de dados e são interessantes na exploração de escrever aplicativos de navegador usando ClojureScript .
Como a abordagem deste tutorial é “por exemplo” – antes de começar, você precisará ter um ambiente de desenvolvimento Clojure e Leiningen funcionando (versão 2.5.0 no momento da escrita) instalados.
Criando um novo projeto
Para começar, abra um novo terminal e crie um novo projeto usando o lein</code> command:
$ lein new hello-browser
# Generating a project called hello-browser ...
$ cd hello-browserOrganizando seu código-fonte
Vamos dar uma olhada na estrutura do código-fonte do leiningen do projeto criado para nós:
$ ls src/hello_browser
# core.cljPor padrão, o leiningen assume SOMENTE o código-fonte do Clojure – ele cria o diretório-fonte src/hello_browser</code> along with the source file src/hello_browser/code.clj</code> to keep your Clojure source neatly organised.
Como nosso aplicativo usa o código-fonte ClojureScript (ao contrário do Clojure), precisamos estruturar nosso projeto de acordo e fazer algumas pequenas alterações na estrutura de origem.
Vamos primeiro remover o diretório de origem padrão do Clojure (já que usaremos apenas o ClojureScript):
$ rm -rf src/hello_browserEstaremos armazenando nosso código-fonte ClojureScript no src/cljs/hello_browser</code> directory - so lets create it:
$ mkdir -p src/cljs/hello_browserConfigurando cljsbuild para compilar ClojureScript
cljsbuild será responsável por compilar nosso ClojureScript em Javascript. Para fazer isso, temos que informar ao cljsbuild sobre a localização de nosso código-fonte ClojureScript e onde enviar o javascript compilado.
Fazemos isso editando o project.clj</code> file - adding a dependancy on clojurescript & the cljsbuild leiningen plugin, including build instructions for the cljsbuild:
(defproject hello-browser "0.1.0-SNAPSHOT"
:dependencies [[org.clojure/clojure "1.6.0"]
[org.clojure/clojurescript "0.0-2411"]]
:plugins [[lein-cljsbuild "1.0.3"]]
:cljsbuild {
:builds [{:source-paths ["src/cljs"]
:compiler {:output-to "resources/public/core.js"}}]})Estamos instruindo cljsbuild para procurar o código-fonte do ClojureScript nosrc/cljs</code> directory and to output the compiled javascript to a single file resources/public/core.js</code>.
Compilando seu ClojureScript
Agora que configuramos nosso projeto leiningen, uma estrutura de diretório para armazenar nosso código-fonte ClojureScript e cljsbuild configurado – podemos criar nosso primeiro arquivo-fonte ClojureScript.
Vamos manter as coisas simples – o objetivo do design deste projeto é simplesmente exibir uma saudação dizendo “Olá, navegador”. Vamos criar nosso primeiro arquivo fonte ClojureScriptsrc/cljs/hello_browser/core.cljs</code>:
(ns hello-browser.core)
(.write js/document "<h1>Hello Browser</h1>")Estamos definindo um namespace hello-browser.core e escrevendo a string “<h1> Hello Browser </h1>” no documento (levando em consideração que este ClojureScript é destinado a ser executado em um navegador).
Em um novo terminal, podemos usar o comando lein , junto com o plugin cljsbuild , para compilar nosso ClojureScript em javascript:
$ lein cljsbuild once
#Compiling ClojureScript.
#Compiling "resources/public/core.js" from ["src/cljs"]...
#Successfully compiled "resources/public/core.js"Com base na configuração do cljsbuild noproject.clj</code> file the lein cljsbuild command has compiled all ClojureScript source files(src/cljs</code>) into Javascript(resources/public/core.js</code>).
Embora construir o arquivo uma vez seja útil (ou seja, pré-implantação) durante o desenvolvimento, esperaremos muitas mudanças nos arquivos de origem do ClojureScript. Seria muito difícil executar um comando após cada alteração – digite lein cljsbuild auto :
$ lein cljsbuild auto
# Compiling ClojureScript.
# Compiling "resources/public/core.js" from ["src/cljs"]...
# Successfully compiled "resources/public/core.js"Usando lein cljsbuild auto</code>, anytime a ClojureScript source file changes, cljsbuild will automatically re-compile the javascript.
Ocasionalmente, também é útil excluir todo o javascript compilado para obter uma nova versão:
lein cljsbuild clean
# Deleting files generated by lein-cljsbuild.Um ambiente para o seu ClojureScript
Como nosso ClojureScript é compilado em Javascript, precisamos de um ambiente de navegador para executá-lo. Para isso, criaremos uma página html que se refere ao javascript compilado.
Uma vez que nosso script Clojure é compilado em resources/public/core.js</code> we will create a simple resources/public/index.html</code> html file, which will reference the compiled core.js</code> file.
<!DOCTYPE html>
<html>
<head><title>ClojureScript Hello Browser</title></head>
<body>
<script type="text/javascript" src="core.js"></script>
</body>
</html>Abrindo o resources/public/index.html</code> file, will present a Greeting "Hello Browser" - indicating the ClojureScript was compiled successfully.
Conclusão
Agora que você tem um ambiente para compilar e hospedar seu aplicativo ClojureScript, verifique estas bibliotecas Clojure / ClojureScript interessantes: