Manage files with PhoneGap - Templating engine? - html

I'm developing a mobile application in HTML/CSS/JavaScript using PhoneGap.
The question I have is how to manage files in my project. It seems that the application runs faster if all the HTML is placed into one file. In my case, my application should contain several pages and I can't think dealing with a more-than-2000-lines index.html, repeating each time same code for different views.
I'm coming to you to know what solutions you've found to make something simple that a foreign developer could understand and work on easily.
I'm using jQuery Mobile Beta 1. I've heard about jQuery tmpl which appears to me as a good solution to clear the code and reuse HTML, but is there another trick?
Thank you for your answers. Hope this topic would be useful for someone else.

Phonegap are not support multipage app. But mustache for js https://github.com/janl/mustache.js could help with managing of multiple html files.

Related

Determine the UI library that a particular website is using

I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer

Using polymer.dart to build portable web components

I'd like to use polymer.dart to build a set of portable web components that can be embedded in any random html page (including pages outside of any dart project). The idea is that a customer could embed my polymer.dart elements on his html pages without the customer needing to create a dart application. I would think this would be an obvious and straightforward thing to do - but after going through many tutorials and instructional pages, and reading through lots of dart/polymer.dart documentation, I haven't found any explanation of how to go about this. Presumably the dart/polymer code would have to be compiled to javascript for inclusion on the customer's html page. Could someone comment on if this is possible, and if so, provide an explanation with examples of how to go about it? This dart/polymer.dart newbie would be grateful for any assistance.
I don't think this will work with Dart.
You need to run pub build over a Dart application to get a deployable result.
I guess this would work better with JavaScript Polymer elements.
There are plans to support this scenario but I guess it will still take a while.

How to Organize Phonegap HTML Files

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
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.
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/
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:
How jQuery Mobile Eats PhoneGap Performance, See Experiment
Who Is Murdering PhoneGap? It's jQuery Mobile
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.
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.

How-To support Internationalization of JQuery Mobile Offline Web App (i18n)?

I am looking for a general mechanism to internationalize web application that have to work in offline mode.
Initially I was considering adding data-i18n tags to elements but this seems like a very ugly solution.
I came across http://panacodalabs.github.com/The-M-Docs/#components_&_utilities/m_i18n however I do not wish (or can due to time constrains) port my application to that framework.
I need a HTML5 jQuery Mobile friendly solution to this issue, that works in offline mode.
It seems to me that this crucial component is missing on the HTML5 framework.
I wouldn't necessarily say this is a feature JQM should provide, because this is probably done best with some server side logic.
there would be two ways I can think of doing this:
1. have all your language translations in some standalone js files, which you would have to include in manifest file. check the datebox plugin to see how this could be done ( top right - options).
2. create a local database and store translations in the required languages there.
i think the first one should be easier to handle, but probably harder to setup/maintain. also, depending on the amount of translations, js files do become large...
Have you looked at the jQuery i18n plugin?
http://recursive-design.com/projects/jquery-i18n/
I'm currently using it with jQuery 1.7.1 and jQuery Mobile 1.1.0, and it works perfectly.

guide on how to kick start template based flash website?

I'm very new to flash and as3 design patterns. But I can read and write as3 quite ok, i've created small widgets with that. I've developed several web sites using php and also python.
Now for a educational cd-rom project i'm working on, i've basically designed all templates (A home page, a generic page with navigation and a sidebar - kind of like a wordpress blog). I have all the data for the cdrom on word files, which i intend to place on xml files.
My question is what is the best way to start a project like this? Can anyone guide me to a template or something that can be used for kickstarting this? kind of like a wordpress (without the admin)? Or am i on this all wrong? Can someone please help
The Gaia Framework may be useful to you for this project.