3

I'm using Phonegap to build an iPad app.

The app is supposed to be offline (aside of form submission), so it will have mostly static pages, so I'm going to have lots of HTML files, since I am not using JS MVC / Require JS to minimize the complexity. The more I see it, it's basically a static site wrapped in Phonegap to build an app.

Since I'm gonna have lots and lots of HTML files, it will be a pain to manage changes in (for example) header/footer if I'm not using any templating engine. So far, I'm using Codekit to compile Jade files to HTML, and it works out fine, I'm only using Jade for the layout/block/include feature and HTML compilation.

The one thing I don't quite like of using Jade is if your file has lots of nested HTML tags (for example a complicated form design marked up with Zurb Foundation/Twitter Bootstrap), then suddenly Jade isn't looking so clean anymore.

Somehow I think there has to be a better way to do it, though. Has any of you done a mostly static pages app with Phonegap? Any better suggestion?

Thanks

Henson
  • 5,563
  • 12
  • 46
  • 60

5 Answers5

8

you can use 1 file for all, save the data in sqlite or as variables in JS files. the code should be like this:

<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>

then you can create a function "navigate(page_id)" in the js file:

public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}

for sure you can use Jquery Mobile, but it will force you to use a pre-defined template, Personally i don't use it because writing my own template is much better and may give more options.

T.Baba
  • 649
  • 7
  • 17
  • 1
    It's a bit more complicated, since each "page" can have multiple sub-pages and perhaps each sub-page will have one or two other sub-subpage too. That's why I said, this supposedly app is very not app-like in the concept. I will use simple page refresh for the main navigation, but I think I will use jquery/ajax for some sub-page links. Thanks for the suggestion. – Henson Aug 21 '13 at 04:21
  • you can deal with the sub-pages in the same way, i have some applications with 30 pages, assign an id for each page and that's it ;) this is the simplest way. if you are going to create multiple files, you should take in consideration the load time for the files (html, css, JS ...) – T.Baba Aug 21 '13 at 05:40
  • so the end result will be one massive html file consisting of all pages with each page having different id? – Henson Aug 21 '13 at 07:37
  • basically yes, same as any html5 one-page website, dont worry that much about it, you can use the splash screen while loading your files and you can use some JS like AngularJS (http://viralpatel.net/blogs/angularjs-controller-tutorial/), there is some tips while writing an html5 application for mobile, use ids instead of class to target your html tags, simplify all the JS by removing all white spaces and break-lines, use small variables ("var mh" in stead of "Var Main_homepage")... – T.Baba Aug 21 '13 at 08:16
1

I use a very standard workflow that is catching huge popularity in web development - Grunt. Grunt does tasks very similar to how Codekit compiles jade, only that Grunt is very stable, has a huge community and supports jade by installing grunt-contrib-jade. It'd integrate with several templating engines.

Grunt might seem to have a learning curve in beginning, however it is a great alternative, open-source and free to use.

Grunt website: http://gruntjs.com/

Priya Ranjan Singh
  • 1,567
  • 1
  • 15
  • 29
  • Since I use Codekit, I'm not using Grunt, but I'll definitely use Grunt for the next projects since it looks to be the best practice nowadays. – Henson Aug 21 '13 at 04:18
1

I would suggest this framework. It's so easy to achieve page navigation, and you don't need to put all your pages into one file, that will make it very hard to read or maintain. This framework allows you separate any of your files(html, js, css) into very small ones so that each file is easy to read and maintain.

It also uses Ajax to get html(pages/partial views), so you can do what you like to with the html.

Our phonegap team have finished some projects based on this framework, and it's very successful. There are demos with source code on that site, which would help you setup your project. You can take a glance at the files structure through the source code.

I would NOT advise jQueryMobile as it's really a pain for phonegap apps. Here are some posts what explain why:

  1. How jQuery Mobile Eats PhoneGap Performance, See Experiment
  2. Who Is Murdering PhoneGap? It's jQuery Mobile
Leo Cai
  • 612
  • 1
  • 7
  • 13
  • I had to abandon jQuery Mobile because of slow rendering in a PhoneGap app on Android. jQuery Mobile is beautiful and has lots of nice widgets, but slow performance makes it a no go. – devdanke Jan 30 '15 at 12:37
0

I'm using JQuery mobile successfully. I use RazorEngine as a template service and them compile the files down to static html. Jquery Mobile has a nice paging engine that uses ajax to fetch the static html files and then show those on the page, along with a lot of other nice mobile specific features.

TWilly
  • 4,863
  • 3
  • 43
  • 73
  • I am not using jQuery Mobile because the design of the app is very not "app" like (no header/nav bar, etc), so I can't use jQuery Mobile. – Henson Aug 17 '13 at 13:55
0

In your post you mentioned you did not use an mvc framework. However I would advise you to look into backbone.js. Backbone is a technology that is often being used in combination with Phonegap. You could use Backbones views to organize your code.

Niels
  • 1,513
  • 3
  • 20
  • 29