如何使用AEM建立單頁應用程式(SPA)

AEM無頭開發者歷程的這個選用延續中,您了解AEM如何將無頭傳送與傳統全堆疊CMS功能結合,以及如何使用AEM SPA編輯器架構建立可編輯的SPA,以及整合外部SPA,以視需要啟用編輯功能。

迄今為止的故事

此時,您應已完成整個AEM無頭開發人員歷程,並了解AEM中無頭傳送的基本知識,包括了解:

  • 無頭式內容傳送與無頭式內容傳送之間的差異。
  • AEM無頭功能。
  • 如何組織及AEM Headless專案。
  • 如何在AEM中建立無頭式內容。
  • 如何在AEM中擷取和更新無標題內容。
  • 如何與AEM Headless專案同時執行。

因此,您現在要麼已上線使用您的第一個AEM Headless專案,要麼已具備完成該專案所需的所有知識。 恭喜!

那麼,為什麼您要閱讀這個額外的、可選的歷程延續? 您可能記得,在快速入門中,我們簡要地討論了AEM如何不僅支援無頭式傳送和傳統的完整堆棧模型,而且還支援結合兩者優點的混合模型。 雖然這種混合模式不是傳統的無頭模式,但可以為某些項目提供前所未有的靈活性。

本文以您對AEM Headless的了解為基礎,深入探討如何建立您自己的單頁應用程式(SPA),而這些應用程式實際上可在AEM中編輯。 如此一來,您就可以建立內容,並無頭地傳送至SPA,但SPA在AEM中仍可編輯。

目標

本檔案可協助您了解如何使用AEM SPA Editor架構開發單頁應用程式。 閱讀本檔案後,您應:

  • 了解SPA編輯器的基本功能。
  • 了解針對AEM建立可完全編輯的SPA的需求。
  • 了解如何將外部SPA整合至AEM。
  • 了解應該或不應該如何實作伺服器端轉譯。

要求與必要條件

開始使用AEM中的SPA之前,有許多需求。

知識

  • 使用React或React架構建立SPA的開發Angular
  • 基本AEM技能建立內容片段及使用編輯器
  • 請務必檢閱AEM🔗中的檔案Headful和Headless,以了解可能的SPA整合層級。

工具

  • 測試部署專案的沙箱存取權
  • 用於資料建模和測試的本地開發實例
  • 現有外部SPA(選用,視選擇的整合模型而定)
  • AEM 專案原型

什麼是SPA?

單頁應用程式(SPA)與傳統頁面不同,前者是在用戶端轉譯,主要是Javascript導向,需仰賴Ajax呼叫來載入資料並動態更新頁面。 根據使用者與頁面的互動,大部分或所有內容在單一頁面載入中會擷取一次,並視需要以非同步方式載入其他資源。

這可減少頁面重新整理的需求,並為使用者呈現流暢、快速的體驗,且感覺更像原生應用程式體驗。

AEM SPA編輯器可讓前端開發人員建立可整合至AEM網站的SPA,讓內容作者可像編輯任何其他AEM內容一樣輕鬆編輯SPA內容。

為什麼是SPA?

SPA更像原生應用程式,更加快速、流暢,不僅對網頁的訪客,而且由於SPA的運作方式,對行銷人員和開發人員而言,都成為極具吸引力的體驗。

如需SPA的完整說明及其使用原因,請參閱其他資源區段,以取得更多部門內檔案的連結。

AEM如何處理SPA

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

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

如需AEM如何處理SPA的完整說明,請參閱其他資源區段,取得更多部門內檔案的連結。

AEM SPA編輯器

使用通用SPA架構(例如React和Angular)建置的網站會透過動態JSON載入其內容,不提供AEM頁面編輯器必須的HTML結構,才能放置編輯控制項。

若要啟用AEM內的SPA編輯功能,需要SPA的JSON輸出與AEM存放庫中的內容模型之間的對應,才能儲存內容的變更。

AEM中的SPA支援導入了精簡JS層,當載入頁面編輯器時,此層會與SPA JS程式碼互動,以便傳送事件,並啟用編輯控制項的位置以允許內容內編輯。 此功能以「內容服務API端點」概念為基礎,因為SPA的內容需透過「內容服務」載入。

如需AEM SPA編輯器的完整說明,請參閱其他資源區段,取得更多部門內檔案的連結。

調整現有SPA

如果您已有SPA,AEM支援將其內嵌至AEM,讓內容作者可在AEM編輯器中看到它。 在使用內容片段的最終應用程式內容中,若要檢視這些片段所建立的內容,這個功能會相當實用。

此外,只要進行小幅變更,您就可以在AEM編輯器中對外部SPA啟用特定編輯功能。

RemotePage元件允許在AEM中轉譯外部SPA。

如需如何讓外部SPA在AEM中可編輯的完整說明,請參閱其他資源區段,以取得更多部門內檔案的連結。

下一步是什麼

若要開始開發自己的SPA for AEM,請檢閱下列檔案:

如果您需要調整現有SPA以在AEM中使用,請檢閱下列檔案:

請參閱下方的其他資源,協助您深入了解AEM中的SPA主題。

其他資源

以下是一些額外資源,可深入探討本檔案中提及的一些概念。

本頁內容