Integration of Clojure with Javascript and node.js and web frameworks

Web Technology   Digital Transformation Technology.  Artificial Intelligence Technology   Natural Language Processing Technology   Semantic Web Technology   Deep Learning Technology   Online Learning & Reinforcement Learning Technology  Chatbot and Q&A Technology   User Interface Technology   Knowledge Information Processing Technology   Reasoning Technology 　Programming.  Clojure.   Javascript

Introduction

Clojure has a framework that connects across various languages. In the previous article, we described a framework that links Python and Clojure from a machine learning perspective and described an implementation of the latest python machine learning library running on Clojure using these frameworks.

From a system perspective, Clojure was originally designed as a Lisp that runs on the Java platform, so it can use all native Java libraries, which are still used in many systems today. Clojure’s libraries can also be used in Java.

In recent years, web frameworks have become an important part of system construction. Javascript (or its derivative, AltJavascript) and frameworks using Javascript (React, View, etc.) are the de facto languages used to develop the front end of web frameworks.

Clojure has developed a framework (Clojurescript) to integrate these Javascript/frameworks and Clojure, and I would like to describe it here.In addition, in recent years, interoperability between Java and Javascript has become possible via GraalVM, a high-speed JVM, and there is an article that says that Clojure and Javascript can also be linked via this, but we omit it this time.

ClojureScript is a compiler for Clojure that targets JavaScript. Like other AitJavascript, ClojureScript will be a framework that generates JavaScript code compatible with advanced compilation modes using Google Closure optimized compiler. and will be a framework that combines the flexibility and interactive development of Clojure with the whole-program optimization of Google Closure to provide the most powerful language for web programming.

Hello World! with Clojurescript

I will now describe the specific implementation. First, see the following page for information on starting up the Clojure development environment. Create the following project files

cljs-test01        # Our project folder
├─ src             # The CLJS source code for our project
│  └─ cljs_test01  # Our cljs_test01 namespace folder
│     └─ core.cljs # Our main file
├─ cljs.jar        # (Windows only) The standalone Jar you downloaded earlier
└─ deps.edn        # (macOS/Linux only) A file for listing our dependencies

On the other hand, for the “deps.edn” file, on macOS or Linux, you would write the following

{:deps {org.clojure/clojurescript {:mvn/version "1.11.54"}}}

In addition, make the following description in the “src/cljs_test01/core.cljs” file.

(ns cljs-test01.core)

(println "Hello world!")

To build and run them, enter the following commands in the cljs-test01 directory using a terminal.

>clj -M --main cljs.main --compile cljs-test01.core --repl

For Windows, enter the following

>java -cp "cljs.jar;src" cljs.main --compile cljs-test01.core --repl

If all is well, the default browser will automatically launch and the following screen will appear.

The following is also displayed on the terminal screen

ClojureScript 1.11.54
cljs.user=> Hello world!

The flags used here are described in a bit more detail. –main calls a Clojure function, in this case cljs.main. cljs.main function supports a variety of command line arguments to specify common tasks. Here, –compile is used to specify that the cljs-test01.core namespace should be compiled. This is followed by –repl to invoke the REPL as soon as the compilation is complete.

Now make the following additions to the “src/cljs_test01/core.cljs” file.

(ns cljs-test01.core)

;(println "Hello world!")

;; ADDED
(defn average [a b]
  (/ (+ a b) 2.0))

You can try performing a REPL in the terminal as follows

