渲染服务器和客户端的应用程序Backbone.js的 [英] Render Backbone.js application on the server AND the client

问题描述

咋办我有一个使用Backbone.js的和把手建立了一个Web应用程序。随着服务器我使用Node.js的现在我想做的事情渲染两端，即服务器和客户端上。

当被请求的路由首次，服务器应执行渲染（主要由于性能原因）。在此之后，随后的所有操作都将导致客户端呈现。

这意味着我必须能够使客户端和服务器上的任何页面，两次都在完全同样的方式。两端必须支持相同种类的路由。

我怎么能完成这个任务？

目前，我已经采取了看Airbnb的 rendr 项目，但这绝对绑我Backbone.js的（我不敢肯定，如果我想与Backbone.js的坚持所有次），似乎不完全完呢。至少，制作的Airbnb不推荐它用于生产用途呢。

这是如何做到这一点任何其他的想法？

作为一个子问题，我也可能会问：什么是共享服务器和客户端之间的JavaScript code中的preferred方式？对于这一点，我也知道堆垛机，但我能想象，有可能提供更好的解决方案。

任何提示？

解决方案

好吧，我建立做这个应用程序。如果你不想使用 rendr ，你将不得不code一些自己的版本的东西，他们照顾。据我所知，此刻你的选择是rendr或本土。这里的一些杂项技巧。

• 我们使用 cheerio 服务器端的DOM操作，所以当意见呈现在服务器上，这一点。$埃尔是一个cheerio元素实例。在浏览器中，这是jQuery的。


• 您不必事件代表团，并在服务器端绑定。我们code技术上做到这一点的时刻，但它是没有意义的，更清洁的解决方案将避免在服务器上


• 当你在浏览器服务器呈现的HTML，你需要一种方法来查看实例的大嵌套树连线到在大嵌套DOM树及其相应的元素。我们有这样的土生土长的解决方案，但 Backbone.View.setElement 是核心，你会需要编写一些code要做到这一点


• 我们是在浏览器的时刻重新渲染，虽然有可能采取一个视图实例雨衣的方式，给它在构造函数中的一些选择，包括pre-呈现的DOM节点，把事情妥善接线无需重新渲染。这对读者的练习虽然。 ： - ）


• 我们也发下来，我们需要为JSON中的原始数据＆LT;脚本＆GT; 标签，所以我们同时拥有服务器呈现HTML（用于感知性能）和生作为JSON数据，所以我们可以得到我们的骨干模型和视图实例化和可操作性。同样，你必须拿出一些code来管理这种情况。


• 我们使用 browserify 捆绑和服务器和浏览器之间共享code。我们所有的JavaScript为$ C $光盘作为CommonJS的模块。


• 我们有我们的看法父类中的基本 isBrowser（）函数，所以我们知道，当浏览器仅code应为事件绑定等运行。

总之，对于它的价值，好几个月这种方式工作后，我不认为骨干这种范式效果很好。许多从骨干的核心概念是很好，但它本身不适合于映射视图实例以pre-渲染DOM节点。从JSON自举模式和收藏比较容易，但是视图层可能需要一个显著叉子在这种风格干净运行。<​​/ P>

Supposed I have a web application that is built using Backbone.js and Handlebars. As server I am using Node.js. Now I want to do rendering on both ends, i.e. on the server and the client.

When a route is requested for the first time, the server shall do the rendering (mainly due to performance reasons). After that, all following actions shall result in client-side rendering.

This means that I must be able to render any page on the client and on the server, both times in the perfectly same way. Both ends have to support the same kind of routes.

How could I accomplish this task?

At the moment, I have taken a look at AirBnb's rendr project, but this definitely ties me to Backbone.js (I'm not sure if I want to stick with Backbone.js for all times), and seems to be not perfectly finished yet. At least, AirBnb does not recommend it for production use yet.

Any other ideas on how to do this?

As a sub-question I might also ask: What is the preferred way to share JavaScript code between the server and the client? For this, I also know piler, but I could imagine that there may be better solutions available.

Any hints?

解决方案

Well, I am building an application that does this. If you don't want to use rendr, you will have to code your own versions of some of the things they take care of. AFAIK at the moment your choices are rendr or home-grown. Here's some misc tips.

• We use cheerio for server-side DOM operations, so when views render on the server, this.$el is a cheerio element instance. In the browser, it's jQuery.
• You don't need event delegation and binding on the server side. Our code technically does this at the moment, but it's pointless and a cleaner solution would avoid it on the server
• Once you have server-rendered HTML in the browser, you need a way to wire up a big nested tree of view instances to their corresponding elements in the big nested DOM tree. We have a home-grown solution for this, but Backbone.View.setElement is the core and you'll need to write some code to make this happen
• We are re-rendering on the browser at the moment although there's probably a slicker way to take a view instance, give it some options in the constructor including a pre-rendered DOM node, and get things properly wired up without re-rendering. That's an exercise for the reader though. :-)
• We also send down the raw data we need as JSON within a <script> tag so we have both server-rendered HTML (for perceived performance) and the raw data available as JSON so we can get our backbone models and views instantiated and operational. Again, you'll have to come up with some code to manage this situation.
• We use browserify to bundle and share code between server and browser. All of our JavaScript is coded as CommonJS modules.
• We have a basic isBrowser() function in our view parent class so we know when browser-only code should run for event bindings, etc.

Anyway, for what it's worth, after working this way for many months, I don't think backbone works well with this paradigm. Many of the core concepts from backbone are fine, but it doesn't lend itself to mapping view instances to pre-rendered DOM nodes. Bootstrapping models and collections from JSON is easier, but the view layer probably needs a significant fork to operate cleanly in this style.

这篇关于渲染服务器和客户端的应用程序Backbone.js的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！