Abstraction in Cordova

Question

Recently, I have been coding in Cordova a lot for the company I work for. For those of you who don't know, Cordova is a cross platform development tool for mobile applications which is web based. Essentially you can use your HTML/JS/CSS to make Android and iOS applications. However, I come from a heavy OOP background and in the past have made Android applications using Java in Android studio.

Wherever possible, it is my instinct to separate code out, separate java/javascript files to cover different groups of functions. Trying to maintain readability. However, because of how Cordova works, I wonder about best practice coding. In particular, how to handle HTML. In an app, it is standard practice to have many separate pages, in which events happen. You have your home, your settings, your different interaction pages.

Here is where my problem lies. As far as application performance, it seems like having one HTML page would be best. Put in all my .js files in script tags, and have each "page" of the app just be a div that is "display:none" until it is needed. This approach means that the app only has to load resources once, and is therefore faster, however, it just feels dirty to me.

The downside of this approach is that you have to change display states of every page constantly, not to mention you soon have an HTML page that is nine miles long. It makes it harder for future coders to read.

So, in this case, what is best practice? Do I take the higher performance, but low readability option? Or do I separate out the pages and reload resources? Is there maybe a third option that I haven't considered? Any opinion would be appreciated.

Answer 1

Separate the concerns of readable code files and application files made to perform better.

You can separate your working code from the actual files used in your app. Manage all your html code in separate files if you want and then have a build that puts them all together on one large html file that gives you the performance you want. Conceptually the same as several code files and compiling them into a single executable. I haven't looked into it, but I'm sure someone has built a tool to do this.

Minimizing .js files is a similar idea, but it just removes much of the what space out of the code file you work with and creates a matching file that performs better.