cljs.user=> (require '[cljs_test01.core :as cljs] :reload)
nil
cljs.user=> (cljs/average 20 13)
16.5
cljs.user=>

Build Javascript files

Build using the file created in the previous section.

>clj -M -m cljs.main --optimizations advanced -c cljs-test01.core

On Windows, perform the following

>java -cp "cljs.jar;src" cljs.main --optimizations advanced -c cljs-test01.core

The “out” folder is created in the “cljs-test01″ folder, and various files/folders are created in it. out/main.js”, the file size is about 90K and it is compiled into a Javascript file as shown below.

f(typeof Math.imul == "undefined" || (Math.imul(0xffffffff,5) == 0)) {
    Math.imul = function (a, b) {
        var ah  = (a >>> 16) & 0xffff;
        var al = a & 0xffff;
        var bh  = (b >>> 16) & 0xffff;
        var bl = b & 0xffff;
        // the shift by 0 fixes the sign on the high part
        // the final |0 converts the unsigned value into a signed value
        return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
    }
}


/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
            ;var f;function w(a){var b=typeof a;return"object"!=b?b:a?Array.isArray(a)?"array":b:"null"}var aa="closure_uid_"+(1E9*Math.random()>>>0),ba=0;function da(a){const b=[];let c=0;for(const d in a)b[c++]=d;return b};function fa(a){const b=a.length;if(0<b){const c=Array(b);for(let d=0;d<b;d++)c[d]=a[d];return c}return[]};function ha(a,b){null!=a&&this.append.apply(this,arguments)}f=ha.prototype;f.Pa="";f.set=function(a){this.Pa=""+a};f.append=function(a,b,c){this.Pa+=String(a);if(null!=b)for(let d=1;d<arguments.length;d++)this.Pa+=arguments[d];return this};f.clear=function(){this.Pa=""};f.toString=function(){return this.Pa};var ia={},ka={},la;if("undefined"===typeof ia||"undefined"===typeof ka||"undefined"===typeof A)var A={};if("undefined"===typeof ia||"undefined"===typeof ka||"undefined"===typeof ma)var ma=null;if("undefined"===typeof ia||"undefined"===typeof ka||"undefined"===typeof na)var na=null;var oa=!0,pa=null;if("undefined"===typeof ia||"undefined"===typeof ka||"undefined"===typeof ra)var ra=null;
function sa(){return new ta....

In contrast, if we test as follows

>clj -M -m cljs.main --serve

On Windows

>java -cp "cljs.jar;src" cljs.main --serve

If you access localhost:9000 in a browser and look at the JavaScript Console, you will see that Hello World!

Running Clojurescript in Node.js

Please refer to the following page for information on setting up the node environment. First, run the following code as a spell to set up the environment.

>npm install source-map-support

Next, build the node project.

>clj -M -m cljs.main --target node --output-to main.js -c hello-world.core

On Windows

>java -cp "cljs.jar;src" cljs.main --target node --output-to main.js -c hello-world.core

Let the Node run.

>node main.js
Hello World!

Working with React

To use React, add the following library dependencies to the “deps.edn” file.

{:deps {org.clojure/clojurescript {:mvn/version "1.11.54"}
        cljsjs/react-dom {:mvn/version "16.2.0-3"}}}

In addition, write the “src/cljs_test01.core” file as follows: Refer to the following page for details on React.

(ns hello-world.core
  (:require react-dom))

(.render js/ReactDOM
  (.createElement js/React "h2" nil "Hello, React!")
  (.getElementById js/document "app"))

Build and run.

clj -M -m cljs.main -c hello-world.core -r

The browser will automatically launch and the following screen will appear. (with Hello React! assigned to the h2 tag)

The terminal shows the REPL screen. (after downloading the necessary libraries).

>clj -M -m cljs.main -c cljs-test01.core -r
Downloading: cljsjs/react-dom/16.2.0-3/react-dom-16.2.0-3.pom from clojars
Downloading: cljsjs/react/16.2.0-3/react-16.2.0-3.pom from clojars
Downloading: cljsjs/react/16.2.0-3/react-16.2.0-3.jar from clojars
Downloading: cljsjs/react-dom/16.2.0-3/react-dom-16.2.0-3.jar from clojars
ClojureScript 1.11.54
cljs.user=>

Various project templates for Clojurescript are provided for leiningen and boot, respectively.