Simplest technique to develop  multi-threaded apps with UI update
Tags: threads, apps, sockets, uiux
Published: 2018-11-15 08:52:20

---
title: Simplest technique to develop  multi-threaded apps with UI update
published: true
description: Whereas simple apps without thread operations can be developed easily for iOS/Android systems (or desktops), things can get murky when threads get involved. So how to deal with it?
tags: threads, apps, sockets, ui/ux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nos4i3wia9qaio3u15qb.png
---

<h2>Introduction</h2>

<p>Whereas simple apps without thread operations can be developed easily for iOS/Android systems (or desktops), things can get murky when threads get involved. So how do we deal with it?</p>

<h2>Background</h2>

<p>Most of the apps that I need to work on has to deal with multiple threads and over the years I have learnt some simple techniques (simple when you have learnt through your mistakes) and would like to share some of these for App development.</p>

<p>Say I am receiving some instant notification messages from server through sockets and I need to show these in a UI Page.</p>

<p>Since the notifications are coming through sockets, it most likely would happen in background threads. Very often more&nbsp;than one thread would be created while we receive data through sockets.</p>

<p>Most beginners run into the problem of updating the GUI and saving the data in the notifications that they receive which takes the app to a very unstable state.</p>

<p>So here are three key things to keep in mind while having a go at the problem:</p>

<ol>
	<li>
	<p>Read/Fetch/Receive data in background to ensure the app doesn&#39;t hang/wait/freeze for incoming data. Socket notifications usually come through background threads anyway.</p>
	</li>
	<li>
	<p>Write/Store data in foreground thread in short bursts. Usually posting a request to the UI/Main thread of apps to run storing operations automatically takes care of thread synchronization. Incase of expensive operations use a Queuing service.</p>
	</li>
	<li>
	<p>Reflect changes in gui in main/ui thread.</p>
	</li>
</ol>

<p>Usually if we don&#39;t have to store too much info or update too many models we can simply post a request to the system to run the next set of operations in the main/UI thread once we receive data in background thread.</p>

<p>In our case if we receive server notification messages in&nbsp;onMessage event,&nbsp;inside the event handler we can use codes such as (depending on android/ios):</p>

<pre>
    runOnUIThread/dispatch_get_main() 
</pre>

<p>to update Model/DB as well as the UI</p>

<p>example pseudo code:</p>

<pre>
void onNewMessage(message){

    runOnUIThread-&gt;{ // this usually takes care of the thread syncronization
        db.insertNewMessage(message);
        updateAllViews();
    }
}
</pre>

<p>Now if you feel the db/model operations can get expensive,&nbsp;you can implement a Queue service in background inorder&nbsp;to insert/update frequently incoming messages in DB/models.&nbsp; A&nbsp;message fetching service from the Queue needs to be implemented in the foreground to update the GUI accordingly . To keep things simple you can use event notifications (along with relevant info) from the Queuing service requesting&nbsp;the Main Thread to update the GUI.</p>

<p>The pseudo code example will look like the following in that case :</p>

<pre>
void onNewMessage(message){

    QService.insert(message);
    
}

QService.onFinishProcessingMessage(message){
    // the UI page/element might register as an observer into the event service
    EventService.notifyObservers(&quot;event_message_processed&quot;, message); 

}

uiPage.on(&quot;event_message_processed&quot;, function(message){

     // most likely the event notification would come in a background thread,
     // so invoke running in main thread for GUI operations/update
    runOnUIThread-&gt;{
        updateUI();
    }

});

</pre>

<p>Happy Coding!</p>

<h2>History</h2>

<p>Article uploaded : 15th Nov, 2018</p>