JavaScript：DOM相关代码的最佳实践是否同时执行服务器和客户端？

背景

从2年前开始（使用Batman.js和node.js ）我开始尝试在服务器和客户端上执行相同的DOM代码。 这是希望有SPA（单页面应用程序），可以使用pushState呈现，并在页面已经呈现为search引擎优化和卓越的用户体验路线访问（没有页面“闪光灯”与页面后的SPA渲染元素相关联负荷）。 这通常涉及将模块封装在if语句中，该语句检查模块是在window中执行还是被require.js使用，或者作为node.js等中的模块。

客户端+服务器SPA的当前实现

Rendr和Ezel都试图帮助客户端+服务器代码共享和DOM渲染function到骨干SPA。 Ezel在Backbone模型/集合中具有魔力，但是在客户端使用Backbone.View + Jade时 ，视图在服务器上使用Express + Jade呈现。 这意味着在扩展的Backbone.View中使用像Rivets这样的东西不会导致HTML打到由Rivets预渲染的客户端。 我希望构build一些最佳实践和技巧，使我自己的DOM服务器端保持简单（在一个位置编辑视图代码）和灵活（能够添加Ezel目前不支持的其他DOM操作模块）。

期望的结果

我想使用类似Rivets的东西来注入模型数据到视图中，然后通过一个HTTP请求为一个完整的页面加载path，并且通过一个HTTP请求来响应变化pushState在客户端上。 什么是节点的环境要求，我可以使用Rivets修改服务器上的HTML之前，它的服务和保持绑定在客户端上？ 如何最好地将jQuery ， Backbone ， Rivets等引入到node.js中 ，让它们在HTML模板的DOM上运行，然后提供预渲染的结果（同时在客户端上保持正常的JS行为）？

相关模块

Sharify和Browserify都是可以帮助共享代码的工具。 Rivets ， Backbone ＆ jQuery都有与node.js兼容的发行版。

目前的工作

我已经开始通过Github上的分支向Ezel添加function。

我能够通过使用jsdom在Ezel之上构build一个接近纯粹的同构JavaScript应用程序。 jsdom会导致性能下降，因此我尽可能caching了在服务器上运行铆钉的结果。

我从https://github.com/adjohnson916/rivets-server获取了一些提示。 我无法批量使用该模块，因为它踩了几个我需要发送到铆钉的configuration选项（铆钉 – 服务器使用铆钉叉）。

我最初碰到的一个陷阱就是同时使用了Sharify＆Rivets。 Sharify将脚本插入到包含函数的网页中，因为它使用{}进行模板化，所以会将铆钉绊倒。 通过更改templateDelimiters双花括号，我绕过了这个问题。

同构JavaScript应用程序的主要组件是：

  • 在浏览器中为node.js环境元素填充的模块，包括require （例如，Browserify）
  • 能够在服务器上使用第一批数据绑定库（例如jsdom running rivets）。 使用这个而不是Ezel的使用node-jadeify（我贡献的）的方法要优于Ezel，在这里，渲染必须以不同的方式在两个不同的文件中进行。
  • 一个抽象出HTTP请求客户端与服务器（例如骨干超同步）差异的模块，
  • 一个模块，使您可以共享客户端和服务器之间的configuration数据（例如sharify）
Interesting Posts