How we improve our user interface

End of march we made a customer and user survey and we also blogged about the lessons from our customer survey. We had a lot of internal discussions how to proceed with the user interface and decided to focus on these principles:

  1. Ship features and improvements often and regularly.
  2. Ship features and improvements fast.
  3. Keep the code clean.
  4. Do not implement features that increase the code complexity unncessarily.

This means that we will not do stuff like big redesigns, when it is not really urgent. Because it would block a lot of other features and we have nothing to ship for weeks and months. We also talked about moving to react and redux, but this is more like a developers dream, not a wise business decision.

Refactorings to ship faster

It was also time to make some refactorings to be able to ship faster in the future. The goal of this refactorings is to remove the state management from components to services, so that we can easily rearrange the user interface and adopt it to customer feedback. We are almost done and you can track the progress: https://trello.com/c/d9rMLLNk/86-refactor-ui

The state management is based on rxjs and will look like this class:

The state exposes an immutable snapshot and an observable to watch to changes. The dialog service is used to show notifications to the user when something has changed or failed.

We also evaluated redux and made a prototype, but have a look what we got:

We make 2 different api calls, for each call you need:

Furthermore

  • 1 state interface
  • 1 reducer
  • 1 effect for the notification for line 20
  • 1 selector for the event consumers
  • Code to set it up

Our code and state is not that complicated that we need all the stuff. Don’t misunderstand me: Redux is great, but not for all use cases.