react-engine与其他模板引擎 [英] react-engine vs other template engines

问题描述

我想知道使用Paypal的React Engine( https://github.com/paypal/react-engine )，但我有一些疑问:

I was wondering to use paypal's React Engine (https://github.com/paypal/react-engine), but I have some doubts:

与其他模板引擎(如把手)相比有什么好处?

What are the benefits over other template engines like Handlebars?

为什么要上传.jsx文件而不上传(jsx预编译/转换).js文件? (这应该更快，因为不必在服务器上处理转换.)

Why upload .jsx files, and not (jsx precompiled/transformed) .js files? (This one should be faster because don't have to do deal with the transformation at the server).

我一直在研究，但感到困惑.

I have been researching but I get confused.

谢谢

推荐答案

react-engine 和模板引擎仅在浏览器允许用户与浏览器页面进行交互时才使用.尽管如此，机器如何访问单个数据仍然很重要.

The main difference between react-engine and template engines is only when the browser enables the user to interact with the browser page. Nevertheless, it is important how machines have access to individual data.

假设我们要运行一个简单的网页.只是一个滚动和打开文本的信息.使用模板引擎，例如 Handlebars.js ，通常，当浏览器请求到达服务器时，它会尝试找出原因如何应对和怎么做.就是说，模板引擎可以引用从存储到本地和可访问源中的文件中获取的现有数据.这些正在加载与网站模板文件有关的所有已定义数据( ie head，meta，title等)，并且呈现了不完整的 HTML 细绳.然后，该 HTML 被发送回浏览器并呈现.

Assuming we want to run a simple webpage. Just a scrolling and open text information. Using template engines, like Handlebars.js, typically, when the browser request hits to the server, it tries to figure it out how to respond and what to do. That said, the template engine may reference existing fetched data from files stored into a local and accessible source. Those are loading all the defined data regarding the site template file (i.e. head, meta, title, etc.), with a render of incomplete HTML string. This HTML is then sent back to the Browser and rendered.

react-engine ，在同一面，它使用了相同的呈现机制.但是，它使用 JSX 代替模板引擎语义，或者如果需要，我们也可以使用 JavaScript .因此， JSX 比模板引擎更广泛. Hajime Yamasaki Vukelic 的一篇很棒的文章，从

The react-engine, on the same side it happens the use of the same rendering mechanism. However, instead of a template engine semantic, it uses JSX, or if we want, we can also use JavaScript. The JSX is, therefore, broader then template engines. A great article by Hajime Yamasaki Vukelic complies the separation of concerns from a different angle between JSX and HTML templates.

使用模板引擎，您可以向库提供一个字符串(通常但不 必要的HTML)，然后将其转换为一段JavaScript 执行时生成虚拟DOM结构的代码.在设计时 时间，模板只是字符串，因此我们无法直接访问 周围的代码.例如，我们无法导入助手功能， 或调用方法.这些事情只有通过抽象才能实现 称为指令(可能还有其他名称，具体取决于您所在的位置) 来自(哪里).指令是HTML和 JavaScript.

With template engines, you feed the library a string (usually but not necessarily HTML), which is then converted into a piece of JavaScript code which generates virtual DOM structures when executed. At design time, templates are just strings, so we don’t have direct access to the surrounding code. For instance, we can’t import helper functions, or call methods. These things are only possible through abstractions called directives (and possibly other names depending on where you are coming from). Directives are the glue between the HTML and the JavaScript.

到目前为止，两种解决方案之间都没有相关的区别.指向下一个或上一个简单网页的链接只是简单的<a href="/webpage>Next</a>元素.

So far so good, there is no relevant difference between both solutions. Links to next or previous simple webpage are just simple <a href="/webpage>Next</a> elements.

此刻，当我们决定实现一些交互时， react-engine 将是优胜者.虽然 react-engine 渲染不需要JavaScript在客户端运行，但它将启用 SEO .

At the moment, when we decide to implement some interactions, react-engine will be the winner. While react-engine rendering does not require JavaScript to run on the client side, it will enable SEO over the search.

模板引擎也具有此 SEO 支持，但影响较小.我们无法在此处全部运行JavaScript来呈现 HTML .甚至像jQuery这样的库也要求对浏览器窗口对象进行实时访问，而这在服务器端无法轻易模拟.因此，模板引擎的生产率降低了.

Template engines also have this SEO support, but with less impact. We can not run here all JavaScript to render HTML. Even libraries like jQuery require live access to the browser window object which cannot be mocked easily on the server side. So template engines become less productive.

最后，模板引擎可以与 react-engine 渲染相同.也许不那么容易或不那么快，但是这两种工具都是合格的.您还可以阅读关于此主题的另一个很棒的线程.

In conclusion, template engines can do the same as react-engine rendering. Maybe not equally easy or equally fast but both tools are qualified. You can also read another great thread on this topic.

这篇关于react-engine与其他模板引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！