Hello, ClojureScript! (with jQuery)
I was looking for something really minimal, and the first simple example on my Google search was Daniel Harper’s article. I got rid of noir, used up to date versions of libraries, and voila – it’s working!
When I had my first “hello world” alert showing on page load, I decided to make things a little bit more interesting and introduce jQuery. I found jayq from Chris Granger and decided to give it a shot. There’s also a sample app on Chris’ blog that helped me with some issues, namely figuring out how to bind events. It references a few more interesting libs (namely fetch & crate), but I’ve had enough for now. I guess I could spend the whole night chasing such references.
In the end, the interesting pieces of code are below:
project.clj (configured to compile CLJS from src-cljs to resources/public/js/cljs.js):
(defproject hello-clojurescript "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.4.0"]
[ring "1.1.6"]
[jayq "0.1.0-alpha3"]]
:plugins [[lein-cljsbuild "0.2.8"]]
:cljsbuild
{
:source-path "src-cljs"
:compiler
{
:output-to "resources/public/js/cljs.js"
:optimizations :simple
:pretty-print true
}
}
:main hello-clojurescript.core
)core.clj (trivial app, with Ring wrapper configured to serve JS resources):
(ns hello-clojurescript.core
(:require [ring.adapter.jetty :as jetty]
[ring.middleware.resource :as resources]))
(defn handler [request]
{:status 200
:headers {"Content-Type" "text/html"}
:body
(str "<!DOCTYPE html>"
"<html>"
"<head>"
"</head>"
"<body>"
"<p id=\"clickable\">Click me!</p>"
"<p id=\"toggle\">Toggle Visible</p>"
"<script src=\"http://code.jquery.com/jquery-1.8.2.min.js\"></script>"
"<script src=\"js/cljs.js\"></script>"
"</body>"
"</html>")})
(def app
(-> handler
(resources/wrap-resource "public")))
(defn -main [& args]
(jetty/run-jetty app {:port 3000}))hello-clojurescript.cljs (this one gets compiled to JavaScript):
(ns hello-clojurescript
(:use [jayq.core :only [$ delegate toggle]]))
(def $body ($ :body))
(delegate $body :#clickable :click
(fn [e]
(toggle ($ :#toggle))))Complete source code with instructions can be found at my GitHub repository.
At the moment I see the following issues:
- I’m really green at ClojureScript. Tons to learn here!
- The JavaScript file compiled from this trivial example is 13k lines long and weighs about 500 kb. Doh! Fine for local development on desktop, not that good for targetting mobile.
- The official docs for ClojureScript are really… discouraging. Just like core Clojure documentation, they are pretty academic and obscure.
- Docs for jayq are… Wait a minute, nonexistent? At least it’s a fairly thin adapter with small, comprehensible codebase.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
