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 tooling
  • org.clojure/clojurescript - adds the Clojurescript compiler
  • ring libraries & compojure - server-side requests & routing
  • com.cognitect/transit-clj - convey values between Clojure & Javascript
  • environ - manage environment settings
  • org.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 a render and root
  • 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>

results matching ""

    No results matching ""