服务器端和客户端JavaScript

Question

我很难选择用于即将进入开发的应用程序的框架。 我是一名前端开发人员，我的朋友正在做后端。

比如我正在开发一个简单的待办事项清单应用程序。 我已经为待办事项清单上的每个项目准备了一个模板。 理想情况下，服务器端JavaScript将使用此模板以及客户端JavaScript。

因此，在页面加载时，如果数据库中已有5个待办事项清单，则HTML将在服务器上编译。 如果我随后向清单中添加一个新的待办事项，则客户端JS将使用相同的模板编译HTML。

我听说过Node.js，Backbone.js等技术。 对于这种情况，有太多的选项，让人不知所措。 有人能给我提供这些技术共同使用的示例吗？

- user1082754

Answer 1

Node.js是JavaScript在服务器端的应用，而Backbone.js则用于优雅地构建前端内容，使用集合、模型和视图。

两者各有所长。要更好地比较前端框架，可以查看Addy Osmani编写的TODO列表，其中使用了很多这样的框架：https://github.com/addyosmani/todomvc

网络上还有一些关于Backbone的不错的教程：
- http://dailyjs.com/2011/04/04/node-tutorial-19/
- http://backbonetutorials.com/
- http://net.tutsplus.com/tutorials/javascript-ajax/getting-started-with-backbone-js/

下面是一个结合了Node.js和Backbone的应用程序：

http://fzysqr.com/2011/02/28/nodechat-js-using-node-js-backbone-js-socket-io-and-redis-to-make-a-real-time-chat-app/

像Node.js一样，Backbone也非常流行，因此你可以在网上获得很多帮助和资源。

- alessioalex

---

谢谢，我会看一下那些例子。 - user1082754

你不需要担心服务器端，因为你的朋友将会开发它。服务器语言可以是PHP、Ruby或其他任何一种语言，而不是Node。 - alessioalex

是的，我猜我只是对代码如何在服务器端和客户端之间重复使用感兴趣，因为它们都使用相同的语言。 - user1082754

个人经验表明，Backbone模型非常适合客户端，但在服务器上会出现泄漏问题。 - Raynos

我也不会在服务器上使用像Backbone这样的东西。它是为解决前端问题而设计的。 - alessioalex

Answer 2

当然。请查看TodoMVC以了解各种替代方案。

- Juho Vepsäläinen

---

我看了一下，但它并没有对我之前提到的服务器端问题有所帮助。 - user1082754

Answer 3

现在已经有足够多的模板解决方案，例如mustache.js可以在两端使用。
但是，在客户端处理模板时，将渲染后的数据可用会很有帮助。
Henrik Joreteg撰写了一篇不错的文章，介绍如何重复使用您的backbone-model，并在客户端和服务器之间同步它们。

- Jorin

Answer 4

雅虎的Dav Glass做了一个很好的演讲，展示了他如何在客户端和服务器上使用node.js运行YUI3。

这是他从视频中提取的示例的github：

你可能也会对jsdom感兴趣。

我刚开始学习node，这个视频真的帮助我看到如何在服务器和客户端上进行实验。你会看到他禁用了JavaScript，但日历仍然可以工作 - 这很酷。

这里还有一个很好的backbone资源：

- lee whitbeck

Answer 5

你可以看一下http://derbyjs.com/#why_not_use_rails_and_backbone

他们试图在打开Web应用程序时实现以下目标：

1. 在第一次请求时传输完全呈现的页面。
2. 从那时起，所有更改都应直接在客户端进行，并通过ajax与服务器同步。

因此，通常用户对具有“肥”客户端的站点进行的第一个请求非常痛苦：

• 必须传输和初始化应用程序数据
• 客户端必须加载数据
• 数据被显示

这种行为通常比传输旧式的服务器端呈现的页面要慢得多。例如，Gmail或iCloud需要一些时间来加载，因为它们是这样做的。

- Bijan

Answer 6

将模板文件粘贴到页面底部。这样，您的客户端代码就可以轻松地使用它，而无需调用获取模板的函数。

使用JQuery调用模板的示例如下：

<div style="display:none" id="sample_jquery_template">
  Hello ${name}
</div>

在你的客户端 JavaScript 代码中

..javascript..
person = {name:'Joe'}
$.tmpl($("#sample_jquery_template").html(), person ).appendTo( "#destinationList" );

- Mike