開發AEM的SPA

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

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

注意

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

AEM的SPA開發原則

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

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

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

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

可移植性

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

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

AEM Drives Site Structure

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

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

動態演算

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

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

動態路由

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

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

AEM Project Archetype

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

SPA設計型號

如果遵循在AEM](/docs/experience-manager-65/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-65/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文章。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now