Book Image

Learning ClojureScript

By : W. David Jarvis, Allen Rohner
Book Image

Learning ClojureScript

By: W. David Jarvis, Allen Rohner

Overview of this book

Clojure is an expressive language that makes it possible to easily tackle complex software development challenges. Its bias toward interactive development has made it a powerful tool, enabling high developer productivity. In this book, you will first learn how to construct an interactive development experience for ClojureScript.. You will be guided through ClojureScript language concepts, looking at the basics first, then being introduced to advanced concepts such as functional programming or macro writing. After that, we elaborate on the subject of single page web applications, showcasing how to build a simple one, then covering different possible enhancements. We move on to study more advanced ClojureScript concepts, where you will be shown how to address some complex algorithmic cases. Finally, you'll learn about optional type-checking for your programs, how you can write portable code, test it, and put the advanced compilation mode of the Google Closure Compiler to good use.
Table of Contents (15 chapters)
Learning ClojureScript
Credits
Foreword
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Using third-party JS


As we mentioned earlier, we can't simply mix React and standard JS libraries and expect the DOM to stay relatively consistent, however there are some situations where mixing the two is a requirement. We'll discuss how to do that now.

Let's say we'd like to insert a map into our application using Leaflet.js ( http://leafletjs.com/). Leaflet is a popular open source JS library for displaying OpenStreetMap data.

Leaflet's API expects to be given a JS element to render into, which is a relatively common pattern in JS libraries:

(defn leaflet-map [app owner] 
  (reify 
    om/IInitState  
    (init-state [_] 
      {:the-map nil})  
    om/IDidMount (did-mount [_] 
      (let [the-map (js/L.map "map")] 
        (om/set-state! owner :the-map the-map)))  
    om/IRender (render [this] 
      (dom/div {:id "map"} nil)) ``` 

Here, in render, we create an empty div with the ID map. During IDidMount, after the div is rendered into...