Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm working on a major new version of a browser based application and I'm looking for comments/suggestions about the architecture/design.

It's a single page application using AJAX and client side templating to get new "pages". I'm already using the Sammy Javascript library to handle bookmarking and forward/back buttons. I'm using JQuery, parts of JQueryUI, SlickGrid, and a little Dojo (mostly dojox/rpc/jsonrpc and it's dependencies) so far.

I'm communicating with the server using JSON RPC calls through a very thin web server layer that just forward the JSON strings to the business server, which has an API accessible in various ways, but the browser uses JSON RPC only. Session state tracking happens in the business layer as part of the implementation of that API, though of course the RPC mechanism must give enough information to identify which session is calling it.

All that was context; the question I have is: does anybody know of any resources supporting this kind of design? In particular I would be looking for open source Javascript libraries besides Sammy that support single page web applications. Sammy expects you to use client side templating, and has some support for that plus several plugins for particular templating libraries, but doesn't support similar functionality for using AJAX to apply CSS style sheets (and remove or deactivate others) when you change screens and would have changed pages in a more traditional web application.

I'd also love to hear from anyone who has tried something similar. Were you okay with one stylesheet for the whole application? Did you have issues with memory leak issues from staying on one page for so long?

Also, any suggestions for a client side design? Does MVP sound reasonable, with a model implemented in Javascript, presenter classes to implement events in an abstract way that's easier to unit test, and the view to handle the actual DOM stuff? Some sort of application manager to track what pages are up, and that would clean up resources when a screen closes?

I haven't seen a lot of comprehensive references or libraries for the single page design, so anything people can tell me or refer me to would be appreciated.

Note that I have read Dev approaches to complex JavaScript UI's, which is a great question but not specific to single page complex Javascript UIs.

share|improve this question

closed as off-topic by GlenH7, MichaelT, Corbin March, Dan Pichelman, Kilian Foth Sep 12 '13 at 9:52

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions asking us to recommend a tool, library or favorite off-site resource are off-topic for Programmers as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it." – GlenH7, MichaelT, Corbin March, Dan Pichelman, Kilian Foth
If this question can be reworded to fit the rules in the help center, please edit the question.

    
I tripped over this question because I'm about to undertake the same sort of project. I've checked out Sammy/JQuery, but I think I'm going to start with SproutCore and see where it takes me. Have you considered SproutCore? –  brandx Aug 5 '11 at 7:22
    
I'll take a look. –  psr Aug 5 '11 at 16:36
    
Great question. I also would ask it. Two other libraries that may be of interest are knockout.js [ knockoutjs.com ] and backbone [ documentcloud.github.com/backbone ]. knockout has some good documentation and it applies the MVVM pattern, along with client side templating. I also suggest you follow all the hands on tutorials at [ learn.knockoutjs.com ], which also touch on creating a single page JavaScript app and binding events to AJAX requests. I found them very useful, still wrapping my mind around single page apps, also what about progressive enhancement? –  jamiebarrow Aug 22 '11 at 14:53
    
I've continued to look into all of this and will eventually answer this myself. For now, a keyword to look at is "javascript only" applications. Also, JavaScriptMVC is an alternative. As far as progressive enhancement, obviously this architecture fails completely if your browser can't support basic elements like javascript and AJAX. I'm really doing a desktop app in a browser so that and visibility to web crawlers are not big concerns for me. –  psr Aug 22 '11 at 16:47
    
If you keep saying "pages" when talking about the site, don't insist on it being an SPA. –  Erik Reppen Oct 17 '13 at 5:37

1 Answer 1

up vote 3 down vote accepted

Your approach is possible but have you considered the complexity with debugging and maintenance for a single page application?

A good alternative is the middle of the road approach via a portal design. Please take a look at dropthings from Omar Al Zabir. His portal is a single page application in the sense that everything appears to be rendered on one page. However, the source of each portlet is from a different page. This seperation greatly simplifies debugging and maintentance and provides the user with a single page style experience.

share|improve this answer
    
Yes, I have. Thanks, I liked the site. It really is one page on the client. I'm not sure it's any simpler to debug though - client side templating can be tested via pure java-script while debugging and running tests inside ASP.NET is more of a pain. It's also pretty easy to test a server that's just serving JSON requests - it's similar to testing/debugging a web service but maybe easier. The tricky part to test/debug is probably client state, memory leaks, etc., but both approaches are single page on the client so it seems like a tie there. –  psr Oct 11 '11 at 17:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.