開發AEM的SPA

單頁應用程式(SPA)可為網站使用者提供引人入勝的體驗。 開發人員希望能夠使用SPA架構建立網站,而作者則想在AEM中順暢地編輯內容,以供使用此類架構建立的網站使用。

本文提出在與前端開發人員接洽以開發AEM的SPA時應考慮的重要問題,並概述AEM在AEM上部署SPA的架構。

注意

「單頁應用程式(SPA)編輯器」功能需要AEM 6.4 Service Pack 2或更新版本。

SPA編輯器是建議的解決方案,適用於需要以SPA架構為基礎的用戶端轉換(例如React或Angular)的專案。

AEM Project Archetype

任何AEM專案都應運用AEM Project Archetype,它支援使用React或Angular的SPA專案,並運用SPA SDK。

AEM的SPA開發原則

在AEM上開發單頁應用程式時,前端開發人員在建立SPA時會遵循標準最佳實務。 如果您是前端開發人員,除了遵循這些一般最佳實務以及少數AEM特定原則外,您的SPA將能與AEM及其內容製作功能搭配運作。

  • 可移植性 - 與任何元件一樣,元件應盡可能便攜。SPA應使用可攜式和可重複使用的元件來建立,以避免參照內容結構的靜態路徑。
  • AEM Drives Site Structure —— 前端開發人員會建立元件並擁有其內部結構,但需仰賴AEM來定義網站的內容結構。
  • 動態演算 -全 部演算應為動態演算。
  • 動態路由 - SPA負責路由,AEM會監聽路由並根據它擷取元件資料。任何路由都應是動態的。

如果您在開發SPA時牢記這些原則,將盡可能有彈性,並且能提供未來最佳證明,同時啟用所有支援的AEM製作功能。

如果您不需要支援AEM製作功能,則可能需要考慮不同的SPA設計模型

可移植性

與開發任何元件時一樣,您的元件的設計方式應能最大化其可移植性。 任何不利於元件可移植性或可重複使用性的模式都應避免,以確保未來的相容性、彈性和可維護性。

開發人員應避免使用參照內容結構的靜態路徑,因為內容作者可隨時修改路徑。 這也會限製程式庫的可重複使用性,而且會防止使用AEM範本編輯器,因為其結構位於內容以外的其他位置。

產生的SPA應使用高度可攜式和可重複使用的元件來建立。

AEM Drives Site Structure

前端開發人員必須認為自己負責建立用來建立應用程式的SPA元件庫。 前端顯影器可完全控制元件的內部結構。 不過,AEM隨時擁有網站的結構。

這表示前端開發人員可在元件入口點之前或之後新增客戶內容,也可在元件內進行協力廠商呼叫。 不過,例如,前端開發人員無法完全控制元件的巢狀結構。

動態演算

SPA只應仰賴動態轉換內容。 這是AEM擷取和轉譯內容結構所有子系的預設期望值。

任何指向特定內容的明確轉譯都會視為靜態轉譯,雖然支援此功能,但將不相容於AEM的內容製作功能。 這也違反了可移植性的原則。

動態路由

與渲染一樣,所有路由都應是動態的。 在AEM中,SPA應始終擁有路由,AEM會監聽路由並根據路由提取內容。

任何靜態路由都與可攜性原則相抵觸,而且與AEM的內容製作功能不相容,因而限制了作者。 例如,使用靜態路由時,如果內容作者想要變更路由或變更頁面,則必須要求前端開發人員完成。

SPA設計型號

