Previous post in HappyPancake story: Web development, the good parts.
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:
Pollercomponent, 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).
Navbarcomponent, 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.
be only one instance of
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
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
focusing on component reusability (e.g.
buttons). In parallel, Tomas was working with
like feature that
was recently introduced into the existing version of HPC1 across all
Next post in HappyPancake story: Feeds, Chat, Online list and CSS