Orchard and SPA (single page app) Approach

Topics: Administration, Customizing Orchard, Writing modules
Oct 21, 2012 at 11:41 AM

Is it possible to develop a so-called spa (single page app) as a module. We all know that javascript becomes more and more important nowadays. See for an example: http://johnpapa.aspnet45.cytanium.com/#/favorites.

Oct 21, 2012 at 11:53 AM
SciencApp wrote:

Is it possible to develop a so-called spa (single page app) as a module. We all know that javascript becomes more and more important nowadays. See for an example: http://johnpapa.aspnet45.cytanium.com/#/favorites.

The above SPA example is awesome by johnpapa

Oct 21, 2012 at 6:18 PM

I've been asking about it a while ago http://orchard.codeplex.com/discussions/348655. But is seems that It is quite hard to implement an optional support of the pushstate. The approach require quite a lot of efforts to implement it in ready done solution.

Oct 21, 2012 at 6:22 PM

@ikutsin: Not sure what this thread has got to do with the topic.

A SPA should be no different in Orchard with the new support for WebAPI that is in 1.6.

Oct 21, 2012 at 6:45 PM

IMHO, No matter you use WebApi or Partial action, you will come up with the problem to store the state of the blocks dynamically updated on the page and the browser history. And this will need a lot of testing/changes to support it. Furthermore, the module developers will always take care of the updates (at least there will be a set of additional api to support it).

Oct 21, 2012 at 6:53 PM

But this has nothing to do with Orchard, unless I'm missing something.

Oct 21, 2012 at 7:08 PM

Good question, looks like it is true, as long as you don't expect all links to be loaded partially out of box.

Anyway, I see only one useful use case for it - when you have some context, which should not reload during the navigation, typically it is playing the music.

I believe, it is possible to solve most of the problems in Theme, but it still need a lot off efforts and testing.

Oct 21, 2012 at 7:14 PM

What is the problem with themes exactly?

Oct 21, 2012 at 7:31 PM
Edited Oct 21, 2012 at 7:32 PM

I don't know :), I guess it depends on particular communication implementation on the client side.

Oct 21, 2012 at 9:37 PM

Bertrand, could you please develop a spa module (as papa's one) and present it to us. I think the whole orchard community is asking for it. 

Oct 21, 2012 at 9:57 PM

I'm sorry, no, I don't have time to develop whole modules just like that. I need to put food on the table. I also very much doubt that "the whole Orchard community is asking for it".

I did build something that I needed for my business a while ago, but that is rather uninteresting on the Orchard side:




I also wrote a post yesterday that is vaguely related: http://weblogs.asp.net/bleroy/archive/2012/10/20/writing-an-unthemed-view-while-still-using-orchard-shapes-and-helpers.aspx

Oct 21, 2012 at 10:22 PM

Then hopefully someone else want to do this and share his app.

Oct 21, 2012 at 11:17 PM
Edited Oct 21, 2012 at 11:18 PM

Oke, I see. You mean the usage of javascript in nutshell module? Yeh, oke. But that latest blog is not very clear to me. Maybe it's an idea to use a combination of code and images (output of the code). And when writing a module it's helpfull to think that maybe the majority of the people reading your blog are as intelligent as cavemen.

Oct 21, 2012 at 11:44 PM

Thanks for your advice.

Oct 22, 2012 at 1:00 PM

For what it is worth...

If I wanted to build an SPA I would not use a cms based on MVC.  I specifically like orchard because the SERVER is controlling things and the client is just showing output (content).  If I wanted to build a java script based site I would not use orchard.  

Oct 22, 2012 at 1:55 PM
Edited Oct 22, 2012 at 2:05 PM
Sciencapp wrote:

Then hopefully someone else want to do this and share his app.

Can you build it? 

FYI, it was kind of rude that you asked others here to build stuff for you. People here generally build things they want or need, they aren't being paid to field requests from individual users like you. Most people here have another day job, and work on Orchard for fun or as a side project. It is an open source project, if you need something done that isn't there, you can either build it yourself, or if you feel a piece of functionality is needed and that the whole community would want, you could propose it to the steering committee. I wouldn't go around asking people directly to build things for you. You could also pay someone to develop what you want.  

Oct 22, 2012 at 4:00 PM
Edited Oct 22, 2012 at 4:01 PM

Oke nice. I will try it myself. I know that controlling is the best part of orchard. I will probably weekly share my progress and also share my code. 

According to Bertrand I could easily do this (SPA):

  • MVC (I will start with the codegen output, so no Web Api)
  • Use RequireJs, JQuery, Knockout and other libraries 
  • Concerning Views I'll have to think about this one
Oct 22, 2012 at 4:15 PM
Edited Oct 22, 2012 at 6:08 PM

Yes, it is possible. We (my team) are doing modules which work as SPA on specific route. Orchard is used kind of like wrapper/host and when you go to specific route, JS renders content zone and communicate with controller to get/post JSONs. The advantage of this approach is that you still have CMS to manager pages; blogs etc., and SPA modules might be very interactive and have complex UI. It can be done even without WebAPI (although it would help). We are using: Orchard 1.5, ExtJS and SignalR in one project and it works pretty good. The only thing which I would wish for is integration between SignalR hubs and Orchard DI.

Oct 22, 2012 at 4:45 PM

Thanks gkumik. Can you supply me (us) with helpful links (e.g., in http://www.codeproject.com/ etc..). Would make my life easier. 

Oct 22, 2012 at 6:08 PM
Edited Oct 22, 2012 at 6:09 PM

I didn't see any article or post about this approach applied in Orchard but I will try to find time to create and publish sample module. Generally create two controllers, first (Themed) associated with view and route, second for REST/JSON operations. In view include JS which render UI and calls REST controller. That's all.