Re: Choosing a JS framework to go together with Django

[Alec Taylor]

AngularJS?

On Tue, Sep 4, 2012 at 11:39 PM, dotnetCarpenter <jon.ron...@gmail.com> wrote:

Hi all.

I'm new here and just took over a Django project for the first time. I'm still getting to grip with Django but as a front end dev for the past 5 years, I'm also looking for a client-side library/framework to go together with my project.
My requirements for a JS framework is that it:

1. is unobtrusive (Django rendered HTML will be shown to scraper bots like google)
2. provides some sort of structure (MVC, MVP, MVVM ect.)
3. embraces standards
   
4. doesn't conflict with Django templates or does so intentionally
   
5. ideally uses the same template language as Django

In the ideal world a request/response scenario would look like this:

1. A client make a (HTTP) request to the (django powered) web site with (HTTP) Accept header text/html
   
2. Django response in the usual way by rendering the assign View (django template)
3. The view figure out if JS is supported (implemented in JS). If no, this scenario stays in loop 1-3. If yes, then 4.
4. The client (usually a browser) wire up the client-side app structure, hook in to URI links, add transitions between views, data-bindings ect.
5. Subsequent request are now handle by the JS framework, either user initiated (e.g. clicking a link) or app initiated (e.g. pulling extra data), that will modify the request header to Accept header application/json or application/django-template.
6. If django receive a request with an application/django-template header it will serve the view as plain text. E.g. Content-type: text/plain. On the other hand if django receive a request with application/json, it will send the object model defined in the view as JSON.
7. The client-side JS framework will receive a template to render in the first request and the data to render in the template in the second request. A promise object could be used to synchronize the two calls.

This way django will work as intended for non JS clients and silently convert to a RIA in clients that supports JS, with minimal double work for the two execution contexts.
A big pro in this is the fact that both django and the JS framework share template and data (only has to defined once - in django) - we'll duck type all the way. But does this JS framework exist? Does anyone have any experience with working with django and JS frameworks? Is there any obvious pitfalls in my ideal world scenario in regard to Django? And finally, is it possible to serve templates as plain text with django?

Cheers, Jon and thanks in advance

PS. I accidentally cross-posted this to the Django Developers group before realizing it was the wrong forum. Sorry about that.

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

[Marcin Tustin]

Why?

--
Marcin Tustin
Tel: +44 (0) 7773 787 105 (UK)

       +1  917 553 3974 (US)

[Alex Strickland]

On 2012/09/04 03:39 PM, dotnetCarpenter wrote:

> I'm new here and just took over a Django project for the first time. I'm
> still getting to grip with Django but as a front end dev for the past 5
> years, I'm also looking for a client-side library/framework to go
> together with my project.

AngularJS from Google seems well thought of and is completely back-end
agnostic as far as I can see.

I'm a n00b on client *and* server development so take it with a pinch of
salt, but I have done quite a lot of reading.
--
Regards
Alex

[Peith Vergil]

i've been playing with KnockoutJS lately. one thing i like about it is that it's built-in templating engine has a different syntax than Django's, so there shouldn't have any conflict.

[Rafael E. Ferrero]

men, i use Jquery on www.expoferiasg.com.ar and works quite well.. with any problem.

2012/9/4 Peith Vergil <peith....@gmail.com>

i've been playing with KnockoutJS lately. one thing i like about it is that it's built-in templating engine has a different syntax than Django's, so there shouldn't have any conflict.

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

To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

--
Rafael E. Ferrero
Claro: (03562) 15514856

[Paul Menzel]

Dear Rafael,

Am Dienstag, den 04.09.2012, 11:55 -0300 schrieb Rafael E. Ferrero:
> men, i use Jquery on www.expoferiasg.com.ar and works quite well..
> with any problem.

s,with,without,?

Additionally your site does not tell my browser what character set it is
using and therefore all special signs are not displayed correctly in a
browser using UTF-8 by default.

