>同構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應用程序：
>
- > node.js and grunt安裝：>從官方網站安裝node.js，然後使用。
npm install -g grunt-cli>
項目依賴項：- 導航到您的項目目錄並運行>安裝rendr及其依賴項。
npm install> 啟動服務器： execute- 啟動開發服務器。 該應用程序將在>。 上訪問
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中文網其他相關文章！
