Design questions for ajax application

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Design questions for ajax application

Post by s.dot »

I'm building a portable application that will have three interfaces working with the backend.. Web, desktop, and mobile.

This must be done completely in html and Javascript with ajax doing the dynamic bits.

A few questions.

For modular design, a page will end up having 10 to 20 ajax calls for each dynamic part. Is it best to do this many ajax calls, or.. Have a large ajax call that does it all and inject each part into the dom all at once (perhaps actually using xml)? Or should the php backend just generate the whole page needed at once and then inject the whole page? I'm a bit lost here.

I'm planning on doing a single page application where the content is injected into a main template when each "page" is loaded. These pages will have their own js and ajax calls. Can this be done.. Injecting js into the content and expecting it to run? Or, it is best to have a single minified js file containing every function for every page?

Anchor based navigation. I'm planning on using hash bang urls (it was specifically requested not to use html5 history api). Any tutorials for this so the page is loaded on regular navigation and cold loaded into the address bar?

Any tips welcome. This is my first foray into this kind of development. I'm excited. This is the future!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: Design questions for ajax application

Post by s.dot »

OK, here's what I have so far. The javascript for the index page.

Code: Select all

hi, i'm the index
<script type="text/javascript">

//gather page and query string, if available
var atp_hash = window.location.hash;
var atp_currentPage = atp_getCurrentPage();
var atp_params = atp_getParams();

//hash only has contents if more than the first 3 characters, "#!/"
function atp_hasHashContent()
{
	return atp_hash.length > 3;
}

//check to see if query string is present
function atp_hasQueryString()
{
	return atp_hash.indexOf('?') !== -1;
}

//get numerical position of query string offset
function atp_getQueryStringPosition()
{
	return atp_hash.indexOf('?');
}

//returns the current page needed to load
function atp_getCurrentPage()
{
	if (atp_hasHashContent())
	{
		return atp_hasQueryString()
			? atp_hash.substr(3, atp_getQueryStringPosition() - 3).replace('/', '_') + '.html'
			: atp_hash.substr(3).replace('/', '_') + '.html';
	}

	return 'index.html';
}

//if present, returns an object of k/v pairs from the query string
function atp_getParams()
{
	var atp_params = {};

	if (atp_hasHashContent() && atp_hasQueryString())
	{
		var atp_paramsParts = atp_hash.substr(atp_getQueryStringPosition() + 1).split('&');
		var atp_paramsPartsLength = atp_paramsParts.length;

		for (var atp_index = 0; atp_index < atp_paramsPartsLength; atp_index++)
		{
			if (atp_paramsParts[atp_index].indexOf('=') === -1)
			{
				atp_params[atp_paramsParts[atp_index]] = null;
			} else
			{
				var atp_paramsPartsKV = atp_paramsParts[atp_index].split('=');
				atp_params[atp_paramsPartsKV[0]] = atp_paramsPartsKV[1];
			}
		}
	}

	return atp_params;
}

console.dir(atp_currentPage);
console.dir(atp_params);

</script>
This will get me the current page based on hash value into a variable called "atp_currentPage".

Then, presumably, to load a page I can do something like this..

Code: Select all

loadFunction('template.html');
injectFunction(atp_currentPage);
A few questions (assume atp_currentPage is contact.html)

1. Should I load the template for contact.html and then use ajax to populate any dynamic content (assuming ajax injected into the dom would even run?). Or, should I pass the page name to a php script that grabs the template and builds it with dynamic content and then returns the whole completed page to be injected? If I did the latter option, I could have several php functions to build the page based on it being called from web, mobile web, app, or desktop app.

The rest of the questions are design related..

2. I tried to avoid polluting the global namespace with variable names.. but it's littered with function names. I know I can avoid that by wrapping my app in an object like.. var myApp = { .... } but I don't know how to do it. Any tips?

3. Did I refactor too much? I really didn't have to refactor at all but I didn't want to reuse any pieces of code and I want it to be really maintainable. Should I refactor more? That atp_getParams() function is messy. I'm trying to learn javascript best practices while building this.

Thanks, I'm learning as I'm going.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Design questions for ajax application

Post by Christopher »

s.dot wrote:For modular design, a page will end up having 10 to 20 ajax calls for each dynamic part. Is it best to do this many ajax calls, or.. Have a large ajax call that does it all and inject each part into the dom all at once (perhaps actually using xml)? Or should the php backend just generate the whole page needed at once and then inject the whole page? I'm a bit lost here.
I would try to load as much as possible each connection.
s.dot wrote:I'm planning on doing a single page application where the content is injected into a main template when each "page" is loaded. These pages will have their own js and ajax calls. Can this be done.. Injecting js into the content and expecting it to run? Or, it is best to have a single minified js file containing every function for every page?
The javascript will not run if you are loading it manually. You need to eval() the text you load. Libraries just as jQuery will do this automatically for you.
(#10850)
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Design questions for ajax application

Post by Christopher »

s.dot wrote:2. I tried to avoid polluting the global namespace with variable names.. but it's littered with function names. I know I can avoid that by wrapping my app in an object like.. var myApp = { .... } but I don't know how to do it. Any tips?
I would recommend creating objects to reduce the global namespace. You can create truly namespaced objects like:

Code: Select all

myObj =  = (function($) {
	var bar = "";

	var foo = function() {
		return bar;
		};

	return {
		foo: foo,
		};
})(jQuery);
However, that will make it very inconvenient to debug your code, so I would stay with standard Javascript object creation. As long as it is just you developing it, the extra protection is not needed. You can always convert it if necessary once the code is mature.
(#10850)
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: Design questions for ajax application

Post by s.dot »

Thank you.

How do you feel about the posted code in terms of design? Is it OK, or noob like? Granted it doesn't do much but I'm pretty new to js.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Design questions for ajax application

Post by Christopher »

Your code is not really coded like a Javascript programmer would code it. I would definitely learn to create objects.
(#10850)
Post Reply