Django 和客户端 javascript 模板答案

【问题标题】：Django and client-side javascript templatesDjango 和客户端 javascript 模板
【发布时间】：2012-01-20 16:53:12
【问题描述】：

简介

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

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

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

设计目标

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

那么...我该怎么做呢？我收集了一些框架和模板系统的链接。排名不分先后：

dust.js:

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

Mustache:

此选项同时具有 Python 和 JS 实现，并且似乎很受欢迎……但我找不到任何似乎在 Django 中使用 Mustache 模板的人。这是因为它太容易配得上一篇博文，还是不可能或不明智？它也非常有限。至少我可能需要求助于某种 MVC JS 框架，对吧？

Backbone、Spine、KnockoutJS、EmberJS、JavascriptMVC 等：

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

DerbyJS

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

所以....

那么，呃……现在呢？有没有人使用这些工具尝试将客户端渲染添加到 Django webapp？进展如何？

【问题讨论】：

冒着说明显而易见的风险，您应该看一下骨干、淘汰赛和可能的琥珀色（以前是sproutcore）。这些框架的方法略有不同，讨论优缺点可能是一本小说，但其中任何一个都可以帮助您显着清理问题。
这篇博文可能会让您感兴趣（也请查看 cmets）：faassen.n--tree.net/blog/view/weblog/2011/11/18/0
@J.Spiral 谢谢。我一直在研究框架，但我不清楚这是否是正确的方法。我已经稍微改写了我的问题以反映这一点。
@Etienne 谢谢！我会看看的。

标签： javascript django client-side-templating

【解决方案1】：

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

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

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

其他有趣的 JS 模板库：

Handlebars（Mustache 的扩展）
Underscore

【讨论】：

好答案。但如果性能是您关心的问题，我认为名称笨拙的 YZ-Javascript-Django-Template-Compiler 可能是最好的。为了获得良好的性能，您需要在后端预编译模板（即在 django 中使用 python），然后在客户端上运行生成的 javascript。我认为只有 YZ-Javascript-Django-Template-Compiler 可以让你这样做。

【解决方案2】：

所有提到的框架都只在客户端工作。一方面，它们值得一看，因为它们是您面临的难题的一部分。

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

客户端

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

服务器端

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

示例

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

服务器渲染：

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

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

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

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

所以你有两个选择：

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

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

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

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

【讨论】：

【解决方案3】：

我知道这是个老问题，但我不知何故来到了这里，所以可能其他人也这样做了。

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

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

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

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

问候，迈克

【讨论】：

【解决方案4】：

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

该项目是一个用于调试 HTTP 服务的 Web 应用，如果您想查看，请在 GitHub 上：Spyglass。

【讨论】：