Building a web app with Replicant - an example/template

I am very inspired by Christian Johansen’s takes on about everything todo with programming. If you haven’t watched this talk, you have missed something:

Christian is the creator of many libraries and tools helping people like me to gain not only from his ideas, but also to directly put them in practice. Stuff like Dumdom, the Gadget inspector and Portfolio.

As you may or may not know, there is a successor to Dumdom, called Replicant. It’s pure ClojureScript and also takes data orientation even more seriously. At my current client’s, Anteo AS, We are switching to Replicant. As a result of that we’ve created a tiny example app, exercising most of Replicant.

We’ve tried to make the README helpful in relaying what Replicant is about and how to use the example app to figure out wether Replicant is for you or not. Getting the example app running takes a few seconds, and the app code is <100 LOC.

11 Likes

Thanks a lot for creating and sharing the example. I tried it out today and everything worked fine. Christian’s talk is a great inspiration and it is awesome to see these ideas in an example. I especially like the way the actions are structured. Never saw this before, almost looks like a mini lisp. Furthermore, it avoids that you need to invent and register an action name for each and every event handler. Instead you just combine a few of these generic actions to assemble the event handler.

2 Likes

Thanks for this! It’s nice to have a nice and clear getting started guide, and the scripts for building Gadget inspector is a great bonus.

I’ve been using Dumdom up until now, and just tried to swap it out with Replicant in a small pet project following your example. I noticed that how to declare event handlers in hiccup has changed: Dumdom uses the default :on-click ,,, style, while Replicant is using :on {:click ,,,} (inspired by Snabbdom, I guess, which incidentally powers Dumdom). I thought I’d give it a spin sticking with the old style, and to my surprise Replicant gave me some really nice and helpful warnings in the console:

Very nice start to using the library. Thanks, Christian and PEZ! (and the other contributors)

2 Likes

The warning messages from Replicant are next level. I keep getting happily surprised by them: Peter (PEZ) Strömberg on LinkedIn: Replicant takes helpful warning messages to the next level. 1. Tells me…

An imperative mini lisp. :grinning:

1 Like

I’ve put together my pet project now: a very simple app for managing substitutions of players in football matches (or any team sport), where you just want to keep track of who’s on next, and who’s off next, based on their playing time. (useful when you have a bunch of small kids that you would like to give roughly the same amount of playing time).

Tech:

The architecture is inspired by Christian’s earlier mentioned talk.

Live demo: Skipti

Edit: forgot to mention: the ui is built for mobile screens, not looking very nice on large screens.

Edit2: also forgot to mention: the testing experience with what you get out of the box with shadow-cljs is really nice. Just setup a test build with autorun, and you’ll get instant feedback in the repl. No extra libs needed. It is, however, a bit rudimentary, but for my small project it fit perfectly.

2 Likes

So cool! I will have a really close look!