Post navigation

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!