OrgPad logo

Interactive development of web applications with ClojureScript

Created by Pavel Klavík

#Clojure, #ClojureScript, #ECCEDU, #REPL, #Re-frame, #React, #Reagent, #web applications

Interactive development of web applications with ClojureScript

Pavel Klavík

pavel v obleku

Interactive development of web applications with ClojureScript

800px-Clojure logo.svg

https://orgpad.info/s/eccedu

CTO and founder of OrgPad

799px-OrgPad Logo.svg

PhD from data visualization at Charles University, Prague

Software engineer at Google (1.5 years)

Clojure

Released by Rich Hickey in 2007 after two years of work. The name Clojure originated in closure of the languages C#, Java and Lisp (CLJ).

It is a stable language with a tiny core. There are amazing libraries and tools which increase the productivity. The basic philosophy of Clojure is simplicity.

Clojure logo

Screenshot (150)

Used by hundreds of companies

Used by companies such as Apple, Facebook, Netflix, WalmartLabs, ...

Screenshot (151)

The entire codebase of OrgPad has about 110,000 lines

image

Based on LISP

Instead f(x,y,z) write (f x y z).

Example code: Fizzbuzz

Too many parenthesis??

Screenshot (139)

Programming language Clojure

Interactive Clojure tutorial

DEMO of using Clojure

A hosted language on multiple platforms

The language is hosted on other platforms and we have a direct access to the environment. Therefore, it is straightforward to use an arbitrary library from the environment and on the other hand the native code can use a code written in Clojure. It is easy to add Clojure into an existing project. In many companies, it was sneaked in by some programmer and was later adapted by entire teams.

JVM

The original most used version of Clojure runs on JVM. It integrates well with existing Java libraries and on the other hand can be used to create new libraries used directly from Java. It is enought to add clojure.jar into the project.

JavaScript

ClojureScript is the language version which compiles to JavaScript. It uses Google Closure Compiler which optimizes and produces minimal code.

cljs-logo-120b

Dart

ClojureDart is the version which compiles into Dart. This allows development of native desktop and mobile apps, and use of Google Flutter.

image

Scripting with Babashka

Fast native Clojure scripting environment, a powerful bash replacement.

image

Java(Script) interop

Consider the following Java code:

Screenshot (146)

It can be written in Clojure in a more clear form:

Screenshot (147)

More informations about Java interop and Javascript interop; npm packages can be used via Shadow-cljs.

Let's test this out!

(doto (JFrame.)
(.add (doto (JLabel. "Hello World!")
(.setHorizontalAlignment SwingConstants/CENTER)))
.pack .show
(.setAlwaysOnTop true))

Data oriented programming

The Internet runs on text messages. The formats such as HTTP or JSON are usable by everyone. ORM and other binary formats are not.

An idea of Clojure is to use the same techniques for programming the insides of our systems. So distinct parts of the system communicate via plain data.

Data can be easily printed, analysed, a single set of functions can be applied, the communication is transparent. Transforms are applied on data to change them. The name functional programming wrongly puts the transformations into the fronts, the data are more important.

Data Oriented Programming book

There is an entire book by Yehonathan Sharvit which explain benefits of representing data with maps and vectors, instead of objects from OOP. This reduces the complexity, makes the system more understandable and easier to change. This book explains benefits of Clojure programming, while explaining it with examples using Javascript.

Sharvit-DOP-HI

Small database of books

image

Let's test it out

(def books
[{:title "The Catcher in the Rye" :author "J.D. Salinger" :year 1951}
{:title "Franny and Zooey" :author "J.D. Salinger" :year 1961}
{:title "To Kill a Mockingbird" :author "Harper Lee" :year 1960}
{:title "1984" :author "George Orwell" :year 1949}
{:title "Animal Farm" :author "George Orwell" :year 1945}
{:title "Pride and Prejudice" :author "Jane Austen" :year 1813}
{:title "Sense and Sensibility" :author "Jane Austen" :year 1811}
{:title "The Great Gatsby" :author "F. Scott Fitzgerald" :year 1925}
{:title "Tender Is the Night" :author "F. Scott Fitzgerald" :year 1934}])

Generating HTML using data

hiccup

This is a React component. See https://reagent-project.github.io/ for other examples.

Object oriented programming

I'm sorry that I long ago coined the term "objects" for this topic because it gets many people to focus on the lesser idea. The big idea is "messaging"

An ilustration of OOP

OOP visualised

Rich Hickey: Objects are like marionettes. Whoever having the reference fully controls the object. Nothing works in the real world like this.

Screenshot (141)

Example HTTP request

POST /cgi-bin/process.cgi HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.tutorialspoint.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 48
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

licenseID=string&content=string&/paramsXML=string

An HTTP Request as data

Screenshot (143)

An HTTP Request as an object

Rich Hickey: This is life sucking ...

Screenshot (142)

data are much simpler

Rich Hickey - Death by Specificity

Efficient immutable data structures

Clojure works with values which cannot be changed. But it is possible to efficiently create modified values.

Screenshot (152)

Rich Hickey created these data structures so they are efficient enought for 99% of all applications. Time to reading is 1-2x, time of writing is 1-4x. Often, the program can be in total more efficient which is counterintuitive.

Screenshot (153)

Functional programming

Screenshot (144)

The curse called Haskell

When one say functional programming, most programmers recall Haskell. It had infected academia so students are forced to learn it in university. I personally think that Haskell does big harm to functional programming because it is presented as mysterious and hard to understand. Words such as category theory, monads or functors create the following reaction with most programmers:

fuck math

Clojure is a practical transparent programming language without similar non-sense ideas.

How to build a web application with ClojureScript

React

React is the most popular JS frontend framework, developed by Facebook.

blobid0

Reagent

Reagent is a ClojureScript wrapper for React.

image

Re-frame

Re-frame gives a basic application structure for a Reagent application.

re-frame 128w

State app-db

The full state of your application. Usually a deeply nested map.

Events

Events occur based on the user's interactions and the outside world (e.g., a message comes from the server). Each event produces a new app-db from the current one.

Subscriptions

Subscriptions compute and cache values from app-db or other subscriptions.

Each subscription is a pure function of its inputs. So they only have to be recomputed when at least one of the inputs is changed.

Therefore a small change in app-db only leads to recomputing a few subscriptions and changing a few components.

Views

The rendering of the page is described in terms of components, in the Hiccup form:

image

These views are using subscriptions to display data from app-db.

sub

component

sub

state app-db

sub

component

sub

sub

component

component

app-db is updated

gray-circle-filled

gray-circle-filled

sub

component

sub

state app-db

sub

component

sub

sub

component

component

OrgPad 20% off

Promo code: ECCEDU

Field 3x3

Tic-tac-toe

Who is playing now

Won?

Field

RESET button

Board

Win message