And last but not least, though not so important on this list, plain text
messages are preferred on mailing lists [1]. ;-)


Thanks,

Paul


[1] http://en.opensuse.org/openSUSE:Mailing_list_netiquette

[Rafael E. Ferrero]

Sorry paul... my bad... "without any problem" i mean.

extract of index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
...
do you see something wrong there, maybe a mistake??

2012/9/4 Paul Menzel <pm.d...@googlemail.com>

[Paul Menzel]

Am Dienstag, den 04.09.2012, 12:08 -0300 schrieb Rafael E. Ferrero:
> Sorry paul... my bad... "without any problem" i mean.
>
> extract of index.html:
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
> ...
> do you see something wrong there, maybe a mistake??

Strange. Loading it now worked without problems. Sorry for the noise,
although I think you should add two more »"« after html and before
utf-8.


Thanks,

Paul

[Melvyn Sopacua]

Op 4 sep. 2012 16:38 schreef "Peith Vergil" <peith....@gmail.com> het volgende:

>
> i've been playing with KnockoutJS lately.

+1 on knockout.

[Tom Evans]

No, you really shouldn't:

http://www.w3.org/TR/1999/REC-html401-19991224/charset.html#spec-char-encoding

Cheers

Tom

[Paul Menzel]

Right. Thanks, I should have checked before suggesting something.


I will shut up now and keep wondering why Midori did not display it
correctly the first time I viewed the page.


Thanks,

Paul

[Kelly Nicholes]

It would be a travesty to not mention backbone.js.

On Tuesday, September 4, 2012 7:39:49 AM UTC-6, dotnetCarpenter wrote:

Hi all.

I'm new here and just took over a Django project for the first time. I'm still getting to grip with Django but as a front end dev for the past 5 years, I'm also looking for a client-side library/framework to go together with my project.

[Amyth Arora]

I am not sure what you are exactly trying to achieve. A more issue specific topic would have been easy to understand though i can suggest you following frameworks (in particular order):

1. KnockoutJS

2. BackboneJS

3. Cappucino

4. Ember.Js

5. Sammy.JS

6. Spine.JS

7. JavascriptMVC

--

You received this message because you are subscribed to the Google Groups "Django users" group.

To view this discussion on the web visit https://groups.google.com/d/msg/django-users/-/PF4D-xIEovcJ.

To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

--
Thanks & Regards
----------------------------

Amyth [Admin - Techstricks]
Email - aroras....@gmail.com, ad...@techstricks.com
Twitter - @a_myth_________
http://techstricks.com/

[dotnetCarpenter]

Wow - a lot of answers. Great community!

First of all, just to clearify. My aim is to have smooth user experience while utilizing Django and replicate as little code as possible on the client and the server. Think, reuse of server code on the client.

I've looked at AngularJS and it has a rendering layer that doesn't work without JS. Hence, no google support since google still requires us to deliver HTML snapshot. Which means it violate my first requirement. AngularJS doesn't seem to offer help in this regard. https://groups.google.com/forum/?fromgroups=#!topic/angular/yClOeqR5DGc

Almost all JS frameworks in the wild, violate simple SEO rules, so it's not confined to AngularJS at all.

jQuery doesn't dictate client-side rendering. but doesn't offer any structure at all. Albeit it's great to build your own structure on top of.

Thanks for the list of frameworks. I haven't look at Knockout yet but it seems to require JS to do it's data bindings.

Cheers, Jon.

[dotnetCarpenter]

Hi vicherot.

I'm interested to know how you made the distinction between your dhtml/ part of your site to the shtml/ part. It looks like you pretty much used the same code base to generate the 2 versions. Can you elaborate on the Django specific parts of your implementation?

Cheers, Jon

[dotnetCarpenter]

@Peith Yes, I can see the advantage of not having to spend time working out template conflicts. But you'll have to write two sets of template code, right? One for Django and one for KnockoutJS. Or am I missing something?

