Ideal way of updating app's views when data changes [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Improve this question

Okay this is not platform specific question. But any answer related to iOS,Android or Windows Phone will help. So I am building a chat application (yes another one) but I am really confused about how you pros handle GUI update when a chat message arrives. I am not really concerned about performance issues but how devs update various part of app's GUI showing updated data.

For example Whatsapp has one master list where all the open chats are listed and then a separate chat display window(activity in case of Androids).

So when some message arrives, how do they update both views at the same time? Like if I am already chatting with someone and I receive a new message, the list gets updated as soon as the message arrives. I get this part but how is master list updated. Are they constructing whole of master view again after each and every single message? I just wanted to know the ideal mechanism to deal with this scenario.

Answer 1

Fundamental concept:
At a low(er) level, the UI element is subscribed to events coming from the data collection (array, list, dictionary, etc...) that holds the data that is changing. When the collection changes, it signals an event to the effect of "My data has changed" and subscribers to that event handle it accordingly. As you described in your example, that's when the visual representation of the message list is updated.

Concept in practice:
Most languages / frameworks provide for something called data binding. Instead of your manually having to subscribe the UI element to the events from the data collection, you bind the UI element to the data collection instead. The framework then handles the boilerplate code involved with signaling an event and updating the UI element.

---

The MVVM Pattern is a good place to start in understanding how data binding works in practice. Microsoft also provides additional specific guidance on the MVVM pattern.

Data binding is a fairly prevalent practice across a variety of platforms:

• iOS data binding approach
• AngularJS data binding
• Xamarin's implementation
• Android and MVVM for the MS crowd

Answer 2

Generally, UI code is based on redrawing at least an entire component from an underlying data structure that describes what it should contain (e.g., a list of strings and icons becomes a list view, a string for a text field, etc). Sometimes data structures cannot receive incremental updates (e.g., String in Java). Other times they can. It's case-by-case. Sometimes an otherwise usable built-in UI component doesn't support incremental updating of its underlying data structure, and a custom UI component must be written that does almost the same thing but supports incremental updating.

For a typical chat application, I'm pretty sure it won't be a performance problem if incremental updating is not used.