在服务器和客户端上渲染Backbone.js应用程序

Question

假设我有一个使用Backbone.js和Handlebars构建的Web应用程序.作为服务器我使用Node.js. 现在我想在两端进行渲染,即在服务器和客户端上进行渲染.

当第一次请求路由时,服务器应该进行渲染(主要是由于性能原因).之后,所有后续操作都将导致客户端呈现.

这意味着我必须能够以完全相同的方式在客户端和服务器上呈现任何页面.两端都必须支持相同类型的路线.

我怎么能完成这个任务？

目前,我已经看过AirBnb的rendr项目,但这肯定与Backbone.js联系在一起(我不确定我是否一直想坚持使用Backbone.js),而且似乎并没有完美地完成然而.至少,AirBnb不建议将其用于生产用途.

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

作为一个子问题,我可能还会问:在服务器和客户端之间共享JavaScript代码的首选方法是什么？为此,我也知道piler,但我可以想象可能有更好的解决方案.

任何提示？

Answer 1

好吧,我正在构建一个执行此操作的应用程序.如果您不想使用rendr,则必须编写自己需要处理的一些内容的版本.AFAIK目前您的选择是rendr或本土种植.这是一些misc提示.

• 我们将cheerio用于服务器端DOM操作,因此当在服务器上呈现视图时,this.$el是一个cheerio元素实例.在浏览器中,它是jQuery.
• 您不需要在服务器端进行事件委托和绑定.我们的代码目前在技术上做到了这一点,但它毫无意义,更清晰的解决方案可以避免它在服务器上
• 在浏览器中使用服务器呈现的HTML后,您需要一种方法将大型嵌套的视图实例树连接到大型嵌套DOM树中的相应元素.我们有一个本土解决方案,但Backbone.View.setElement它是核心,你需要编写一些代码来实现这一目标
• 我们现在正在浏览器上重新渲染,尽管可能有一种更流畅的方式来获取视图实例,在构造函数中为它提供一些选项,包括预渲染的DOM节点,并在没有重新渲染的情况下正确连接.不过,这对读者来说是一种练习.:-)
• 我们还在<script>标签中将我们需要的原始数据作为JSON发送,因此我们既有服务器呈现的HTML(用于感知性能),也有原始数据可用作JSON,因此我们可以获得实例化和操作的骨干模型和视图.同样,您将需要提供一些代码来管理这种情况.
• 我们使用browserify在服务器和浏览器之间捆绑和共享代码.我们所有的JavaScript都编码为CommonJS模块.
• 我们isBrowser()在视图父类中有一个基本函数,因此我们知道何时应该为事件绑定运行仅浏览器代码等.

无论如何,对于它的价值,经过这种方式工作了好几个月之后,我认为骨干不适合这种范式.来自骨干网的许多核心概念都很好,但它不适合将视图实例映射到预渲染的DOM节点.来自JSON的引导模型和集合更容易,但视图层可能需要一个重要的分叉才能以这种风格干净地运行.