Scalability in Hybrid Mobile Apps

Hybrid Mobile Apps = HTML 5 + CSS 3 + JavaScript. Hybrid Mobile Apps possible through Adobe PhoneGapIonic etc., Many articles available if you google about this!

Scalability is a big factor to consider while designing an Monile App, especially Hybrid Mobile Application. Many people suggests to go with Native app instead of Hybrid app, if SCALABILITY is a primary factor for your app. One point of time, i even agreed it and suggested my team to go with Native app development. Considering the facts, yeah for highly scalable apps, Native app is preferable solution!

In recent R&D i found that, we can achieve Scalability in Hybrid Mobile Apps too. We should pay more attention on the DOM size and this will lead to a highly scalable mobile app.

Let me explain my scenario –

As per requirement, we have to display list of items(Each item has more information). These items will be fetched dynamically from Server. If the number of items greater than 100, our app crashes since the DOM size for the 100 items is huge. Also, we are displaying all items at once which is causing the ***CRASH***.

Now we have started our R&D by examining the code. We tried  removing unnecessary HTML, CSS and JavaScript but in vain. Tried Document Fragments and Object Pools solutions still in vain. Object Pools has provided us better results, but not the scalable results 😦

We know the root cause for the crash is the heavy DOM. So we started building ItemStack. ItemStack holds the chunked item size which we predefine(We define it as 20 items). In our scenario, the logic is total number of items / 20. Ex: If we have 100 list items, then the ItemStack size is 5.

Now we applied Lazy Loading approach. Based on scroll position we append or prepend ItemStack row, thus minimising the  footprint of DOM. I know appending and prepending again lead to more DOM access, but still we achieved it with DOM fragments!

Finally, we have fixed the crash issue with the above approach!

Happy Hybrid Mobile App programming 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s