Hello Everybody,
We are working on a page with multiple tabs which has all static information like labels and textboxes to retrieve registration information. We use Jquery UI Tabs so we have all the tab details as Divs in the same page. My colleague feels that it is difficult to manage the page since it has close to 800 lines of html code. Will it be a performance issue if we split the page into multiple html files and feed the tabs using AJAX?
Thanks in Advance.
Regards, Raja
It is absolutely religious question. If your Development Environment does not support bookmarks or something, create multiple files and combine them before uploading with some simple script.
Using AJAX is justified when only the first page will be used, and others are optional.
What are you using on the server-side? PHP? Ruby on Rails? Groovy? Java+JSP's?
If you are, it's probably to split the pages up into different pages. But instead of loading them via AJAX, include them into the main page. Performance shouldn't be an issue.
It could help performance if you have only the initial tab html in the main page. Then use AJAX to pull in the other tabs after the main page loads.
The initial page download is smaller, and the other tabs load when you user already has something to see.
I wouldn't necessarily call it a performance issue. In fact, you might notice that the initial page load gets marginally quicker. Depending on the performance of the connection between the client and your server, those tabs may take a while longer to load.
If I were you, I'd be more concnerned about what impact introducing AJAX into your application would have (specifically search engine indexing, if that's something that is important to you). The content loaded through AJAX won't be index-able, you'll have to figure out how to gracefully handle tab load times, etc.
What's the normal usage of the page?
If it would be common for the user to access all the pages in one go, then loading all at one would be faster (due to the fewer number of requests). It also has the benefit of being more accessible friendly: to humans and robots.
However, if most users would only see a read/use a small portion of the content, then using AJAX would be more efficient.
Another thing to ask, from the usability side, is: does everything have to be in one page? can you break it up into multiple smaller pages? Can you omit optional fields and ask them later when they're needed?
If you're using a server-side language, you should be able to break your page into smaller files via includes (or a similar feature).
By careful consideration of #2, you will get good initial performance combined with the ability to use AJAX.
Breaking up your main page into separate functional sections is reasonable, if the page is getting so long that it's hard to maintain. Use server-side includes for this. Note this dovetails in perfectly with #2! How you go about breaking up your code is up to you.
In all cases, try to write reusable components that handle things without lots of repetition of the same code. Use an additional layer of indirection where it makes sense (it doesn't always).
When it comes to avoiding repetition, not just code but html is also a candidate. If there is some arbitrary structure that is the same around multiple instances of similar elements, perhaps you could move this into a function instead of being embedded over and over again. It might help to stop thinking of the web page as a document and more like an XML data stream that you are writing a program to output. You want to make that program as simple, elegant, maintainable, and sensible as possible.
The next time that you decide to change some repeated html element in your web page, you will thank yourself for having moved the code into a function where you only have to change it in one place.
Practice over time at this style of coding will increase your skill and make it even easier and more automatic next time to write your code this way.
Personally I would use progressive enhancement. First, split each tab into a separate page to start with. Each page shows the row of tabs and each tab links to the appropriate page.
Then use ubobtrusive Javascript to add onclick methods to each tab that instead of loading a whole new page, just loads the content in the tab via AJAX.
You would probably need to call the page with a parameter saying whether you're using AJAX or not - if not, the page with its design is returned. If you are using AJAX, it would return just the code for the tab.