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!
Design questions for ajax application
Moderator: General Moderators
Design questions for ajax application
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.
Re: Design questions for ajax application
OK, here's what I have so far. The javascript for the index page.
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..
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.
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>Then, presumably, to load a page I can do something like this..
Code: Select all
loadFunction('template.html');
injectFunction(atp_currentPage);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.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: Design questions for ajax application
I would try to load as much as possible each connection.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.
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.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?
(#10850)
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: Design questions for ajax application
I would recommend creating objects to reduce the global namespace. You can create truly namespaced objects like: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?
Code: Select all
myObj = = (function($) {
var bar = "";
var foo = function() {
return bar;
};
return {
foo: foo,
};
})(jQuery);(#10850)
Re: Design questions for ajax application
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.
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.
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: Design questions for ajax application
Your code is not really coded like a Javascript programmer would code it. I would definitely learn to create objects.
(#10850)