如果遵循在AEM](/docs/experience-manager-64/developing/headless/spas/spa-architecture.html?lang=zh-Hant#spa-development-principles-for-aem)中開發SPA的[原則,則您的SPA將能與所有支援的AEM內容製作功能搭配運作。

然而,在某些情況下,這並非完全必要。 下表概述了各種設計模型、它們的優點和缺點。

設計模型
優勢 缺點
AEM可當成無頭CMS,而不使用SPA Editor SDK架構。 前端開發人員可完全控制應用程式。

內容製作者無法運用AEM的內容製作體驗。

如果程式碼包含靜態參考或路由,則程式碼既不可攜式,也不可重複使用。

不允許使用範本編輯器,因此前端開發人員必須透過JCR維護可編輯的範本。

前端開發人員使用SPA Editor SDK架構,但只會為內容作者開啟部分區域。 開發人員只要在應用程式的限制區域啟用編寫功能,就能控制應用程式。

內容作者只能使用AEM的一組有限的內容製作體驗。

如果程式碼包含靜態參照或路由,則程式碼既不可攜式,也不可重複使用。

不允許使用範本編輯器,因此前端開發人員必須透過JCR維護可編輯的範本。

專案完全運用SPA編輯器SDK,而前端元件則開發為程式庫,而應用程式的內容結構則委派給AEM。

應用程式可重複使用且可攜式。

內容作者可以使用AEM的內容製作體驗來編輯應用程式。

SPA與範本編輯器相容。

開發人員無法控制應用程式的結構以及委派給AEM的內容部分。

開發人員仍可針對非使用AEM製作的內容保留應用程式的區域。

注意

雖然AEM支援所有模型,但只有實作第三個模型(並因此遵循AEM](/docs/experience-manager-64/developing/headless/spas/spa-architecture.html?lang=zh-Hant#spa-development-principles-for-aem)中建議的[SPA開發原則),內容作者才能與AEM中的SPA內容互動並加以編輯,就像他們習慣的一樣。

將現有SPA移轉至AEM

一般而言,如果您的SPA遵循SPA Development Pricens for AEM,則您的SPA將可在AEM中運作,並可使用AEM SPA編輯器進行編輯。

請依照下列步驟,讓您現有的SPA準備好與AEM搭配運作。

  1. 將您的JS元件設為模組化。

    使它們能夠以任何順序、位置和大小呈現。

  2. 使用我們SDK提供的容器,將您的元件置於螢幕上。

    AEM提供頁面和段落系統元件供您使用。

  3. 為每個JS元件建立AEM元件。

    AEM元件會定義對話方塊和JSON輸出。

前端開發人員的指示

招募前端開發人員以建立AEM的SPA時,主要的工作是同意元件及其JSON模型。

以下是前端開發人員在開發AEM的SPA時需要遵循的步驟概要。

  1. 同意元件及其JSON模型

    前端開發人員和後端AEM開發人員需要就哪些元件是必要的以及模型達成一致,以便從SPA元件到後端元件進行一對一的比對。

    AEM元件在提供編輯對話方塊和匯出元件模型時,仍然很有必要。

  2. 在React元件中,透過this.props.cqModel

    在同意元件並建立JSON模型後,前端開發人員就可免費開發SPA,而且只需透過this.props.cqModel存取JSON模型。

  3. 實作元件的方 render()

    前端開發人員會依他/她所認為的適當方式實作render()方法,並可使用cqModel屬性的欄位。 這會輸出將插入頁面的DOM和HTML片段。 這是在React中建立應用程式的標準方式。

  4. 將元件對應至AEM資源類型(透過MapTo()

    映射儲存元件類,並由提供的Container元件內部使用,以基於給定資源類型檢索和動態實例化元件。

    這是前端與後端之間的「黏合劑」,讓編輯者知道反應元件對應的元件。

    PageResponsiveGrid是擴展基Container的類的好示例。

  5. 將元件定義 EditConfig 為參數MapTo()

    此參數是必要的,以告知編輯器,如何將元件命名為at,但尚未轉譯或沒有要轉譯的內容。

  6. 擴充提供的 Container 頁面和容器類別

    頁面和段落系統應擴充此類別,讓委派至內部元件如預期般運作。

  7. 實作使用HTML5 History API的路由選擇解決方案。

    啟用ModelRouter後,調用pushStatereplaceState函式將觸發向PageModelManager請求以提取模型的缺失片段。

    目前版本的ModelRouter僅支援使用指向Sling Model入口點實際資源路徑的URL。 它不支援使用虛名URL或別名。

    ModelRouter可以禁用或配置為忽略規則表達式清單。

AEM-Nubociated

這些程式碼區塊說明您的React和Angular元件不需要Adobe或AEM專用的元件。

  • JavaScript元件內的一切都與AEM無關。
  • 但AEM的特定功能是,JS元件必須與MapTo協助程式對應至AEM元件。

screen_shot_2018-12-11at144019

MapTo協助程式是「glue」,可讓後端和前端元件搭配使用:

  • 它會告訴JS容器(或JS段落系統)JS元件要負責轉譯JSON中每個元件。
  • 它會新增HTML資料屬性至JS元件轉譯的HTML,讓SPA編輯器知道在編輯元件時要向作者顯示哪些對話方塊。

如需一般使用MapTo和建立AEM SPA的詳細資訊,請參閱您所選架構的快速入門手冊。

AEM架構和SPA

使用SPA時,AEM的一般架構(包括開發、製作和發佈環境)不會變更。 不過,瞭解SPA開發如何與此架構整合,會有所幫助。

screen_shot_2018-12-11at145348

  • 構建環境

    這是檢出SPA應用程式源和元件源的源的位置。

    • NPM clientlib產生器會從SPA專案建立用戶端程式庫。
    • Maven將會擷取該程式庫,並由Maven Build外掛程式與AEM Author的元件一起部署。
  • AEM 作者

    內容是在AEM作者上建立,包括編寫SPA。

    在編寫環境中使用SPA編輯器編輯SPA時:

    1. SPA要求外部HTML。
    2. CSS已載入。
    3. 載入SPA應用程式的Javascript。
    4. 執行SPA應用程式時,會要求JSON,讓應用程式可建立包含cq-data屬性之頁面的DOM。
    5. cq-data屬性可讓編輯器載入其他頁面資訊,以便它知道哪些編輯組態可用於元件。
  • AEM 發佈

    在此處,編寫的內容和編譯庫(包括SPA應用程式對象、clientlibs和元件)將發佈供公共使用。

  • Dispatcher / CDN

    Dispatcher可當成AEM的快取層,供網站的訪客使用。

    • 處理請求的方式與在AEM Author上的方式類似,但是沒有請求頁面資訊,因為這只是編輯者需要的。
    • 快取Javascript、CSS、JSON和HTML,最佳化頁面以快速傳送。
注意

在AEM內部,不需要執行Javascript建立機制或執行Javascript本身。 AEM僅托管SPA應用程式中編譯的對象。

後續步驟

如需AEM中簡易SPA的結構及運作方式的概觀,請參閱ReactAngular的快速入門手冊。

如需建立您自己SPA的逐步指南,請參閱AEM SPA編輯器快速入門- WKND事件教學課程

如需動態模型至元件對應的詳細資訊,以及它在AEM中SPA中的運作方式,請參閱文章SPA的動態模型至元件對應

如果您想要在AEM中實作React或Angular以外的架構的SPA,或只想深入瞭解AEM的SPA SDK的運作方式,請參閱SPA Blueprint文章。

本頁內容