What are the best practices for organizing a jQuery Mobile app?

Question

I found an article that thwarts this. But my main question is: do I need a separate .html file for each screen? I think so, but I would like to get a unanimous vote. Also, does this also apply to individual JS files?

Edit: The JQM application is primarily for users and the administrator role.

Answer 1

We have a jQM site for production here, how we do things - and yes others may disagree, but we found that this works for a very large site.

• Use several separate HTML pages, the large multi-page template strikes the benefits of loading jQM ajax, since you load all your HTML at the beginning (if your site is not small)

• You definitely want to use ajax loading, jQM only pulls the code in your <div data-role="page"> BUT this complicates your JS below

• You do not need several JS files, but you need to load all your JS at the beginning, we will accomplish this by doing two things: 1. we put on listener in the document root directory and listen to the pageinit / pageshow events. Each time a page loads, they start, you also have a convenient link to the current page, and you can use attr on the page to determine which page it was on. 2 .. All JS have some type (I hope you use PHP, CF or something else) and put this on every page, so no matter which entry point the user views the site on your mobile phone, they get all downloaded code

The disadvantage is that all JSs are loaded initially, but they are no different, and if this is really a concern in RequireJS - plus, this makes debugging easy, since JS has everything we can easily use the debugger and breakpoint. If you load JS dynamically on each page, you are increasing the data that you need to return on each transition to the page, and you have ugliness because you are reloading redundant JS and it is difficult to debug dynamic JS.

 $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){ var pageType = $(this).data('pagetype'); //handle pageinit/pageshow (oEvent.type) for each pageType 

Answer 2

I think it is best to have a different html file for each screen. This will not only help in properly maintaining the application code and tracking changes, but also prevent the bulky dom, as pages will be added if necessary.
As for js, you can have separate js files during development and debugging, but I would advise you to remove them and minimize them before deploying the application and releasing it.

Answer 3

This is a very subjective topic, but also becoming a much more significant trend. Some people prefer single-page websites (mobile applications). The wiki article here does a great job of solving the problem that single page solutions solve.

In particular, in JQM, transitions from one page to another are much smoother when the data is on one page. This effect can also be achieved if you prefetch frequently used pages by adding the data-prefetch attribute to your link.

However, this may depend heavily on the size of your project. The jQuery Mobile documentation addresses some performance issues of large DOMs here .

Answer 4

Use several separate HTML pages. You do not need multiple JS files. Each page should be completely autonomous and able to stand alone. Minimize, combine and compress. Always use the global script configuration on each page. Phone Numbers, Cards, and Emails

 href="tel:+1[your telephone number here (numbers only)]" href="[standard link to google maps here]" href=mailto:[your email address] 

Confirm with jQuery validation Use ThemeRoller. Use switch groups instead of selected menus. Add Google Analytics Decide which navigation style to use. Do not start with the code.