Django 和客户端 javascript 模板

Django and client-side javascript templates

提问by Cody Hatch

Intro

介绍

I'm currently writing a very standard Django based app (basically a fancy CRM/contact list sort of thing). It's sort of working, but as I keep trying to improve the interface with more and more AJAXy UI code (using jQuery) it's starting to get to be a real pain to work with. I'm getting long blocks of fragile jQuery event handlers which parse the DOM, push changes back to the server, get some JSON back, and try and update the DOM based on that.

我目前正在编写一个非常标准的基于 Django 的应用程序（基本上是一个花哨的 CRM/联系人列表之类的东西）。它有点工作，但是随着我不断尝试使用越来越多的 AJAXy UI 代码（使用 jQuery）改进界面，它开始变得非常痛苦。我得到了很长的脆弱 jQuery 事件处理程序块，它们解析 DOM，将更改推送回服务器，返回一些 JSON，并尝试基于此更新 DOM。

I feel like, at a minimum, I probably want to add some client-side templates into the mix. Alternatively, I could try and switch to a JS framework, and just use my Django app as a database abstraction layer. Or even though I know and love Python, I could abandon the Django app, and try and go with a JS/Node.js solution or something.

我觉得，至少，我可能想在混合中添加一些客户端模板。或者，我可以尝试切换到 JS 框架，并将我的 Django 应用程序用作数据库抽象层。或者即使我知道并喜欢 Python，我也可以放弃 Django 应用程序，并尝试使用 JS/Node.js 解决方案或其他东西。

Has anyone else been in this situation? How did you solve it?

有没有其他人遇到过这种情况？你是怎么解决的？

Design goals

设计目标

1. DRY: I don't want to have to replicate my models or my templates (or at least, any more than necessary).
2. I want visitors landing on a page to get the results rendereed server-side.
3. As visitors click on things, I'd like to handle that via client-side templates and rendering, and keep the server updated via AJAX calls to a REST interface.

1. DRY：我不想复制我的模型或我的模板（或者至少，没有必要）。
2. 我希望访问者登陆页面以获得在服务器端呈现的结果。
3. 当访问者点击东西时，我想通过客户端模板和渲染来处理它，并通过对 REST 接口的 AJAX 调用来保持服务器更新。

So...how do I do this? I've collected links to a few frameworks and template systems. In no particular order:

所以……我该怎么做？我收集了一些框架和模板系统的链接。没有特定的顺序：

dust.js:

灰尘.js：