Cheers, Jon

[dotnetCarpenter]

@Kelly Nicholes In backbone.js everything is in JS, meaning that there could be no conflict between declarative code and Django handled templates. If I can expose my python models, through auto serialization (JSON) from Django, I can see a productivity win. But I'm a little afraid of the tight coupling in data models between back-end and front-end. My main concern is that I'll have to rewrite large parts of JS if/when the models change. Have you any experience ironing out these issues? Maybe it's not a problem but I lack experience with both frameworks.

I'll look more into backbone.js :)

[martharotter]

Hi Jon, 

I was just wondering if you made a decision on this? I'm looking at a similar approach and am wondering what direction you ended up taking and why? 

Currently looking at Knockout myself but open to suggestions. 

Thanks!

--Martha

[Joni Bekenstein]

By writing a custom serialization for your models you have a good place to handle variations to those models. You don't really have to dump all of your fields, you can even create a custom field specifically for the frontend, but doesn't really exists in your backend model. 

Besides, If and when your model changes, the frontend part that depends on what changed will probably have to be adjusted, regardless of it beeing a plain old django template or something else.

[Faraz Masood Khan]

Have a look at following Unobtrusive Ajax, it is plug out of ASP.NET MVC, simple yet powerful.

https://github.com/farazmasoodkhan/DjangoAjax

[dotnetCarpenter]

In the end, my project stalled due to lack of resources. We might pick it up but it's been abandoned for quite some time. I haven't had any django projects since. Hence, I can't make any recommendations.

DjangoAjax looks promising but might lack the community support you expect. It is however based on jQuery and ASP.NET MVC, so if you can see past the M$ cruft, some guides etc are available.

[Phang Mulianto]

Hi ,

Why not using REST for serving your data to the Front End app, it can be from mobile app or just web app with HTML + javascript.

With that you don't need to worry about redo the template side in django and in your front end js app.

With REST serving JSON, no template / html needed for the response.

You can use Tastypie or Django rest framework which still using Django engine . This way also your application server no need to rendering the HTML view in every request from the first time.

Any front end will be able to process the JSON with javascript.

Regards,

Mulianto

On Sun, Jul 14, 2013 at 8:18 PM, dotnetCarpenter <jon.ron...@gmail.com> wrote:

In the end, my project stalled due to lack of resources. We might pick it up but it's been abandoned for quite some time. I haven't had any django projects since. Hence, I can't make any recommendations.

DjangoAjax looks promising but might lack the community support you expect. It is however based on jQuery and ASP.NET MVC, so if you can see past the M$ cruft, some guides etc are available.

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

To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

To post to this group, send email to django...@googlegroups.com.

Visit this group at http://groups.google.com/group/django-users.
For more options, visit https://groups.google.com/groups/opt_out.

[Jon]

The idea is to generate pure HTML views for non JS clients like search bots. If your view depends on AJAX calls, then it defies the purpose.

I've been developing native mobile apps for the past year, so I get your argument about providing REST end points for your data.

The point of my original post was to NOT do two different views; one for search bots and one for browsers.

 I agree that providing a REST interface is the "right" way to provide data for both browsers and mobile apps. To that end, the project I was suppose to work on, used tastypie.

// Jon

You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/X_9qJJjiDfE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users...@googlegroups.com.

[François Schiettecatte]

Hi

FWIW an approach I have taken is to split the app into two components, one is a REST based API (developed in Java, but you could use Django), and a website developed with Django. The website renders pages of content (all SEO friendly, with known urls), all interactive JS is provided by jquery, and I use the '/ajax/...' url for browser calls to the website app (validation, autocomplete, etc...). This split gives you the option to develop mobile clients against the API, and to host components on different machines. If you want to start small one option would be to build you API with Django and use the '/api/...' url. That way you can combine API and website on the same server until you need to split things. And using host names like api.foo.com and foo.com makes that relatively painless.

François