Application components

The next thing we'll do is open the src/contacts/core.cljs file, which is where our application code will go, and make sure it looks like the following so that we have a clean slate with the appropriate namespace declaration:

(ns contacts.core 
  (:require [om.next :as om]
            [contacts.parser :as parser]
            [contacts.ui :as ui])) 
 
(enable-console-print!) 
 
(def init-data 
  {:list/contacts [{:name  "James Hetfield" 
                    :email "james@metallica.com" 
                    :phone "+1 XXX XXX XXX"} 
                   {:name  "Adam Darski" 
                    :email "the.nergal@behemoth.pl" 
                    :phone "+48 XXX XXX XXX"}]}) 

(def reconciler
  (om/reconciler
    {:state init-data
     :parser parser/parser}))

(defn mount-root-view! []
  (om/add-root! reconciler ui/RootView (.getElementById js/document "app")))

(mount-root-view!) 

(defn on-js-reload []
  (mount-root-view!))

Every Om application starts with a root component, created by the om/add-root! function. It takes three arguments, as follows:

• reconciler, which manages application state
• A component to render
• A place to mount the component

In this instance, the component will mount on a DOM element whose ID is app. This element was given to us by the figwheel template and is located in the resources/public/index.html file.

Of course, this code won't compile yet, as we don't have reconciler and ui/RootView. Let's solve that and create them.