This is apparently being used by LinkedInto solve a similar problem. It uses Node.js on the server side which is not ideal (I've never used Node) but at least it's not JVM based. It also appears to be dormant on github - I've found mailing lists where people have been wondering where the maintainer went. It does sound pretty good - the blog post from LinkedIn does a good job selling the technology, especially the ability to compile it. But it appears to JUST be templating. Is that enough for what I want?

LinkedIn显然正在使用它来解决类似的问题。它在服务器端使用 Node.js，这并不理想（我从未使用过 Node），但至少它不是基于 JVM 的。它似乎也在 github 上处于休眠状态 - 我发现人们一直想知道维护者去了哪里的邮件列表。听起来确实不错——LinkedIn 的博客文章在推销这项技术方面做得很好，尤其是编译它的能力。但它似乎只是模板。这足以满足我想要的吗？

Mustache:

小胡子：

This option has both Python and JS implementations, and seems popular...but I can't find anyone who seems to be using Mustache templates with Django. Is that 'cause it's too easy to deserve a blog post, or is it impossible or otherwise inadvisable? It's also pretty limited; at a minimum I'd probably need to turn to some sort of MVC JS framework, right?

这个选项有 Python 和 JS 两种实现，而且似乎很流行……但我找不到任何人似乎在 Django 中使用 Mustache 模板。那是因为太容易配得上一篇博文，还是不可能或不明智？它也非常有限；至少我可能需要求助于某种 MVC JS 框架，对吗？

Backbone, Spine, KnockoutJS, EmberJS, JavascriptMVC, etc:

Backbone、Spine、KnockoutJS、EmberJS、JavascriptMVC 等：

There's so manyframeworks it's kind of daunting. All of them seem perfectly good at first glance. It also seems like I'd need to rewrite a LOT of my app if I went this route, and I'd really would like to find someone who has actually done something like this already. Also, it'd be nice if there was a clear choice for someone coming from Django as a background; I don't want to have to learn a half dozen different frameworks to evaluate them.

有这么多框架，这有点令人生畏。乍一看，所有这些都非常好。如果我走这条路，我似乎还需要重写我的很多应用程序，而且我真的很想找到一个已经真正做过类似事情的人。此外，如果有一个来自 Django 的人作为背景的明确选择，那就太好了；我不想学习六个不同的框架来评估它们。

DerbyJS

德比JS

This looks interesting as it handles both the client and server sides in one package, but a bit immature. They warn against using it in production, and if I understand the docs it doesn't yet support any form of persistence, which is...limiting. I get the feeling that if it was finished it would be perfectfor what I want though...

这看起来很有趣，因为它在一个包中处理客户端和服务器端，但有点不成熟。他们警告不要在生产中使用它，如果我理解文档，它还不支持任何形式的持久性，这是......限制。我有一种感觉，如果它完成了，它将非常适合我想要的东西......

So....

所以....

So, uh...now what? Has anyone used any of these tools to try and add client-side rendering to a Django webapp? How did it go?

所以，呃……现在呢？有没有人使用过这些工具中的任何一个来尝试将客户端渲染添加到 Django webapp 中？进展如何？

回答by Etienne

For a complete integration with Django templates I found this: Yz-Javascript-Django-Template-Compiler. I never used it myself and unfortunately it looks a bit unmaintained.

为了与 Django 模板完全集成，我发现了这个：Yz-Javascript-Django-Template-Compiler。我自己从未使用过它，不幸的是它看起来有点无人维护。

Swigis a fast JS django-like templating engine.

Swig是一个快速的 JS django 式模板引擎。

Pureis a compiled JS templating tool that, with a bit of thinking, could work well with Django I think because templates are just normal valid HTML.

Pure是一个编译好的 JS 模板工具，经过一些思考，我认为可以很好地与 Django 配合使用，因为模板只是正常的有效 HTML。

Other interesting JS template libraries:

其他有趣的 JS 模板库：

• Handlebars(an extension of Mustache)
• Underscore

• 把手（Mustache的扩展）
• 下划线

回答by Daryl Teo

All the frameworks mentioned only work client-side. That being side, they are worth a look as they are a piece of the puzzle that you are facing.

提到的所有框架仅适用于客户端。那一边，它们值得一看，因为它们是您面临的难题的一部分。

Your design goals are exactly what I am trying to achieve with my current project. What I am attempting to do at the moment is:

您的设计目标正是我想要通过当前项目实现的目标。我目前正在尝试做的是：

Client-Side

客户端

Using Backbone + (some templating engine here)

使用 Backbone +（这里有一些模板引擎）

Server-Side

服务器端

Renders the first set of html, as well as renders some JSON data that Backbone can pick up and work with (for example, current page that was loaded, max pages etc.)

渲染第一组 html，以及渲染一些 Backbone 可以获取和使用的 JSON 数据（例如，加载的当前页面、最大页面等）

Example

例子

Client loads: http://mysite.com/blog/archive/5

客户端加载：http: //mysite.com/blog/archive/5

Server renders:

服务器渲染：

<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>

---

---

This solves Design Points 2 and 3: your server loads the initial state of your web application, and the user can navigate client-side from there.

这解决了设计要点 2 和 3：您的服务器加载 Web 应用程序的初始状态，用户可以从那里导航客户端。

With design point 1: On the client-side, everything is fine. However, for server-side you require a js engine to render your templates as it is. LinkedIn mentions this in their article:

设计要点 1：在客户端，一切都很好。但是，对于服务器端，您需要一个 js 引擎来按原样呈现模板。LinkedIn 在他们的文章中提到了这一点：

• Server side support:if you have a client that can't execute JavaScript, such as a search engine crawler, a page must be rendered server side. Once written, the same dust.js template can be rendered not only in the browser, but also on the server using node.jsor Rhino.

• 服务器端支持：如果你有一个不能执行 JavaScript 的客户端，比如搜索引擎爬虫，一个页面必须在服务器端渲染。编写后，相同的dust.js 模板不仅可以在浏览器中呈现，还可以在使用node.js或Rhino的服务器上呈现。

So you're stuck with 2 options:

所以你有两个选择：

• use a templating engine with either node.js or Rhino, or
• find a templating engine with support in other tech stacks.

• 使用带有 node.js 或 Rhino 的模板引擎，或
• 找到一个在其他技术堆栈中得到支持的模板引擎。

Funnily enough, thanks to the post above, I realised that Mustache, which have libraries available for most common stacks, fulfils this need perfectly, so I will start having a look at integrating it with my project. (Not sure if there are any libraries available for Handlebars.js) This should allow us to write Mustache.js templates for both server and client side, and have them render html on either ends with the same templates.

有趣的是，多亏了上面的帖子，我意识到Mustache具有可用于大多数常见堆栈的库，完美地满足了这一需求，因此我将开始考虑将其与我的项目集成。（不确定是否有任何可用于 Handlebars.js 的库）这应该允许我们为服务器端和客户端编写 Mustache.js 模板，并让它们在两端使用相同的模板呈现 html。

EDIT: Should not that a "server-side" solution does not necessarily need to be in your language/stack of choice. For example, just because you're using Dust.js mean you HAVE to code your entire application in Node.JS. It may be possible to get by executing your compilation scripts via a shell command instead.

编辑：不应该说“服务器端”解决方案不一定需要在您选择的语言/堆栈中。例如，仅仅因为您使用 Dust.js 就意味着您必须在 Node.JS 中编写整个应用程序。可以通过 shell 命令执行编译脚本来获得。

EDIT: turns out that Mustache does not seem to have a "precompilation" solution, meaning that templates need to be rendered directly into the page for client-side rendering (thus no caching), which isn't 100% ideal.

编辑：事实证明，Mustache 似乎没有“预编译”解决方案，这意味着模板需要直接渲染到页面中以进行客户端渲染（因此没有缓存），这不是 100% 理想的。

回答by okrutny

I know it's old question, but i somehow got here, so probably others do.

我知道这是个老问题，但我以某种方式来到这里，所以其他人可能会这样做。

I also try to find solution to build RIA, which is going to work on as many devices as possible, responsive, performant and with good ux. Django on backend with templates are being implemented to have option to fallback gracefully when required.

我还尝试找到构建 RIA 的解决方案，该解决方案将在尽可能多的设备上运行、响应迅速、性能良好且具有良好的用户体验。带有模板的后端 Django 正在实施，以便在需要时可以选择优雅地回退。

Now I'm looking through all those js frameworks and I'm a bit worried, mostly about performance and accesibility.

现在我正在浏览所有这些 js 框架，但我有点担心，主要是性能和可访问性。

Taking into account templates are being implemented on server I lean towards solution with doing partial DOM updates with html fragments rendered on backend and sent to the thick client instead of json. Looks like the best option for me.

考虑到模板正在服务器上实现，我倾向于使用在后端呈现的 html 片段进行部分 DOM 更新并发送到胖客户端而不是 json 的解决方案。看起来对我来说是最好的选择。

Idea taken from: http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

想法取自：http: //openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

Regards, Mike

问候，迈克

回答by Justin Voss

I've used Mustache on both the server side and client side, and it worked great. The project I used it in was just a small side project, but I was really pleased with the results and would recommend it.

我在服务器端和客户端都使用了 Mustache，而且效果很好。我使用它的项目只是一个小项目，但我对结果非常满意，并会推荐它。

The project, a web app for debugging HTTP services, is on GitHub if you want to take a look: Spyglass.

该项目是一个用于调试 HTTP 服务的 Web 应用程序，如果您想看一看，它位于 GitHub 上：Spyglass。