單頁應用程式 (SPA) 可為網站使用者提供引人入勝的體驗。開發人員希望能使用 SPA 框架建立網站,而作者則想在 AEM 中為使用這類框架建立網站,順暢地編輯內容。
本文提出在請前端開發人員開發SPA for AEM時應考慮的重要問題,並概述AEM在AEM上部署的架構。
單頁應用程式(SPA)編輯器功能需要AEM 6.4 service pack 2或更新版本。
若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的解決方案。
任何 AEM 專案都應利用 AEM 專案原型,它支援使用 React 或 Angular 的 SPA 專案並利用 SPA SDK。
在 AEM 開發單頁應用程式是假設前端開發人員在建立 SPA 時有遵守標準最佳做法。若您是前端開發人員,請遵循這些一般最佳實務以及幾項AEM專屬原則,您的SPA將可與 AEM及其內容製作功能.
在開發SPA時,如果您應牢記這些原則,在啟用所有支援的AEM製作功能時,將盡可能提供靈活且未來的驗證。
如果您不需要支援AEM製作功能,則可能需要考慮不同的功能 SPA設計模型.
與開發任何元件時一樣,您的元件的設計方式應最大限度地提高其可移植性。 任何與元件的可移植性或可重用性相抵觸的模式都應避免,以確保將來的相容性、靈活性和可維護性。
開發人員應避免使用參照內容結構的靜態路徑,因為內容作者可隨時修改路徑。 這也會限製程式庫的可重複使用性,並且會防止使用AEM範本編輯器,因為其結構位於內容以外的其他位置。
產生的SPA應包含高度可攜帶且可重複使用的元件。
前端開發人員必須自認為負責建立用於建立應用程式的SPA元件程式庫。 前端顯影劑對元件的內部結構具有完全控制。 但AEM隨時擁有網站的結構。
這表示前端開發人員可以在元件入口點之前或之後新增客戶內容,也可以在元件內進行第三方呼叫。 不過,前端開發人員無法完全控制元件的巢狀內嵌方式。
SPA應僅依賴內容的動態轉譯。 這是AEM擷取並轉譯內容結構的所有子項的預設期望。
任何指向特定內容的明確轉譯都視為靜態轉譯,雖然受支援,但與AEM內容製作功能不相容。 這也違反了 可攜性.
與呈現一樣,所有路由也應是動態的。 在AEM中, SPA應始終擁有路由 而AEM會監聽它,並據此擷取內容。
任何靜態路由都適用於 可移植性原則 並因與AEM的內容製作功能不相容而限製作者。 例如,使用靜態路由時,如果內容作者想要變更路由或變更頁面,則必須要求前端開發人員執行此動作。
若 在AEM中開發SPA的原則 ,您的SPA將可搭配所有支援的AEM內容製作功能運作。
然而,在某些情況下,這並非完全必要。 下表概述了各種設計模型、其優點和缺點。
設計模型 |
優點 | 缺點 |
---|---|---|
AEM可作為無頭式CMS使用,而不使用 SPA Editor SDK架構。 | 前端開發人員可完全控制應用程式。 | 內容作者無法運用AEM內容製作體驗。 如果代碼包含靜態引用或路由,則該代碼既不可移植,也不可重複使用。 不允許使用範本編輯器,因此前端開發人員必須透過JCR維護可編輯的範本。 |
前端開發人員使用SPA Editor SDK架構,但只會向內容作者開啟部分區域。 | 開發人員只會在應用程式的限制區域中啟用編寫功能,即可控制應用程式。 | 內容作者受限於一組有限的AEM內容製作體驗。 如果代碼包含靜態引用或路由,則該代碼可能不可移植或不可重複使用。 不允許使用範本編輯器,因此前端開發人員必須透過JCR維護可編輯的範本。 |
專案會充分運用SPA Editor SDK,而前端元件會開發為程式庫,且應用程式的內容結構會委派給AEM。 | 應用程式可重複使用且可攜帶。 內容作者可使用AEM內容製作體驗來編輯應用程式。 SPA與範本編輯器相容。 |
開發人員無法控制應用程式的結構和委派給AEM的內容部分。 開發人員仍可針對不想使用AEM製作的內容,保留應用程式的區域。 |
雖然AEM支援所有模型,但只有實作第三個模型(並因此遵循建議 SPA在AEM中的開發原則),內容作者就能像習慣一樣與AEM中的SPA內容互動及編輯。
一般而言,如果您的SPA遵循 SPA的AEM開發原則,您的SPA將可在AEM中運作,且可使用AEM SPA編輯器編輯。
請依照下列步驟操作,讓現有的SPA準備好搭配AEM使用。
將JS元件設為模組化。
使它們能夠按任意順序、位置和大小呈現。
使用SDK提供的容器,將元件放在畫面上。
AEM提供頁面和段落系統元件供您使用。
為每個JS元件建立AEM元件。
AEM元件會定義對話方塊和JSON輸出。
讓前端開發人員建立SPA for AEM的主要任務是同意元件及其JSON模型。
以下概述前端開發人員在開發SPA for AEM時需遵循的步驟。
同意元件及其JSON模型
前端開發人員和後端AEM開發人員必須就哪些元件和模型達成一致,以便從SPA元件到後端元件進行一對一的比對。
AEM元件在提供編輯對話方塊和匯出元件模型時,仍大部分是必要的。
在React元件中,透過this.props.cqModel
一旦同意元件並建置JSON模型後,前端開發人員就可以免費開發SPA,並只需透過存取JSON模型即可 this.props.cqModel
.
實作元件的 render()
方法
前端開發人員會實施 render()
方法,並可使用 cqModel
屬性。 這會輸出DOM以及要插入頁面的HTML片段。 這是在React中建立應用程式的標準方式。
透過將元件對應至AEM資源類型MapTo()
映射儲存元件類,由提供的內部使用 Container
元件,以根據指定的資源類型來擷取元件並以動態方式具現化元件。
這是前端與後端之間的「膠水」,讓編輯器知道反應元件對應的元件。
此 Page
和 ResponsiveGrid
是擴展基礎的類的好示例 Container
.
定義元件的 EditConfig
作為參數MapTo()
此參數是必要的,用於告知編輯器,在尚未呈現或沒有要呈現的內容時,應如何命名元件。
擴充提供的 Container
頁面和容器類別
頁面和段落系統應擴展此類,以使對內部元件的委派能夠正常工作。
實作使用HTML5的路由解決方案 History
API。
當 ModelRouter
已啟用,請呼叫 pushState
和 replaceState
函式會觸發向 PageModelManager
來擷取模型的遺失片段。
的目前版本 ModelRouter
僅支援使用URL,指向Sling Model登入點的實際資源路徑。 不支援使用虛名URL或別名。
此 ModelRouter
可以停用或設定為忽略規則運算式清單。
這些程式碼區塊說明React和Angular元件如何不需要任何Adobe或AEM專用的項目。
此 MapTo
helper是「膠水」,可讓後端和前端元件相配:
如需使用的詳細資訊 MapTo
和一般建置SPA for AEM,請參閱所選架構的快速入門手冊。
使用SPA時,AEM的一般架構(包括開發、製作和發佈環境)不會變更。 不過,了解SPA開發如何融入此架構會很有幫助。
組建環境
這是簽出SPA應用程式源和元件源的源。
AEM 作者
內容是在AEM作者上建立,包括製作SPA。
在製作環境中使用SPA編輯器編輯SPA時:
cq-data
屬性。cq-data
屬性可讓編輯器載入其他頁面資訊,以便知道元件有哪些編輯設定可用。AEM 發佈
這是發佈製作內容和已編譯程式庫(包括SPA應用程式成品、clientlib和元件)以供公眾使用的地方。
Dispatcher / CDN
Dispatcher可作為網站訪客的AEM快取層。
在AEM內,不需要執行Javascript建置機制或執行Javascript本身。 AEM只會托管SPA應用程式中已編譯的成品。
如需AEM中簡單SPA的結構及運作方式的概觀,請參閱兩者的快速入門手冊 React 和 Angular.
如需建立自己的SPA的逐步指南,請參閱 AEM SPA Editor - WKND Events教學課程快速入門.
如需動態模型與元件對應,以及其在AEM中於SPA內如何運作的詳細資訊,請參閱文章 SPA的動態模型與元件對應.
若您想在AEM中針對React或Angular以外的架構實作SPA,或只想深入探討SPA SDK for AEM的運作方式,請參閱 SPA Blueprint 文章。