Django et modèles javascript côté client

Question

Intro

Je suis en train d'écrire un très standard Django en fonction de l'application (en gros une fantaisie CRM/liste de contact genre de chose). C'est un peu de travail, mais comme j'essaie d'améliorer l'interface avec de plus en plus AJAXy code de l'INTERFACE utilisateur (à l'aide de jQuery), il commence à être une vraie douleur pour travailler avec. Je suis de longs blocs de fragile jQuery gestionnaires d'événements qui analyse le DOM, pousser les modifications sur le serveur, obtenir quelques JSON en arrière et essayer de mettre à jour le DOM sur cette base.

Je me sens comme, au minimum, je voulez probablement ajouter un peu de client-côté des modèles dans le mélange. Sinon, je pourrais essayer et de passer à un JS cadre, et juste utiliser mon Django app comme une couche d'abstraction de base. Ou même si je connais et j'adore Python, je ne pouvais abandonner l'Django app, et d'essayer d'aller avec un JS/Node.js solution ou quelque chose.

Quelqu'un d'autre a été dans cette situation? Comment avez-vous le résoudre?

Les objectifs de conception

1. SEC: je ne veux pas avoir à reproduire mes modèles ou des modèles (ou au moins, plus que nécessaire).
2. Je veux que les visiteurs d'atterrir sur une page pour obtenir les résultats rendereed côté serveur.
3. Que les visiteurs cliquent sur les choses, je tiens à gérer que par le côté client de modèles et de rendu, et de garder le serveur de mise à jour via des appels AJAX pour une interface REST.

Donc...comment dois-je faire? J'ai recueilli des liens vers quelques-uns des cadres et des systèmes de modèle. Dans aucun ordre particulier:

dust.js:

C'est apparemment utilisé par LinkedIn pour résoudre un problème similaire. Il utilise Node.js sur le côté serveur qui n'est pas idéal (je n'ai jamais utilisé de Nœud), mais au moins il n'est pas en fonction de la JVM. Il semble également être en dormance sur github - j'ai trouvé des listes de diffusion où les gens se demandent où le responsable est allé. Il n'a l'air très bon - le blog de LinkedIn fait du bon travail, la vente de la technologie, en particulier la capacité de le compiler. Mais il semble JUSTE être la création de modèles. Est-ce suffisant pour ce que je veux?

Moustache:

Cette option a Python et JS implémentations, et semble populaire...mais je ne peux pas trouver quelqu'un qui semble être l'utilisation d'Moustache modèles avec Django. C'est que c'est trop facile pour mériter un article de blog, ou est-il impossible ou contraire déconseillé? Il est également assez limité; au minimum, je serais probablement besoin de se tourner vers une sorte de MVC JS cadre, à droite?

Colonne vertébrale, Colonne vertébrale, KnockoutJS, EmberJS, JavascriptMVC, etc:

Il ya tellement de nombreux cadres c'est un peu intimidant. Tous semblent parfaitement bien au premier coup d'œil. Il semble aussi que j'avais besoin de réécrire une grande partie de mon application si je suis allé dans cette voie, et j'aimerais vraiment aimerais trouver quelqu'un qui a réellement fait quelque chose comme cela. Aussi, ça serait bien si il y avait un choix clair pour quelqu'un venant de Django comme un arrière-plan; je ne veux pas avoir à apprendre une demi-douzaine de différents cadres pour les évaluer.

DerbyJS

Cela semble intéressant car il traite à la fois les côtés client et serveur dans un seul paquet, mais un peu immature. Ils mettent en garde contre son utilisation dans la production, et si je comprends les docs il ne supporte pas encore toute forme de persistance, qui est...un facteur limitant. J'ai le sentiment que si elle a été terminé, il serait parfait pour ce que je veux bien...

Donc....

Donc, euh...et maintenant? Quelqu'un a utilisé l'un de ces outils pour essayer et ajouter le rendu côté client pour un Django d'une webapp? Comment se fait-il aller?

Answer 1

Pour une intégration complète avec des modèles Django, j'ai trouvé ceci: Yz-Javascript-Django-Modèle-Compilateur. Je n'ai jamais utilisé moi-même et, malheureusement, il ressemble un peu laissés à l'abandon.

Swig est un fast-JS django-comme moteur de template.

Pure est un compilé JS outil de création de modèles qui, avec un peu de réflexion, pourrait bien fonctionner avec Django, je pense que parce que les modèles sont tout à fait normal de code HTML valide.

D'autres intéressantes JS bibliothèques de modèles:

• Guidon (une extension de la Moustache)
• Trait de soulignement

Answer 2

Tous les cadres mentionnés fonctionnent uniquement côté client. Cela étant, ils valent un coup d'oeil, car ils sont une pièce du puzzle que vous êtes confrontés.

Vos objectifs de conception sont exactement ce que je suis en train de réaliser avec mon projet en cours. Ce que j'essaie de faire pour le moment est:

Côté Client

À l'aide de la Dorsale + (certaines moteur de template ici)

Côté Serveur

Rend la première série de html, ainsi que rend certaines données JSON que l'épine Dorsale pouvez ramasser et de travail (par exemple, la page actuelle qui a été chargé, de max pages, etc.)

Exemple

Des charges des clients: http://mysite.com/blog/archive/5

Serveur rend:

<html>
    <head>
        <script>
            var data = {
                page:5 // Rendered by Server,
                maxPages: 10
            };

            $(function(){
                // Hook up all Backbone stuff, and hook into interaction events
            });
        </script>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

---

Cela résout la Conception des Points 2 et 3: votre serveur charges de l'état initial de votre application web, et l'utilisateur peut naviguer à côté client à partir de là.

Avec la conception de point 1: Sur le côté client, tout va bien. Cependant, pour le côté serveur, vous avez besoin d'un js moteur de rendu de vos modèles, tel qu'il est. LinkedIn mentionne cela dans leur article:

• Côté serveur support: si vous avez un client qui ne peut pas exécuter le code JavaScript, comme un moteur de recherche crawler, une page doit être rendu côté serveur. Une fois écrit, le même dust.js le modèle peut être rendu non seulement dans le navigateur, mais aussi sur le serveur à l'aide de node.js ou Rhino.

Donc, vous êtes coincé avec 2 options:

• utiliser un moteur de template avec soit node.js ou Rhino, ou
• trouver un moteur de template avec le soutien dans d'autres tech des piles.

Curieusement, merci pour le post au dessus, j'ai réalisé que la Moustache, qui ont des bibliothèques disponibles pour la plupart des communes de meules, répond à ce besoin tout à fait, donc je vais commencer à avoir un coup d'oeil à l'intégrer à mon projet. (Je ne sais pas s'il y a des bibliothèques disponibles pour Handlebars.js) Cela devrait nous permettre d'écrire Mustache.js des modèles pour à la fois côté serveur et client, et de rendre le code html sur les deux extrémités avec les mêmes modèles.

