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中文網其他相關文章！