開發SPA for AEM

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

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

注意

若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的解決方案。

SPA的AEM開發原則

在AEM上開發單頁應用程式時,會假設前端開發人員在建立SPA時遵守標準最佳實務。 如果您是前端開發人員,請遵循這些一般最佳實務以及幾項AEM專屬原則,您的SPA將可搭配AEM及其內容製作功能運作。

  • 可移植性 - 如同任何元件,元件應盡可能便攜。SPA應使用可移植且可重複使用的元件來建立。
  • AEM推動網站結構 — 前端開發人員建立元件並擁有其內部結構,但需仰賴AEM定義網站的內容結構。
  • 動態呈現 — 所有呈現應為動態。
  • 動態路由 - SPA負責路由,AEM會監聽路由並據此擷取。任何路由都應是動態的。

在開發SPA時,如果您應牢記這些原則,則在啟用所有支援的AEM製作功能時,將盡可能提供靈活且未來的驗證。

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

便攜性

與開發任何元件時一樣,您的元件的設計方式應最大限度地提高其可移植性。 任何與元件的可移植性或可重用性相抵觸的模式都應避免,以確保將來的相容性、靈活性和可維護性。

產生的SPA應包含高度可攜帶且可重複使用的元件。

AEM驅動器站點結構

前端開發人員必須自認為負責建立用於建立應用程式的SPA元件程式庫。 前端顯影劑對元件的內部結構具有完全控制。 但AEM隨時擁有網站的結構。

這表示前端開發人員可以在元件入口點之前或之後新增客戶內容,也可以在元件內進行第三方呼叫。 不過,前端開發人員無法完全控制元件的巢狀內嵌方式。

動態呈現

SPA應僅依賴內容的動態轉譯。 這是AEM擷取並轉譯內容結構的所有子項的預設期望。🔗

任何指向特定內容的明確轉譯都視為靜態轉譯,雖然受支援,但與AEM內容製作功能不相容。 這也與portability的原則相悖。

動態路由

與呈現一樣,所有路由也應是動態的。 在AEM中,SPA應一律擁有路由,並監聽路由,並據此擷取內容。

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

AEM 專案原型

任何AEM專案都應運用AEM專案原型,這可支援使用React或Angular的SPA專案,並運用SPA SDK。

SPA設計模型

如果遵循在AEM中開發SPA的原則,則您的SPA將可搭配所有支援的AEM內容製作功能運作。 🔗

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

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

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

如果代碼包含靜態引用或路由,則該代碼既不可移植,也不可重複使用。

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

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

內容作者受限於一組有限的AEM內容製作體驗。

如果代碼包含靜態引用或路由,則該代碼可能不可移植或不可重複使用。

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

專案會充分運用SPA Editor SDK,而前端元件會開發為程式庫,且應用程式的內容結構會委派給AEM。

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

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

SPA與範本編輯器相容。

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

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

注意

雖然AEM支援所有模型,但只有實作第三個模型(並因此遵循AEM🔗中建議的SPA開發原則),內容作者才能按照慣用方式與AEM中的SPA內容互動及編輯。
🔗

將現有SPA移轉至AEM

一般而言,如果您的SPA遵循AEM的SPA開發原則,則您的SPA將可在AEM中運作,且可使用AEM SPA編輯器編輯。

請依照下列步驟操作,讓現有的SPA準備好搭配AEM使用。

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

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

  2. 使用SDK提供的容器,將元件放在畫面上。

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

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

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

前端開發人員的說明

讓前端開發人員建立SPA for AEM的主要任務是同意元件及其JSON模型。

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

  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()

    此參數是必要的,用於告知編輯器,在尚未呈現或沒有要呈現的內容時,應如何命名元件。

  6. 擴展為頁 Container 面和容器提供的類

    頁面和段落系統應擴展此類,以使對內部元件的委派能夠正常工作。

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

    啟用ModelRouter後,呼叫pushStatereplaceState函式將觸發向PageModelManager提出的請求,以擷取模型的遺漏片段。

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

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

AEM-Agnostic

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

  • JavaScript元件內的所有項目均可在AEM中知曉。
  • 但AEM的特定功能是,JS元件必須透過MapTo協助程式對應至AEM元件。

screen_shot_2018-12-11at144019

MapTo幫助程式是允許後端和前端元件一起匹配的「膠水」:

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

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

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,讓應用程式可建置頁面的DOM,包含cq-data屬性。
    5. cq-data屬性可讓編輯器載入其他頁面資訊,以便知道元件有哪些編輯設定可用。
  • AEM 發佈

    這是發佈製作內容和已編譯程式庫(包括SPA應用程式成品、clientlib和元件)以供公眾使用的地方。

  • Dispatcher / CDN

    Dispatcher可作為網站訪客的AEM快取層。

    • 處理請求的方式與AEM作者上的相似,不過不會要求頁面資訊,因為編輯器只需要這項資訊。
    • 系統會快取Javascript、CSS、JSON和HTML,最佳化頁面以快速傳送。
注意

在AEM內,不需要執行Javascript建置機制或執行Javascript本身。 AEM只會托管SPA應用程式中已編譯的成品。

後續步驟

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

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

有關動態模型到元件映射及其在AEM中在SPA內如何運作的詳細資訊,請參閱文章SPA的動態模型到元件映射

若您想在AEM中針對React或Angular以外的架構實作SPA,或只想深入探討SPA SDK for AEM的運作方式,請參閱SPA Blueprint文章。

本頁內容