Hello, I’ve been thinking about how to develop a new web based app using AJAX, and after surfing the net looking for advice I’ve found information is a little sparse.
I would like to pick the communities brains, for a sophisticated web based application, is a single page, multi-page or hybrid* structure more efficient? The overall goal is maximum performance and minimum maintenance.
Hybrid structure being a single page application which uses URL anchors as synthetic pages enabling more in build browser navigation and preference functionality.
For this particular project:
SEO is not important
Non-Visual Accessibility is not important - The app is visualisation of data
Browser compatibility in browsers that do not support SVG is not important.
Here are the advantages and disadvantages as I see them as of this time (I’m sure I’ve missed a few things!), I would love the communities input and experiences around the issue:
HTML can be easily left in a steady state, that is, because the page doesn’t need to refresh, interactivity added to something such as a table will not be removed, and subsequently the javascript responsible for adding that interactivity does not need to be re-run to add the interactivity again.
Content can be displayed instantly by using simple CSS functions to hide unwanted content, and show wanted content. All content is always ready for viewing, just most of it is hidden and sometimes being processed in the background.
No need to use the JavaScript global.localStorage function, eliminating some scope for browser compatibility issues.
[/TD]
[TD]
Could grow to be a page of inpractical size, but with higher bandwidths the norm, this seems to be becoming less relevant.
Could grow a large number of event listeners
Need to write functions to enable browsers to use forward-back button - more work plus bigger scope for bugs and browser compatability issues.
Can’t save particular page/view in browser favourites (As a bookmark)
Not sure about the Big-O of browser and JavaScript internals, a double in stuff to process might mean more than double the time to process it. I expect it varies drastically between browsers.
Can use in-built browser features for navigation (forwards, backwards, bookmark page etc)
Only need to load HTML for the page if the user clicks on it to view it
Fewer javascript event listeners
[/COLOR][/TD]
[TD]
Relies on the global.localStorage function in JavaScript to avoid re-loading and running all the javascript every page, which leaves scope for browser compatability problems.
Need to load common html for every page request instead of just once
HTML can’t be left in a steady state, that is if javascript enriches a table with interactive features for example, if the page is reloaded, the interactivity is gone and the javascript function has to run again to restore the same interactivity as before.
[/TD]
[/TR]
[TR]
[TH]Hybrid Page Layout[/TH]
[TD]Same as Single Page Layout - Plus “can use in-built browser features for navigation (forwards, backwards, bookmark page etc)”[/TD]
[TD]Same as Single Page Layout - Minus “Can’t save particular page/view in browser favourites (As a bookmark)”[/TD]
[/TR]
[/TABLE]
Thank you very much in advance for opinions and experiences.
I’m a big fant of single page app and that’s why I don’t agree with your disadvantage
Could grow to be a page of inpractical size, but with higher bandwidths the norm, this seems to be becoming less relevant.
Yes, this is possible but it can be possible with hybrid/multiple pages. This isn’t just single page app issue.
Could grow a large number of event listeners
Yes, but this could be a good. If you designed it right to then bubbling up/down an mouse event can be a great thing. For example, resizing an element that also contains other element can be resized or show in different layout.
Need to write functions to enable browsers to use forward-back button - more work plus bigger scope for bugs and browser compatability issues.
Yes, but once you know the trick then it’s just matter of doing it.
Can’t save particular page/view in browser favourites (As a bookmark)
Not true. You can do a bookmark using a similar trick for implementing back/forward. By all means, it’s not easy but once you know then you’ll know how.
Not sure about the Big-O of browser and JavaScript internals, a double in stuff to process might mean more than double the time to process it. I expect it varies drastically between browsers.
I’m not sure what you mean here.
Certainly, making 1 page app vs many page app is it’ll take longer to create it. By all means…I’m not a super JS developer and I’m definitely going to use JS framework that allows single page app like YUI or ExtJS. In the future, there will be only single page app.
For the back button / linkability – most of the better SPA toolkits speak to that issue and do a very good job of handling it. YUI and ExtJs are a bit old for this sort of thing, you’ll want to look at the angular / backbone styles of frameworks.
sg707, forgive me if you already know how Big-O works but in case you don’t, and for those who don’t:
Big-O is essentially a measurement for the growth of processing operations (or sometimes time) required to complete a task on a data set as it grows. For instance say algorithm A has a Big O of O(n), that means if the algorithm takes 10 seconds to complete a task on a list which is 10 elements in size, then it will take 20 seconds to complete a task on a list which is 20 elements in size. If algorithm B is used and it has a Big O of O(n^2) then if the task on a 10 element list takes 100 seconds, the task on a 20 element list will take 400 seconds.
I see what you mean. To reply to that, I don’t think it applies to disadvantage of the Singe Page App. Common way I’ve notice the browser to slow down is when there are crap load of HTML. For example, imagine a table w/ 100,000 rows. Scrolling down is a pain and it may even crash your browser. In this case, you should utilize table paging for single page app and even for multi page app. Just because it’s single page app, does not mean it’ll create big HTML. Single page app by nature is dynamic so the developer should be responsible for how much or remove the HTML. In the near future…I’ve read that Javascript will support multi-processing so it should improve the performance if used correctly.
