It’s been a week, time for another Columns for Steem update! As I announced last time, this update is focused on speed improvements.
(If you don’t see the updated version when you visit the website, hold down the Shift key and click your browser’s reload button to force a full reload of the site)
Among other things I completely rewrote how new posts are loaded in the app as part of the speed improvements, this is the most visible change in this update. Now only one new post at a time scrolls in from the top, so you actually have time to read it before the next one scrolls in. I think this is a big improvement to the way it worked before but I haven’t removed the old code yet, I might add the old method as an optional setting at some point if there are people who preferred it. There are going to be multiple methods at some point anyhow, like showing in the UI how many new posts there are and then you can manually scroll up to the new posts, which is for example how it works in Tweetbot and lots of other apps.
Why was this part of the speed improvement update? This change also means that only one new post at a time has to be rendered which is a lot faster than rendering a whole bunch of them at once, which means the stuttering you might have noticed in the app before this update when new posts where scrolling in is now nearly completely gone. There is probably still a bit I can optimize here in future updates but for now I’m very happy with it, especially since I was able to slice the amount of code for this in half so it’s a lot easier to maintain and extend with future enhancements.
Like I mentioned last update, the next updates are going to start adding things like voting on posts, reading posts, writing posts and so on. Next update will probably take a bit longer due to Christmas and mandatory family visits, but it’s going to be worth the wait :)
Behind the scenes
For my other project Steem Observatory, I wrote a lot of behind the scenes info in these update posts, mainly for other programmers who are interested in these kind of things, but I haven’t done that for Columns for Steem yet. Since there wasn’t much to write for this update, I thought I’ll do this for the first time here.
Like I said in the announcement post for the app, it’s written in the ClojureScript programming language, a modern Lisp dialect. Obligatory xkcd comics:
I’m using the Reagent framework, which is a minimalistic wrapper on top of ReactJS. This combination of ClojureScript & Reagent has been called both the holy grail and the best kept secret of web development by people who tried it because it makes you crazy productive and I have to agree with them, at this point I never want to go back to programming websites any other way, everything I used before feels unnecessarily slow and complex in comparison and I’ve been programming for ~25 years in ~60 languages and dozens of frameworks.
Through hot reloading it lets you write a website live while it’s running, no need to constantly refresh the browser, losing your state and starting from scratch. And creating React components couldn’t be easier, in fact, they are just simple ClojureScript functions. Zero boilerplate. A component is just a function like any other which returns HTML and the function arguments are the properties of the component.
I’ve been using this combo for a month and a half now, so my development environment has become more sophisticated over time. The ClojureScript community maintains a fork of the Google Chrome Dev Tools called Dirac which adds full support for ClojureScript, so it becomes a first class language in the browser which means you don’t need to fiddle around with JavaScript while debugging, ever.
I’ve mostly been using the web based Nightlight IDE for development, but as Columns for Steem has grown bigger the editor was getting a bit slow, so I switched to Github’s Atom with the proto-repl and parinfer addons which add great Clojure support to Atom. While I am an Emacs fan and Emacs is the defacto standard tool for Clojure development (and Lisp dialects in general since Emacs is written in and extensible with Lisp), I sometimes prefer Atom, just because Emac’s GUI is so archaic, especially the scroll behavior.
Here’s a screenshot of my dev setup with Atom on the left showing the source code for the app in the top split view and unit tests in the bottom. On the right side of the screen is Dirac and below that a terminal running both the app and unit tests.
Dirac features a full ClojureScript REPL, so I can look at and modify the state of the app live. For example, by writing (add-column “#programming”) in Dirac I can open a new column with the hashtag programming. Or as you can see in the screenshot, I can look at the current state of a column and for example print all of the titles of posts displayed in it, or the links to all the images.