EDIT: Faut pas qu'un "côté serveur" solution n'a pas nécessairement besoin d'être dans votre langue/de la pile de choix. Par exemple, juste parce que vous êtes à l'aide de Dust.js dire que vous AVEZ le code de votre application entière en Node.JS. Il peut être possible d'obtenir, par l'exécution de vos scripts de compilation via une commande shell à la place.

EDIT: s'avère que la Moustache ne semble pas avoir un "précompilation" la solution, ce qui signifie que les modèles doivent être rendus directement dans la page de rendu côté client (donc pas de mise en cache), ce qui n'est pas 100% idéal.

Answer 3

Je sais que c'est une vieille question, mais j'ai un peu eu ici, de manière sans doute d'autres.

J'ai aussi essayer de trouver la solution pour créer des RIA, qui est en train de travailler sur autant d'appareils que possible, réactif, performant et avec une bonne expérience utilisateur. Django sur l'arrière-plan avec des modèles sont en cours de mise en œuvre de l'option de secours gracieusement lorsque requis.

Maintenant, je suis à la recherche au travers de tous ces frameworks js et je suis un peu inquiet, surtout au sujet de la performance et de l'accès.

En tenant compte de modèles sont mis en œuvre sur le serveur je me penche vers la solution de faire partielles DOM mises à jour avec des fragments de html rendus sur le backend et envoyé à l'épaisseur du client au lieu de json. Regarde comme la meilleure option pour moi.

Idée reprise de: http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

En ce qui concerne, Mike

Answer 4

J'ai utilisé Moustache à la fois côté serveur et côté client, et cela a très bien fonctionné. Le projet dans lequel je l'ai utilisé n'était qu'un petit projet parallèle, mais j'étais vraiment satisfait des résultats et je le recommanderais.

Le projet, une application web pour le débogage des services HTTP, est sur GitHub si vous voulez y jeter un œil: Spyglass .