eaguy — 2013-11-18T07:50:24-05:00 — #1
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:
[TABLE="class: grid, width: 1000, align: center"]
[TH]Single Page Layout[/TH]
- 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.
- 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)
[TH]Multi Page Layout[/TH]
- 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
- Need to load common html for every page request instead of just once
[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]
Thank you very much in advance for opinions and experiences.
sg707 — 2013-11-18T13:31:25-05:00 — #2
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.
- 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.
wwb_99 — 2013-11-18T13:41:07-05:00 — #3
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.
eaguy — 2013-11-19T04:05:06-05:00 — #4
Thank you for your input so far.
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.
sg707 — 2013-11-19T11:39:09-05:00 — #5