Ajaxify the whole Orchard site

Topics: Customizing Orchard, Writing modules
Developer
Aug 22, 2011 at 5:00 PM

Hi all!

My own little PHP framework (also MVC) had the capability to turn all links into AJAX ones. The method used was very simple: select all links with jQuery (except the one that have the "noAjax" class, are filelinks or outbound links) and attach a small code to their click event (an AJAX call that loaded the page whose url was in the link's href attribute; inject the response into the content div while displaying a loader animation; ajaxify the links of the newly loaded content).

I would like to implement this unobtrusive ability into an Orchard module. Currently I'm digging through the code of Orchard and various module to get hints what the best solution would be.

The easiest approach would be a pure JavaScript one, mostly as described above. All links on the page could be ajaxified to load their href into the content div. Unfortunately the problem of when content outside the content div (for example, an authentication widget) should be updated would quickly arise. What do you think?

Coordinator
Aug 22, 2011 at 7:21 PM

My thoughts, but feel free to disagree, is that this is not proper Ajax, and that if you ever get it to work it's going to be a maintenance nightmare for very little benefit. I think that Ajax calls should transfer data, not rendering, except on very specific, performance-intensive applications (and even then you need to design around that requirement).

Developer
Aug 22, 2011 at 8:25 PM

Could you please elaborate what would cause maintenance problems? Have you had any bad experiences with such a pattern or with transferring markup through AJAX calls?

The point of this would be to make the website a bit more responsive. After my own, of course not representative or in any way very exact measures the use of this technique can cut off 30 to 50% of the loading time of a page (I would guess this is mainly network latency, the complexity of the site's markup and JavaScript was not high enough to make any difference), even with client-side caching enabled. Server-side performance was also increased, but only negligible. Of course not all websites would benefit from this technique... And it can well be that it would make no sense to implement with Orchard.

P.S.: I forgot to write about the server-side part, which is not that simple :-): the idea would be that if the request was an AJAX one, not the full views, but only the partial ones should be returned and only logic associated with the partial view should run. I don't have the knowledge of Orchard to tell whether this would bring any significant performance increase.

Coordinator
Aug 22, 2011 at 8:31 PM

I prototyped, collaborated and wrote the book on the ASP.NET UpdatePanel, which does pretty much this, so I have had a lot of bad experience with that pattern, yes. I just don't believe an indiscriminate ajaxification is the right way to go. Ajax in my opinion should be deliberately applied where it makes sense. But if you want to go that route, knock yourself out ;)

Developer
Aug 23, 2011 at 9:47 PM

I see :-). You discouraged me enough to forget this idea for a time :-).

Coordinator
Aug 23, 2011 at 9:49 PM

Sorry about that :) I hope I didn't discourage you from writing Orchard modules though ;)

Developer
Aug 23, 2011 at 9:54 PM

Of course not! Today I wrote my first little widget as a practice: http://orchardproject.net/gallery/List/Modules/Orchard.Module.Piedone.Facebook.CommentsBox/1.0 (But I also hope this will also genuinely be of use for someones, as there was no module in the gallery before to implement the functionality.)

Coordinator
Aug 23, 2011 at 9:56 PM

Cool!