UI for backend devs

Apr 19, 2015

I spent most of my career in various individual contributor / team lead roles building software systems. I love dealing with data, I worry about things like redundant servers, backups and failover scenarios.

But users need UI and they want it visually appealing. When Bootstrap came out I fell in love with it. No longer would my UI have grey background. I could add nice buttons and tables with a few CSS classes. Sure, it wasn’t a work of art but it was pretty good. Alas, the UX bar kept rising. Over the last few years I learned some interesting lessons. There are important questions you need to ask when building UI.

Internal only UI

Will it be used by only internal users? In such a case you could go for completely autogenerated UI with tools like RailsAdmin, ActiveAdmin or Administrate (fairly new but maturing fast). You are generally trading speed of development for ability to customize the look & feel. But at least you can edit data in the system.

Externally facing UI

Custom UI generated server side. Frameworks like Rails, Django or Symphony allow to generate UIs via command line tools. You can then tweak the HTML layout, write CSS and sprinkle in some JQuery. You can make it visually appealing, intuitive (with appropriate help tooltips) and fast. It has a lot to do with psychology of understanding your users and enabling them to do their job efficiently. You can pre-generate reports, cache data, etc.

Single Page Applications

These are the Ferraris of UI development. They are fast and beautiful. And they cost a lot to build and maintain. You are really building two separate applications. There is the UI written in JS (or CoffeeScript) and there is a backend API (often written in different language) to provide data. You are writing your business logic and validations in both server side models (to protect our data integrity) but also in JS models (to give user instanct feedback).

It’s also harder to test. You need to have backend test written in one framework, UI tests written in JS testing framework (like QUnit) and some kind of integration tests. And you can easily have a bug in JS where the requests will not even reach the server so there is nothing to check in the logs. There are services like Trackjs.com/ to help you log those errors.

UI technologies are also changing fast which is a good and challenging at the same time. Frameworks are maturing but some are going out of fashion. A few years ago Backbone and Knockout were hot but now it’s Angular, Ember and React. Which one do I pick? I’d hate to be the dev stuck maintaining something unsupported or an older version that is difficult to upgrade. Or you can jump with both feet into JS world and go Node.js or MEAN.IO.

On the other hand, great SPA UI can really set you apart from competition and get you customers. So you have really ask yourself tough questions on what you need and what you can afford when it comes to building UI. I hope that in a few years things will standardize but now we are still going through growing pains. And that’s how it should be, business needs will always push technical capabilities to their limit.