Clojurescript (CLJS) – ReactJS, Re-Frame, and Reagent

I’ve been using Re-frame pretty extensively these last few weeks as we begin to work on the front end of our horrendously stylized project called Pipeline.  It has been pretty tough to get the hang of but after being stubborn enough not to change my mind once going down this road I’m really starting to come around … and dare I say, actually understand how to make it work!

What’s the Big Idea?

There are a few components to what I’m talking about that I’ll go over below.  The big idea though is that web applications today are a big mess of javascript, html, and CSS that is somehow stitched together.  Most of todays web applications aspire to be Single Page Applications (or SPA if you are into that whole brevity thing).  Several frameworks have emerged with the (arguably) popular ones being Angular.js (from Google) and React.js (from Facebook).  The big picture though is:  How do you create a great Web front end to your application?  These frameworks typically call the APIs of a web backend which (hopefully) would be the same backend that a mobile application would call.

Clojurescript

Clojurescript is a LISP language.  It’s basically the same language/syntax as Clojure but where as Clojure compiles down to Java, Clojurescript compiles down to Javascript.  Why would you want that?  Seems like overhead.  Well, the claim is that the Google closure compiler (confusing name) is much more efficient and can make it faster.

What is interesting to me as I go down this route is that most of the blog posts are from 2014 and earlier and I can’t tell if I’m pursuing a path that is no longer cool or what.  This is surprising to me because with the greater popularity of React these days this seems like a great path.

The downside to clojurescript is the stack traces are difficult to comb through and understanding the whole immutability thing can be a struggle.

React

React is Facebook’s Javascript library for creating user interfaces.  The idea is that there is a virtual dom and it listens to changes in data (binds to data) then will respond immediately to the changes.  It’s funny that after using the library through Reagent I still don’t really understand React.  To me its just the data changes and the web page is immediately updated.

It should be noted that React isn’t a full on featured library like Angular so some people say its unfair to compare them.  But I tend to like this blog’s argument of why you can.  And in my limited knowledge of things in the world am easily persuaded by his post.  (Or should I say, enjoy that he has validated my decision).  I especially like the “unix philosophy” argument that takes the position of: “Your tool should do one thing very well”.

Reagent

So you have React and you have Clojurescript and you want to make awesome happen.  So naturally people create frameworks to make this happen for you.  Om, Rum, and some others emerge and I think are still out there.  I settled on Reagent though cause it seemed pretty simple and easier for me to wrap my head around.  Reagent uses the hiccup syntax so it gets rid of having to do html tags and makes it easier to see.  When I used Ruby on Rails I would use HAML which was the same concept.

The result is that now when you are writing the application everything is in one language!  There’s no sprinking of HTML and not mixing with Javascript, its all just Clojurescript!  This is the thing I most love about it.  Its more akin to me like designing an iOS application in swift where there is one language to do it all.

The other powerful aspect of Reagent is that it is functional.  Functional Reactive Programming (or FRP) means that interfaces respond to the data.  Or, “everything is data derived”.  There’s no ngThis or ngThat, it’s just functional stuff.

The issue with Reagent (or lack of design feature) is that it is silent on how to store data and interact with data (client side) as well as serverside.  This is where the grand daddy of them all comes into play:  Re-Frame

Re-Frame

I started with examining the README file on the Re-Frame project and was immediately blown away.  Yes!  This is the most epic readme of all projects.  The examples and docs were pretty clear and quite glorious.  I loved the opinionated nature of it and the humor.  (not the best reason to pick a framework, but not bad!)

Re-frame is a framework that works with Reagent to create the idea of a clientside database.  (Or a database that lives in the browswer).  It makes things fast and helps with state changes.  It has the idea of subscribing to changes or dispatching changes to the database realizing that everything can be asyncronous but everything responds to changes in the data.  Data all the way down.

An Example

I put an example on github that you can see if you want to run for yourself.

The idea is that you have a list of names and you want to filter them in the search bar.  Here’s the main entry code that is called from the main reagent code that initializes this home page.

I have several bootstrap tags in there that I took out of the code.  The tricky thing is to notice the reagent r/atom which is the data that changes.  This code doesn’t have any re-frame code to it.  Basically it displays a form.  Notice the code at the bottom to call display-names.  That code is where the filtering happens.  When the input is changed, the search-string changes.  You never have to re-call display names as its always called and responds to changes in data.  So great!

Above is the display names code that takes a list of names (defined outside the function in the def (or variable ) called “names”.  It goes through and prints a name if it matches the filter.