Rendr简介

>同构JavaScript框架正在广受欢迎，从而可以创建在客户端和服务器上无缝运行的JavaScript应用程序。 这种“写一次，在任何地方运行”方法利用服务器端渲染，以便更快的初始页面加载和改进的客户端交互性。本文探讨了Airbnb的开源库Rendr，最初是为其backbone.js and node.js移动应用程序设计的。

> rendr的关键特征：>

• 同构渲染：rendr使用共享代码库在客户端和服务器上呈现backbone.js应用程序。 服务器端渲染在客户端JavaScript执行之前提供内容，从而获得更快的用户体验。
• node.js and grunt Integration：需要一个node.js服务器，并利用grunt，一个任务跑者，用于自动化诸如minification and Testing之类的任务。>
• >模块化结构： rendr应用程序通常包含组件，例如主页，用户视图，用户列表视图，repo视图和存储列表视图，每个列表视图，每个都有其自己的相关文件，用于模型，视图，控制器等。
backbone.js Foundation：
• 构建基于backbone.js，利用其模型，视图，集合和路由器进行应用程序结构和数据管理。
理解Rendr的功能：

Rendr的核心原则是使用相同的代码在服务器和客户端上启用Backbone.js应用程序的渲染。服务器上的此预渲染可显着加快初始页面加载时间。客户端框架加载后，backbone.js会管理后续路由。 Rendr不是一个成熟的框架；它的设计侧重于：

>环境 - 静态应用程序逻辑（最小化

块）。

>

>无缝恢复API相互作用。

• 图书馆复杂性的抽象。if (server) { ... } else { ... }
>服务器端DOM避免。
• 一个简单的rendr应用程序（github浏览器示例）：

>本文使用示例GitHub浏览器应用程序来说明Rendr的功能。此应用程序可在Rendr的示例存储库中提供，包括：

回购列表视图：

显示github存储库的列表。

> repo视图：
• 显示了选定存储库的详细信息。
>用户列表查看：
• 列表github用户。
用户视图：
• 呈现一个用户配置文件及其存储库。
设置rendr应用程序：

>

1. > node.js and grunt安装：>从官方网站安装node.js，然后使用。 npm install -g grunt-cli>
项目依赖项：
2. 导航到您的项目目录并运行>安装rendr及其依赖项。 npm install>
启动服务器： execute
3. 启动开发服务器。 该应用程序将在>。上访问 grunt server localhost:3030
应用程序结构：

样品应用程序的结构反映了标准的骨干。 它包括用于模型，视图，控制器，收集和模板的文件夹。每个文件夹都包含每个应用程序视图（主页，用户视图等）的文件。>

键组件：

：定义路由配置，将URL映射到控制器和操作（例如，
• ）。 routes.js>或match('', 'home#index')：
>初始化配置（例如，
• ，），启动服务器，并设置数据获取机制。index.js> server.js视图：dataAdapterConfig扩展backbone.js视图并处理渲染。 该示例显示了apiPath视图。
>
• >>模板：>使用模板引擎（例如，车把）定义HTML结构。 该示例显示了users_index.js模板。
>
• 控制器：处理路由逻辑和数据获取。 该示例用users/index.hbs>方法显示A
。
• >模型：扩展了用于数据表示的backbone.js模型，并从github api中获取（例如，users_controller.js）。index>
• 集合：扩展了backbone.js集合以管理模型集（例如，）。 user.js
• users.js结论：
Rendr提供了一种强大的方法来构建同构JavaScript应用程序。 尽管本文涵盖了基础知识，但对其GitHub存储库的进一步探索将揭示其全部潜力。 服务器端渲染和客户端交互性的组合提供了显着的性能和SEO优势。

> （注意：图像URL都不包括在原始输入中，并假定在实际的Markdown文件中正确链接并正确链接。我在输出中保留了占位符图像参考。

以上是Rendr简介的详细内容。更多信息请关注PHP中文网其他相关文章！