The first secret of a good jQuery Mobile architecture is knowledge. If you don’t understand this, you are doomed to fail.
jQuery Mobile is notoriously difficult to implement correctly. Before you start coding make sure you have everything specified down. At least have wireframes of your project because page structure is most important architecture point.
There are two possible ways how a jQuery Mobile page skeleton can be created. As usual the truth lies somewhere in the middle. Both templates have good and bad sides, and we can play with them, especially if we know their bad sides and how they affect overall application functionality.
First and classic one is a multi-page template where one HTML holds all available pages. This is also a first template shown to new jQuery Mobile developers. It is also the easiest template to implement, of two available:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <div data-role="page" id="page2"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
As you can see, one HTML holds all available pages. While this may sound silly to a normal web developer, it is quite an excellent solution. This kind of template solution don’t suffer from page transition problems like template solution using several HTML pages (we will discuss it soon). Because jQuery Mobile uses Ajax for page loading delays should be expected, same delays that could cause problems with page transitions. As everything is already loaded into the DOM multipage template will no suffer this kind of problems.
On the other hand, this solution also holds one severe problem. Mobile web application can take a sizable part of the DOM and while this is not an issue for desktop browsers it can cause problems for mobile devices and its accompanying browsers. Also don’t forget that we are talking about the framework made for a mobile web applications.
Several pages may not feel that much but think what would happen if a web application has complex page structures (and I have seen jQuery Mobile pages holding several hundred form elements). What you see as a page HTML is not final HTML. As jQuery Mobile loads pages, it enhances them with its own CSS.
The final HTML structure can be 2-8 times larger than initial HTML, and everything is done dynamically. This leads us to this templates the second problem. More content means more processing power is used/need to enhance page content, and jQuery Mobile is one large hungry beast.
Multi HTML template
A second template solution is also called multi-HTML template. Unlike multipage template, this one uses several HTML pages for application skeleton. This solution should feel much closer to experienced web developers, and it can be easily used with server-side page generation.
This solution has a significant advantage over a multipage template. Only initial HTML is loaded into the DOM, which makes it a memory-friendly approach. Pages are loaded into the DOM only when directly accessed (or loaded through a caching system) and unloaded as soon as a page is not active anymore. From the practical side this is excellent, pages are readily available, not to mention shorter.
This may look like the best solution for a mobile web application, but there’s one big problem. Page transitions can become problematic because every HTML file needs to be loaded first before a transition can occur. This is more prominent when working with mobile devices, especially when using Android 2.X platform. A second problem comes from page unloading. Because pages are loaded/unloaded each time they are used pageinit event will trigger every single time page is active.
Best application creation approach
This part will talk only about pure vanilla jQuery Mobile approach.
Before creating an app think about it, what do you expect it to work and what would be the page flow. To create best-behaving application we need to combine both templates.
- Frequently used pages MUST be part of a first HTML file, this will prevent most transition problems
- Everything else should be moved to other HTML pages
- Subsequent HTML pages (every page that is not initialized first) can have ONLY 1 page, everything else is going to be discarded
- Frequently used pages, for example, pages used to show various content (like news articles) can also be created dynamically.
- Pages should not be complex. If possible split your content to several pages. If this is not possible don’t overuse jQuery Mobile widgets, they are the main reason for a slow application performance.
- Never use more than 20-30 listview elements per page. If this not possible then use some kind of pagination system and always remove previous elements.
- Dont use page transitions if you don’t need them
- Use delegated event binding and always prevent multiple event binding. Solution can be found HERE.
- Dont use CSS3 features for older Android and iOS platforms. CSS3 text shadow is a performance killer on Android 2.X platform, not to mention transition effects.