Reactive User Experience

Last week I focused on implementing some requirements related to reactive user experience. That is basically about things that make the users feel as if they were working with a native desktop/mobile application.

First, menu items in the web interface should highlight as soon as a user gets new information that he hasn't viewed yet (news items, alerts, chat messages). That's much like Facebook experience.

Implementing this relatively simple feature was hard in our previous iteration over the User Interface, since we had no notion of events and view life-cycle. Switching to components that communicate through events makes everything simpler in our current iteration.

It is currently implemented via 2 components:

Poller component, which runs on the client-side. While the user is logged-in, it publishes events about feed changes as soon as they are retrieved from the server (delivered via the long-polling, would probably switch to sockets.io later).
Navbar component, which renders status in HTML during server-side rendering (happens on first page load or in case where we don't have push-state) and then subscribes to feed change events on the client-side. Whenever status changes, CSS class of a DOM element is changed accordingly.

In case, when user has JavaScript and push-state enabled, there will be only one instance of navbar and poller running in his browser tab, no matter how many pages he visits.

Second, menu highlights should persist when you travel between the pages. There shouldn't be even flickering. This is solved by client-side rendering over Backbone.

Third, news feed and alerts feed should reactively display "You've got new messages" whenever there are new things to read. That is very similar to what Twitter does.

Once, I had the poller component, it was trivial to implement this feature. Feed views simply subscribe to poller events on rendering. Whenever there are new items - we show message box. Whenever a view is removed from the DOM, we detach all event listeners and avoid memory leaks.

After getting this simple reactivity straight, I started working on the chat. That's what I'll be working on this week.

Pieter and Tomas were working mainly on the Profile view, focusing on component reusability (e.g. like and flirt buttons). In parallel, Tomas was working with like feature that was recently introduced into the existing version of HPC1 across all the countries.

Published: September 29, 2014.

Next post in HappyPancake story: Feeds, Chat, Online list and CSS

🤗 Check out my newsletter! It is about building products with ChatGPT and LLMs: latest news, technical insights and my journey. Check out it out