Create the project
Create the project using the Leiningen Chestnut template
lein new chestnut om-clojurex
Lets quickly explore the key parts of this project
Dependencies
Review Project Dependencies
Open the om-clojurex/project.clj
file to review the dependencies already added to the project.
:dependencies [[org.clojure/clojure "1.8.0"]
[org.clojure/clojurescript "1.9.89" :scope "provided"]
[com.cognitect/transit-clj "0.8.285"]
[ring "1.4.0"]
[ring/ring-defaults "0.2.0"]
[bk/ring-gzip "0.1.1"]
[ring.middleware.logger "0.5.0"]
[compojure "1.5.0"]
[environ "1.0.3"]
[org.omcljs/om "1.0.0-alpha36"]]
org.clojure/clojure
- provides the Clojure language and toolingorg.clojure/clojurescript
- adds the Clojurescript compilerring
libraries &compojure
- server-side requests & routingcom.cognitect/transit-clj
- convey values between Clojure & Javascriptenviron
- manage environment settingsorg.omcljs/om
- a React API based micro-framework
Namespace Libraries
Review the Namespace
Open the om-clojure/src/om-clojurex/cljs/core.cljs
file to see how the namespace and required libraries are defined in the sample code.
The Om libraries are included in the namespace with :require
, giving the libraries aliases.
(ns om-clojurex.core
(:require [om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]))
om.core
- functions that model the React API, such arender
androot
om.dom
- create html code from Clojure code
Om State & Components
Review the definitions for the state and the component and root functions
Open the om-clojure/src/om-clojurex/cljs/core.cljs
file to review the sample code provided with the project.
- Enable printing of messages to the browsers javascript console log
(enable-console-print!)
- Define the application state (the model) for the application. This is a map (hash map with key value pairs) that contains a single key called
:text
and a string as its value.
(defonce app-state (atom {:text "Hello Chestnut!"}))
def or defonce
The defonce
function is used to prevent the app-state being reset to the default value every time a change is saved to the file. This enables you to evolve the code and state at the same time.
- Define a component that returns a div element, containing an h1 element which contains a string taken from the
:text
part of the application state.
(defn root-component [app owner]
(reify
om/IRender
(render [_]
(dom/div nil (dom/h1 nil (:text app))))))
- Define the root of the Clojurescript project and define where it will be included in the main html page. The root contains one component, to which is passed the app-state
(om/root
root-component
app-state
{:target (js/document.getElementById "app")})
Connecting the app with the html page
The "app" refers to a div with the same id in the main html file
Main HTML source code file
Review the HTML page
Open the om-clojure/resources/public/index.html
file to review the sample HTML code provided with the project.
- In the body of the HTML file is a
div
tag which defines where the generated Javascript code is to be included on the page.
<body>
<div id="app"></div>
<script src="js/compiled/om_clojurex.js" type="text/javascript"></script>
</body>