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.
Related
I'm looking for a simple template engine that allows me to create snippets
for the header, footer etc.
Can anyone guide me on how to start here?
Many thanks!
I believe your referring to partials, there are countless libraries and frameworks that supply this functionality, here are just some of them...
EJS - This is now no longer maintained however it's functionality is still perfect as it comes, provides a simple partial engine and data visualisation.
Handlebars - Oh how so many frameworks use this library, fantastic bit of kit, however this has greater power than just simply loading other files.
AJAX - You can just load a basic HTML file via JQuery .load instead as per the documentation like this...
$( "#result" ).load( "ajax/test.html #container" );
Additionally any respected front-end framework will usually come packed with an engine to load partials with ease.
When you make your partials, be sure to prefix them with an underscore, this is good practice to allow other developers to recognize partials.
I am building a website where i'm looking to create html templates which contain placeholders where i'll be able to inject pages/content, menus, etc.... I really like AngularJS which has good support for this but am thinking that it might be a bit of an overkill for what i'm building. There is a chance some parts of the application will eventually be ripped out and run standalone and so dont want to tie the html/javascript to a library which requires so much framework specific syntax. Are there any other, simpler libraries, that will allow me to do this? thanks in advance
/Eric
KnockoutJS is pretty lightweight and also includes a templating feature.
I wouldn't just dismiss angularjs because it seems like a heavy framework. There are very simple ways to use it without using any of the "advanced" features like routing, creating services, creating directives, etc. You can simply have a controller and use the built in directives to do a lot of powerful things on a single page. Angular is also pretty small and is easily bootstrapped with the ng-app tag anywhere in your DOM.
My "Rails friends" have a situation when their UI designer is beginning his work on prototyping UI screens on his own - their Rails programmer is busy and is going to join this work later, probably much later.
I know, it is easy to ask UI designer the learn Rails rendering mechanism, so he could begin prototyping on Rails, but I am interested,
is it possible to setup views structure using partials (reusable pieces of HTML views) using just pure HTML, without any ruby code inside?
The only approach I see is to use SSI. Are there any other options?
What is needed is simply a possibility for one html-file could have a string like
<whatever include other.html ...>
which would include the contents of other.html inside its body.
This way, a future project can be divided logically on changeable/nonchangeable parts without any Ruby/Php code for partials.
UPDATE 1
The quoted wiki page about SSI has Client Side Includes section that suggests using object tag which seems to work
<object type="text/html" data="test.html"></object>
One suggestion is to use Sinatra, which is a simple and quick web framework for static sites.
It's easy to start using Sinatra even for a beginner. However, even if the UI man doesn't know and don't want to study any coding, he can still utilize it by planning the partial names and ask the developer to setup it for him. All he need to do later is to fill each blank templates and add JS CSS image assets.
Benefit of Sinatra:
Friendly to static sites
Simple to use
Lots of templating language to use, same as Rails
The partials/templates can be ported to Rails later with zero efforts!!!
I've been told I have to make a 100% HTML CSS Javascript site for a project at school. I'm used to the master pages of asp.net and I'm worried about how I'm going to do a huge website without the use of them.
After thinking about it for a while, I came up with what I think is an ok solution. Using iframes...
Would it be safe to make one page that has an iframe instead of a content area to connect to other pages to make it appear as if we used a master page?
It seems kind of hacked up so, is there a better way? Is there any software (hopefully free) that provides a decent system of master pages?
Thanks!
You could use a js-based template engine, such as jQuery templates.
You could just dreamweaver and use dreamweaver templates.
Template-Toolkit includes the ttree utility, which will do what you want. You can build the site from templates to get plain, static HTML documents. Since this takes place at build time, you do not need anything like ASP / PHP / Perl / etc on the server at runtime.
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.