Re: [play-framework] Best way to create Singe Page Applications with Play Framework

[Ω Alisson]

Knockout + pager.js

http://knockoutjs.com/

http://oscar.finnsson.nu/pagerjs/demo/

On Mon, Oct 15, 2012 at 10:46 AM, Johannes Go <goon...@googlemail.com> wrote:

What do you think is the best way to create a SPA with Play?
Using google closure templates?
Using the plovr module?
Defining a REST API?

Kind regards
Johannes

--
You received this message because you are subscribed to the Google Groups "play-framework" group.
To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/W1MdLYBvo3wJ.
To post to this group, send email to play-fr...@googlegroups.com.
To unsubscribe from this group, send email to play-framewor...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/play-framework?hl=en.

[Will Sargent]

On Mon, Oct 15, 2012 at 6:46 AM, Johannes Go <goon...@googlemail.com> wrote:
> What do you think is the best way to create a SPA with Play?
> Using google closure templates?
> Using the plovr module?
> Defining a REST API?

I think the best way to do it is using Dojo 1.8 with the dojox.mvc
package, using the dojo-boilerplate application
(https://github.com/csnover/dojo-boilerplate) as a base to run an
optimized build using the closure compiler. I've looked into other JS
frameworks, but from what I can tell, Dojo does everything that
marionette / chaplin / knockout / angular / ember does and more.

There's an example here:
http://stackoverflow.com/questions/11693695/routing-modularity-in-dojo-single-page-application

I haven't found the Play built-in closure compiler to be all that
useful -- it just slows things down by constantly compiling -- so I
disabled it.

Also, I think if you're using Play as a REST API primarily, then
knowing the JSON formatters really well and using the play-navigator
(https://github.com/teamon/play-navigator) is a plus.


Will.

[sas]

I think the more natural and straight forward way is to just develop your whole app as a rest api, and then develop the frontend with whatever javascript framework you like best...

here's one sample app with backbone  https://github.com/opensas/BackboneBootstrap, and here's an experiment using angular.js  https://github.com/RestOpenGov/ideas-ba 

saludos

sas

[Paulo "JCranky" Siqueira]

I agree with sas. Plus you would be ready for plenty of integration options and types of clients.

[]s,

Paulo "JCranky" Siqueira
http://jcranky.com
http://lojinha.paulosiqueira.com.br

--

You received this message because you are subscribed to the Google Groups "play-framework" group.

To view this discussion on the web visit https://groups.google.com/d/msg/play-framework/-/2Trf1L4tmVgJ.

[James Roper]

The Play zentask sample application that comes with Play is an example of single page app (except the login page).  It uses Backbone, but takes a slightly different approach in that all template rendering is done server side.  One advantage of this approach is since all the templates are server side, it would be simple to detect if each request was an AJAX request, and render the fragments, or if it was a full request, and render full pages, and thus your application can be made to be crawlable very easily.

On Thursday, 25 October 2012 12:48:52 UTC+11, Johannes Go wrote:

But then I don't understand all the hype about googles closure templates..

[Adam Lane]

FYI Someone posted a few months ago a github example how to use playframework with pjax.  When implemented on a traditional website it makes it feel more like a single page app without much work.
Just wanted to throw it out there for those wanting more out of their traditional website since it worked out really nice for me and might do the same for others:

https://github.com/pvillega/pjax-Forms

Demo is in scala but I am on Java and being new didn't know how to get to request so I did this...

public class Headers extends Action.Simple {
    public Result call(Http.Context ctx) throws Throwable {
        ctx.args.put("isPjax",((String[])ctx.request().headers().get("X-PJAX")) != null);
        return delegate.call(ctx);
    }
    public static boolean isPjax() {
    	if (Http.Context.current() != null && Http.Context.current().args != null && Http.Context.current().args.get("isPjax") != null) {
    		return (Boolean) Http.Context.current().args.get("isPjax");
    	}
    	return false;
    }
}

Then annotate your controllers...
@With(Headers.class)

In main decorator view...

@if(Headers.isPjax()) {
<title>@title</title>
@body
<script>console.log("pjax template loaded less data than full page load yay!");</script>
} else {
...Traditional full html...
}