5

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.

Community
  • 1
psr
  • 12,846
  • 5
  • 39
  • 67
  • 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 05 '11 at 07:22
  • I'll take a look. – psr Aug 05 '11 at 16:36
  • Great question. I also would ask it. Two other libraries that may be of interest are knockout.js [ http://www.knockoutjs.com ] and backbone [ http://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 [ http://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 05:37

1 Answers1

3

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.

k rey
  • 571
  • 3
  • 9
  • 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