best practice phonegap architecture

Question

I'm trynig to work on a phonegap applicaion but I don't know realy how to build the architecture.

I try a kind of MVC model with a big js for a controller, a js file with ajax request to get infos from the server (model) .

For the views I use a main layout with a header and a head.

I update my content using load in JQuery.

I have some problems using this system for exemple the previous button close the application because I always using the same page. When I rotate my screen I come back to the first screen because the page is refresh.

I'd like to know if you have some solutions or some code sample to begin with good bases

Thanks

Answer 1

It depends how much do you want to change your current project.

In case you don't mind doing complete app revamp think about using Phonegap with jQuery Mobile + Backbone.js or Phonegap with Kendo UI. You already stated that jQuery is used for content loading so jump to jQuery Mobile is not going to be that problematic.

You can still use MVC doctrine with backbone.js and jQuery Mobile will handle page handling/transitions/UI. Only problem with this solution is possible performance issues in case you create too complex app. But this will happen to you no matter are you creating everything from the scratch or because you are using UI frameworks.

If you are willing to give it a try take a look at my other answers on related questions:

1. Frameworks and little something about them: https://stackoverflow.com/a/14166593/1848600
2. Phonegap + jQuery Mobile tutorials: https://stackoverflow.com/a/14375842/1848600

While Phonegap + jQuery Mobile is far from perfect combination it is still one of the best there is and it will save you a lot of time.

EDIT :

As you are using jQuery Mobile you can have a persistent header and footer if you use:

...data-position="fixed" data-id="footer"...

in both of them.

Here's my "how to" article on this question: https://stackoverflow.com/a/14417307/1848600

And here's a working example: http://jsfiddle.net/Gajotres/Beq4H/