A different tack
I’ve been very lucky to have had steady employment using Ruby and Rails. At times, it felt like cheating. How can I have so much fun and get paid well for it?
Continuing my search for that fun high, I started looking at other technologies. I’ve been an admirer of Clojure for a while. Its approach to composing programs seems to suit how I think software development should be. In the same vein, ReactJS’s approach to building UIs using components fits how I think UIs should be built. As such, I’m embarking on a rewrite of my bookmarking site, Particle Transporter, using Clojure and ReactJS.
The big goals for this rewrite are:
- Have a nicer UI for the listing of links than what’s on the current site
- Implement a filter (filter by tags to start with)
- Fetch the title of a given link in the background using core.async
- Fetch the first paragraph (if available) of a given link in the background using core.async
- Have an offline mode, to ease development from multiple machines
Having spent a few months at Shopify, I really started liking a UI concept called Cards. It seems to nicely encapsulate a piece of data. This makes it an easy choice for ReactJS, since we can take each saved link and all its data and metadata and wrap it into a card. However, I’m getting ahead of myself. Firstly, I’m going to set up the environment in which I can create this app.
Since this will be a Clojure app, I’m going to use Compojure as the base. Leiningen is a must, obviously, and it provides a template that generates a Compojure-flavoured skeleton.
Cool, the filesystem structure is there. I am going to give it a quick whirl, running
lein ring server on the command line within the directory. A few seconds later, I see “Hello World” in a browser tab.
Now that I have a running server, I’m going to add a view that sets up the skeleton of the html page. To do that, I’ll install Hiccup. It allows me to write views in Clojure, which will then render HTML. Stopping and starting the server using
lein will install the newly specified dependency automatically.
OK, next, I need to add the base view and add ReactJS files.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
I am going to reference the views file in the default
handler.clj file and adjust the home route to render the HTML page.
1 2 3 4 5 6 7 8 9 10 11 12 13
Refreshing the page, I see the header link and an empty page. Checking the console, I see no errors, so all the JS files have been required successfully. Onto the next step, creating a ReactJS view.
1 2 3 4 5 6 7 8 9 10 11
I specified the top-level component and the child component that will do most of the work. The top-level component is given a URL from which data will be fetched and an HTML element that it should render into.
That’s it for part 1. Next, I will specify the data source and render out the links.