Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR). 

Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.

In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.

This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours. 

We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure. 

The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
 

The backend is hosted on Google Firebase. 

Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.

Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.

By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.

Build a Fullstack Web Graphics Editor in Clojure and React

This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.

Tinycanva: Clojure for React Developers

---
title: Clojure Constructs and Techniques to Interact with JavaScript
slug: stdlib-interop
description: Clojure lets you write code close to the metal ie the host language. In this chapter, we'll learn about constructs and techniques to interact with JavaScript within Clojure.
privateVideoUrl: https://fullstack.wistia.com/medias/6nxa49xk1i
code: https://gitlab.com/fullstackio/books/newline-course-apps/shivek-khurana-tinycanva-clojure-for-react-developers-app/-/tree/main/code/module_03/lesson_03.05/App/source_code/first-project?ref_type=heads
---

# Transparent interoperability

Clojure doesn't hide the underlying host from the developer. It lets you bypass Clojure and write code close to the metal. This chapter on interop is focused on JavaScript as a host, but most of the concepts will apply to other hosts too. The code examples in this chapter are in the `first-project.interop` namespace.

## `js` namespace

JavaScript objects like `Array`, `Date`, `Math`, and `Object` are accessible via the `js/` namespace. You can evaluate these forms and check what they look like:

```clojure { actualFilename=./protected/source_code/first-project/src/first_project/interop.cljs endLine=5 startLine=3 statedFilename=first-project/src/first_project/interop.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_03/lesson_03.05/protected/source_code/first-project/src/first_project/interop.cljs#L3 }
js/Math ;; => #js {}
js/Array ;; => #object[Array]
(type js/Array) ;; => #object[Function]
```

In a browser environment, you can access the `window` object using `js/window`.

## Instantiating objects

To create instances of JS objects, we can use the `new` function or the `.` dot suffix:

```clojure { actualFilename=./protected/source_code/first-project/src/first_project/interop.cljs endLine=8 startLine=7 statedFilename=first-project/src/first_project/interop.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_03/lesson_03.05/protected/source_code/first-project/src/first_project/interop.cljs#L7 }
(new js/Date) ;; => #inst "2020-08-14T06:39:35.529-00:00"
(js/Date.) ;; => #inst "2020-08-14T06:39:49.126-00:00"
```

All arguments passed are passed down to the constructor:

```clojure { actualFilename=./protected/source_code/first-project/src/first_project/interop.cljs endLine=11 startLine=10 statedFilename=first-project/src/first_project/interop.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_03/lesson_03.05/protected/source_code/first-project/src/first_project/interop.cljs#L10 }
(new js/Array 1 2 3) ;; => #js [1 2 3]
(js/Array. 1 2 3) ;; => #js [1 2 3]
```

Notice the `#js` prefix in the result of the inline evaluation. This signifies that the data structure is not a CLJS vector but a JS Array.

The forms `(new js/Foo p q r)` and `(js/Foo. p q r)` are equal to `new Foo(p, q, r);`. You can use [Klipse](http://app.klipse.tech/) to check the transpilation in real-time.

## Calling object methods

A method `bar` on object `Foo` can be called using `(.bar Foo p q r)`. This is equal to`Foo.bar(p, q, r)` in the JS domain:

```clojure { actualFilename=./protected/source_code/first-project/src/first_project/interop.cljs endLine=19 startLine=15 statedFilename=first-project/src/first_project/interop.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_03/lesson_03.05/protected/source_code/first-project/src/first_project/interop.cljs#L15 }
;; same as Date.now()
(.now js/Date) ;; => 1597388702083

;; same as (new Array(1, 2, 3)).map(i => i + 1)
(.map (new js/Array 1 2 3) inc)
```

The `now` method on the `js/Date` object is a static function, ie doesn't require an initialized object. The `.map` method on `js/Array` is an instance method, ie requires an instance of `Array` to operate on.

A static method `bar` defined for a class `Foo` can be alternatively called using `(js/Foo.bar)`. We can rewrite the `now` function call as:

```clojure { actualFilename=./protected/source_code/first-project/src/first_project/interop.cljs endLine=21 startLine=21 statedFilename=first-project/src/first_project/interop.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_03/lesson_03.05/protected/source_code/first-project/src/first_project/interop.cljs#L21 }
(js/Date.now) ;; => 1597389177815
```

Clojure lets you write code close to the metal ie the host language. In this chapter, we'll learn about constructs and techniques to interact with JavaScript within Clojure.