simonneutert / clojurescript-web-app-demo

I wanted to see how far I can push it, having dabbled with Clojure/-Script for a few weeks after work. So, there you have it: an example of an artisinal (most probably bad 🫠) NodeJS-independent Frontend Project 🍻 😎

fully functional everything clojurescript example

What is this and what will I see, when I run the Dockerfile?

A simple, but interactive event calendar for the city of Mainz, Germany. With search and filters and xhr calls in the background and such ☮️

---

When you walk to the edge of all the light you have and take that first step into the darkness of the unknown, you must believe that one of two things will happen. There will be something solid for you to stand upon or you will be taught to fly.”
- Patrick Overton, The leaning tree

Rationale

I wanted to see how far I can push it, having dabbled with Clojure/-Script for a few weeks after work.

So, there you have it: an example of an artisinal (most probably bad 🫠) NodeJS-independent Frontend Project 🍻 😎

what's in for me learning clojure(-script?)
- everyone not writing lisp

well, if you thought Elm was cool, but you struggled with the types... or maybe you think types hinder from greatness... Rich never said this, but I heard it anyways in his talks.

What you have at hand, when going through this codebase

• firing and receiving a http json request
  • json extraction
  • process data, extract information
• dynamic data binding / state management
• DOM creation/manipulation
• state management
• very basic Browser Event Management
  • user interaction
  • filtering
• parameterized build for dev/prod scenarios

Run with Docker 🐳

$ docker build . -t clj-events-spa
$ docker run --rm -p 8080:80 clj-events-spa

then open http://localhost:8080

Pre-Conditions (if you want to get your hands dirty 👏)

• have Clojure installed
• skim this page about quick starting ClojureScript: https://clojurescript.org/guides/quick-start
• curl

I code clojure in VS Code using VSCode with Calva or a similar Editor supporting Clojure(-Script)

Compile the sources and view them

./build-production.sh and then http-serve the files

I solve that task using node's http-server
other may use Python for that

What's good, what could be easily improved, what did I learn?

improvements needed

• state management abstraction, faster filtering may (see medium low hanging fruits)

medium low hanging fruits

• lookup table for the calendar events
• memoizing results 🤷‍♂️

what was learned

• clojure(-script) isn't witchcraft and has some really nice docs/api/reference
• almost no dependencies needed 🤯
• one language to rule them all

Development (with VSCode and Calva)

• start a REPL deps.edn + ClojureScript build for Browser
• a Browser will open, then
• evaluate core.cljs line by line
• evaluate requirements in events.cljs and inspect the events in state