I have a single-page web app (actually, its PhoneGap).
It has a lot of different 'pages' or screens - about 30 now.
The issue is if each page has loaded some content (complex element lists, sometimes hundreds of items long), the app starts to bog down and become very slow, as all the html is present, even if hidden.
I was thinking that if between pages changes i store the HTML for the content in a variable, to be called and put back in the DOM when a user wants to go back to that page, will this make other pages faster than leaving everything in the DOM? So basically I only have 1 full page in the html at a time.
Just wanted to ask before i spent time doing it! any other links for fast web apps would be appreciated too
You may need to remove the useless DOMs to release the memory.
Actually, when you realize your page (or App) is going slower and slower, you should pay attention on the memory.
Remove all useless DOMs would be a smart choice on your case. Next time, you need to show it again, you can re-initialize it.
Sometimes, you may also need to remove useless js objects, unbind events, etc.
I'm creating a SPA which of course uses AJAX to dynamically load pages in a div. My layout is a side accordion menu where when you click on an item, it loads information on a div next to it. My problem is that if a person decides to click menu items as fast as they can per second, I start getting blank content in my pages. So my question is, what are some best practices (if any) to avoid pages breaking when you have people clicking so fast?
Things I'm doing for performance:
Using html templates and json files to build pages before application starts, keeping the (simple) pages in memory to grab - instead of calling ajax every click
For now, on each click I'm using at clearTimeout and setTimeout set to some milliseconds to slow down the process of switching pages - not ideal
Unfortunately, I can't post code because it's too long, but I'm hoping I can get some help with this information.
Thanks guys!
**Note: This is only front-end work, no databases because the load isn't heavy.
EDIT:
Here is a little snippet of my setTimeout and clearTimeout:
if (clickTimeout) { clearTimeout(clickTimeout); }
clickTimeout = setTimeout(function()
{
clickLink(menuItem.attr('href'));
}, 500);
I usually just disable the UI element that caused the event before sending the ajax, and then the client side code re-enables it after the data has arrived. This of course can only be done if you have code that runs when the data arrives. You might also be making mistakes when updating the DOM with the data if that is how you display it. Sometimes blank DIVs only appear after a while.
I think the title of the question is wrong and should be more along the lines of effectively repeatedly updating the DOM with data without breaking the page.
CKEDITOR is giving me some hard time with the first load, i use:
CKEDITOR.inline
on the first load it takes about 2 seconds to load, on these two seconds if the user edit the div's content, when the CKEDITOR finally loads it restores it to before the edit :\ is there a way to fix it or maybe read-only the text untill the CKEDITOR loads? Right now i use opacity0 untill ckeditor is ready but it is a cheap hack and doesnt look good.
on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesnt happen when it appears perfectly above the div being eddited.
I cant figure out how on the ckeditor inline demo they did it perfectly.
The question is a little too vague to really grasp any single underlying question. I would post this as a comment, but it is too long, so I'll just go ahead and add as answer. What do you mean by preloading the editor? Do you want to stop the user from editing content or do you want to load the editor before loading the HTML body content? Both are basically the same as "use opacity0 until ckeditor is ready but it is a cheap hack and doesn't look good.", what is the difference?
I wasn't talking about server performance in my comment, I was talking about client performance. There are many, many things you could try
Build a prettier fake preloader; for example mask the site with an overlay until CKE is ready
Defer DOM creation until CKEDITOR.instanceready or whatever event is usable for you. By this I mean you can just create a pretty loading animation and get the actual editable content with JS, this will look like a preloader too
Enable content editable only in document.ready or in some other later event, that might help
Monitor the network, see how long CKE requests load and if that is acceptable for you
Check that you are not using the source version of CKE
Check that caching works as expected
Minimize the load by removing any and all plugins you don't need
All of that is just for question number 1. As for "on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesn't happen when it appears perfectly above the div being edited.", could we get a sample or how to reproduce this or a URL where this happens or even a screenshot? Based on that it is very hard to reproduce.
How did google+ implement their infinite scrolling (https://plus.google.com/105354532715798223299/posts/gLnVUU7Y8DL) ?
example page: https://plus.google.com/photos/104987932455782713675/albums/posts
I'm wondering what's the event that trigger the ajax load that they use?
Did they fire a check on window.onscroll and check the pageYOffset to be of a certain value before triggering the ajax load? (because somehow this feels like a rather dirty solution to me)
Basically I'm wondering what's the trick usually used, and what other tricks can we use to mimick this behavior?
That's called lazy loading and I'm guessing there are numerous tricks behind it - scroll, visibility of elements in the viewport, and who knows what else.
I would suggest having a look at source of the many lazy load plugins (and tutorials) out there. That should give you a better idea of how it's done.
It can be a really annoying feature if content doesn't load until it's scrolled into view. If pages are that large, other strategies should be considered such as summaries with thumbnails that link to full articles (e.g. Google news), reducing the size of the page (nearly any news site), or letting users select how many entries are on a page (e.g. Stackoverflow).
For jQuery, there is the plugin "jquery-appear" http://code.google.com/p/jquery-appear/
From the description:
Mimics a custom "appear" event, which fires when an element scrolls into view or otherwise becomes visible to the user.
$('#foo').appear(function() {
$(this).text('Hello world');
});
This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.
Check the examples http://code.google.com/p/jquery-appear/wiki/Examples
I run into a common problem when trying to do AJAX development. Where possible, I like to try and just update data in an existing layout, and not the layout itself. For example, take the div below:
<div id="content-5">Here is some content</div>
I would get the updated value for content-5 from the server and just replace the contents of content-5 with the value. This makes a lot of sense for simple data replacements where the value is always going to be displayed in its pure form.
Sometimes the content is more complicated, and I have to actually get more than just raw data... maybe there is some logic to determine how a value is displayed and perhaps the style needs to be different depending on the data inside. In that case, I generally produce the HTML on the server side and inject the HTML into the element instead of just raw data.
Example: A status field from the controller comes back as "complete", but from the design doc, "complete" is supposed to show the user the text "Available" and it needs to be styled in a way different from other statuses.
Doing this in Javascript would require some in-depth view knowledge that the template layer probably already handles. The end result would be the same (code snippet below), but the difference is that there could possibly be some code duplication and a far more complicated Javascript layer.
<div id="content-5"><span class="success">Available</span></div>
Without fail, the requirement comes up that the system will need to handle "new" contents as well. The easiest solution to implement is to just get all of the content's at the same time so that I do not need to handle the extra complexity of injecting a new element instead of just replacing existing content.
So, I create a new template, wrap the contents in another element with an ID, and bulk replace all of the content divs at the same time any time there is a change.
<div id="allContent">
<div id="content-1">Some content A</div>
<div id="content-2">Some content B</div>
<div id="content-3">Some content C</div>
<div id="content-4">Some content D</div>
<div id="content-5">Some content E</div>
</div>
At some point, I have to wonder: Where is the line? At some point it feels like I'll eventually just be replacing the whole page with an AJAX request. Would this really be a problem?
I realize this may be pretty subjective, but what are some good strategies for determining to which level you should be replacing content with AJAX? Replacing just the data seems to be my preferred method when possible as it makes the AJAX controllers very simple. Replacing larger chunks of HTML from a template seems to be the easiest for handling more complicating layout and design issues and also feels like it could be more easily maintained. Are there other options I have not considered?
I expect there will be some discussion about manipulating the DOM programatically, but I personally really dislike this. The code ends up looking pretty horrible and really starts to integrate too much layout and design into the JS layer for my liking. Since I generally work with template libraries of some sort (whether raw PHP, PHP templates like Smarty or JSP in Java) it seems to make more sense to leave as much visual design there as possible.
EDIT
Based on the first few answers, it seems like this is being read as trying to keep the user on the same page but navigating around around the site or otherwise changing the page in a radical way with each update. The question is more about how to determine where the layout work for AJAX calls should happen and whether or not it is an acceptable practice to change large chunks of code with an AJAX request, knowing that replacement code may look nearly identical to what had been there before.
I think the most important requirement is the refresh requirement. If after several AJAX updates I hit refresh, the page I was just looking at should be the page that arrives. If the page reverts to a previous state for any reason then the URL is wrong. If for any reason your AJAX data is going to make the URL in the browser invalid then you should not be using AJAX to fetch that data.
There are exceptions, of course for data the is even newer than the last AJAX request. But that's obviously not what I'm talking about. A live chat screen could receive an update between the last AJAX request and the refresh. No big deal. I'm talking about the logical content and the URL describing it should always be in sync.
Complete personal opinion ex nihil, my rule of thumb is to change no more than 1 "panel" unit or 33% of the page whichever is less.
The basis for this is that the user should be able to clearly recognise the previous page state is related to the new state - how would you feel if you were suddenly teleported into the building to your right? Be gentle with your poor user.
There are also serious technical questions about the benefits of moving and inserting basically a page worth of data, which I think is a bit of an AJAX anti-pattern. What benefit does AJAX provide if you're going to do that?
Your specific question seems dependant on the supposition that the response coming back from your AJAX request isn't "just" data. This feels wrong to me from a separation of concerns point of view: I would expect a page to have all the layout information it requires already, the AJAX response itself to provide nothing more than dumb data/markup, and the JS event handler which created the request to sew the two together, MVC style. In that respect I think, yes, you're doing too much.
(by panel, I mean one logical design element - a menu, a ribbon, an item metadata panel, etc..)
edit: now that I think about it, I think SO's user profile page breaks my rule of thumb with those tab clicks
Depending on whether you want people to be able to to link to / bookmark etc the current page, you might want to navigate the user's browser.
This isn't a concern for some apps like GMail etc, and they won't ever refresh the page.
For myself, I tend to think it's a good practice to navigate the browser when navigating to a logically different place. eg. a person's profile vs. a list of their messages.
Sorry if this is vague, it's rather subjective :-)
A good guideline for something like this is to ask yourself, "Is this dynamic application 'content', or is it content-content?" Your use case sounds like application content that will change with each user. This is probably the best place for Ajax, but with everything, it's always nice not to just have one hammer. You don't want to do too much on one page. For instance, if one part breaks, the entire thing might, thereby frustrating the user.
Anywhere you're looking at actual page content or anything where the information is static, I strongly suggest avoiding the use of JavaScript, as it runs the risk of being invisible to search engines. Make sure anything linking to information like this is crawlable. The first step towards this is dynamic generation on the server side rather than browser side.
If you're using Smarty templates to produce a page, just fragment a template into various meaningful sections - news.tpl, email.tpl, weather.tpl - and have a master.tpl producing the structure of the page and calling child templates.
Then, if you're for example using an AJAX call triggered by a timeout to refresh the news, you can just call the server, cram the necessary data into news.tpl, and return the results into the news div you set up with master.tpl. This way your news layout is always following the pattern of news.tpl. (If you used JavaScript to manipulate formatting bits or set up event handling on document load, you'll need to attach that post-processing to fire after the AJAX call.)
You haven't really gotten specific about the types of things you're trying to replace here, and my initial reaction is that, if a single event is triggering multiple sections of the page to update at once, that's a sign that maybe you should be coallating those sections into a single display.
How much formatting gets done on the server end versus how much gets done on the client end with JavaScript? I'd say server-side formatting if possible, that way you have code that reflects discussions you've made about display layout and logic. Client-side formatting can be used for more interface-based issues - sorting rows in a table and alternating row colors with :odd and :even selectors, showing and hiding divs to create a "tabbed display" without hitting the server since the data won't change just from selecting a new tab, that sort of thing.
Finally, AJAX is one-way. If your web page is a view on a database, this isn't as much of a problem, but using AJAX manipulation to take the place of normal navigation is a terrible idea.
If you were habitually replacing the entire contents of a page using AJAX calls, I would agree that you have a problem. However, it appears to me that you are attempting to carefully think through the implications of your design and attempting, where possible, to avoid what annakata has called this "AJAX anti-pattern."
My rule is a bit simpler: as long as a substantial amount of context (e.g. menu on the left, header, various controls, page title, etc.) remains on a page, I am Ok with replacing almost anything with an AJAX call. That being said, I've never struggled with a page that has as much AJAX-generated code as you are.
I do have one question though: isn't it possible to encode state so that you can just replace some of the Divs in your example rather than all of them? If not, have you thought about doing so?