Project Postmortem: FlatCollab Part 2

JavaScript & jQuery Edition

Wait, didn’t we have this blog post already?

I did do a post about FlatCollab already, it’s true. However, the original FlatCollab was only Rails, HTML, and CSS — the front end was a series of static pages.

FlatCollab 2 has a nice spiffy new front end that uses jQuery and AJAX calls to render all of FlatCollab’s functionality as a single page app. The Rails backend is now mostly used as an API, rendering JSON responses which the front end processes into JavaScript model objects.

It looks pretty much the same.

I didn’t change much about the design other than adding a handful of animated UI features (like the dropdown menu in the navbar, which formerly was CSS-only).

Behind the scenes, though, it’s totally rebuilt. Instead of loading an entire new page of HTML when the new task form is submitted, JavaScript is there, ticking away behind the scenes. Our helpful little script takes the values from the form, sends them to the backend via an AJAX call, and gets back a JSON response with the newly persisted task. Then it can add that one little piece of HTML to the list of tasks, instead of reloading the entire page and hitting the database with another collection query.

Single page apps suck.

Now you’re just being negative.

It’s true, though. I didn’t really realize how annoying they were from a UX perspective until I spent a lot of time testing AJAX calls on inner pages of FlatCollab.

Since you’re not actually loading a separate URL for each page, you can’t link directly to the page you want. You have to click through all the intervening navigation steps to get anywhere. Plus, it breaks the back button.

So, while it was good experience and it’s fun to say that I built an SPA, there’s no use in SPA for its own sake. The next iteration of FlatCollab is going to include a little rebuild so it doesn’t break important browser UX features.

What was the hardest thing about the rebuild?

Definitely the timing. I started working on this project on January 21… yeah, the day after the inauguration. Given what was happening in the news, I wasn’t at my most focused.

Once I took a break from reading the headlines on Twitter and got my head back in the game, though, it was a great distraction. There’s nothing like debugging a silently failing AJAX call to make you forget all your other troubles.

What did you learn during this project?

This is the most JavaScript-intensive project I’ve done so far, and I really gained a new appreciation for all the cool stuff JavaScript can do.
 
JS was tough for me to get a handle on at first. I’ve done a good bit of JS work before, but I didn’t really get to experience how flexible the language is and how many ways it can be applied. But now I feel a lot more comfortable with all the various ways to move data from client to server and back again.

What’s a cool trick you learned while building FlatCollab 2?

I wanted to do some conditional formatting on the client side — showing the edit button only if a post belonged to the current logged in user, for example. But I couldn’t think of a good way to pass the current user’s id from the controller to the view.

As it turned out, the answer was on Stack Overflow. Why do I even bother Googling stuff when I could just search SO?

# /application.html.erb
# at the very bottom of the file
# just above the closing </body> tag
<script>
window.currentUser = {
id: <%= current_user.id %>
}
</script>

It’s a neat trick. The erb gets rendered server side, replacing <%= current_user.id %> with the actual id. Then, since this is in the application layout which gets loaded for every page, each page has a currentUser.id that can easily be referenced in your client-side code.

Another thing which I’m not sure qualifies as “cool,” exactly: when getting ready to deploy to Heroku, I found out that Rails’ default JS minifier, Uglify, doesn’t play nice with ES6 syntax, which caused asset precompiling to fail on my ES6 classes and methods.

My options for transpiling my ES6 code to something that plays nicely with the Rails asset pipeline were basically either webpack or Babel. Webpack seemed like overkill for a lightweight application like this, though, and since I’m using Rails 5, a lot of the resources on the web for using Babel with Rails are out of date. Thanks to this excellent tutorial from 9elements, I was able to get Babel configured with Rails 5 and have a fully-functioning asset pipeline to deliver my CSS and JavaScript files.


You can see the new, improved, Javascripted version of FlatCollab in all its single-page glory at https://flat-collab.herokuapp.com/.