SPA簡介和逐步介紹

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

SPA Editor提供完整的解決方案,以支援AEM中的SPA。 本文逐步說明如何使用基本的SPA應用程式來製作內容,並說明它與基礎的AEM SPA編輯器有何關聯。

注意

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

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

簡介

文章目標

介紹了SPA的基本概念,並以簡單的SPA應用程式來演示基本內容編輯,引導讀者閱讀SPA編輯器的逐步介紹。 接著深入探討頁面的建構,以及SPA應用程式與AEM SPA編輯器的關聯與互動方式。

本簡介和逐步說明的目的,在於向AEM開發人員示範SPA的相關性、SPA的一般運作方式、AEM SPA編輯器如何處理SPA,以及它與標準AEM應用程式有何不同。

此逐步解說以標準AEM功能和範例We.Retail Journal應用程式為基礎。 必須符合下列要求:

注意

本檔案僅用於展示用途,使用We.Retail Journal應用程式。 它不應用於任何項目工作。

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

什麼是SPA?

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

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

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

為什麼選擇SPA?

SPA就像原生應用程式,不但對網頁的訪客,而且由於SPA的運作方式,對行銷人員和開發人員而言,都是極具吸引力的體驗。

screen_shot_2018-08-20at135550

訪客

  • 訪客在與內容互動時,需要類似原生的體驗。
  • 有清楚的資料顯示,頁面越快,轉換的可能性就越大。

行銷人員

  • 行銷人員想要提供豐富、原生的體驗,以吸引訪客充份參與內容。
  • 個人化可讓這些體驗更吸引人。

開發人員

  • 開發人員希望將內容與簡報之間的顧慮完全分開。
  • 清潔分離使系統更具可擴充性,並允許獨立的前端開發。

SPA如何運作?

SPA的主要思想是減少對伺服器的呼叫和依賴,以將伺服器呼叫所造成的延遲降至最低,讓SPA接近原生應用程式的回應速度。

在傳統的循序網頁中,只會載入立即頁面所需的資料。 這表示當訪客移至另一個頁面時,會呼叫伺服器以取得其他資源。 當訪客與頁面上的元素互動時,可能需要其他呼叫。 這些多次呼叫可能會延遲或延遲,因為頁面必須趕上訪客的要求。

screen_shot_2018-08-20at140449

為了提供更流暢的體驗,SPA會在第一次載入時載入訪客的所有必要資料,以接近訪客對行動裝置、原生應用程式的期望。 雖然這一步可能需要稍長的時間,但卻不需要額外的伺服器呼叫。

透過在用戶端上演算,頁面元素的反應更快,而訪客與頁面的互動也會立即生效。 可能需要的任何額外資料都會以非同步方式呼叫,以最大化頁面速度。

注意

如需SPA在AEM中運作的技術詳細資訊,請參閱「AEM中SPA快速入門」文章

如需詳細瞭解SPA編輯器的設計、架構和技術工作流程,請參閱SPA編輯器概述文章。

SPA的內容編輯體驗

當建立SPA以運用AEM SPA編輯器時,內容作者在編輯和建立內容時不會察覺任何差異。 共同的AEM功能可供使用,而且不需要變更作者的工作流程。

注意

此逐步解說以標準AEM功能和範例We.Retail Journal應用程式為基礎。 必須符合下列要求:

  1. 在AEM中編輯We.Retail Journal應用程式。

    http://localhost:4502/editor.html/content/we-retail-journal/react.html

    screen_shot_2018-06-07at142533

  2. 選取標題元件,並注意工具列會像其他元件一樣顯示。 選擇​編輯

    screen_shot_2018-06-07at142937

  3. 在AEM中編輯內容時,請注意這些變更會持續存在。

    screen_shot_2018-06-07at143419

    注意

    有關就地文本編輯器和SPA的詳細資訊,請參閱SPA編輯器概述

  4. 使用「資產瀏覽器」將新影像拖放至影像元件。

    screen_shot_2018-06-07at143530

  5. 此變更會持續存在。

    screen_shot_2018-06-07at143732

其他製作工具(例如在頁面上拖放其他元件、重新排列元件以及修改版面)都支援,就像任何非SPA應用程式一樣。

注意

SPA編輯器不會修改應用程式的DOM。 SPA本身負責DOM。

若要瞭解其運作方式,請繼續閱讀本文SPA應用程式和AEM SPA編輯器的下一節。

SPA應用程式和AEM SPA編輯器

體驗SPA對一般使用者的運作方式,然後檢查SPA頁面,有助於進一步瞭解SAP應用程式如何與AEM中的SPA編輯器搭配運作。

使用SPA應用程式

  1. 在發佈伺服器上或使用頁面編輯器中的「頁面資訊」選單中的「檢視為已發佈」選項​,載入We.Retail Journal應用程式。

    /content/we-retail-journal/react.html

    screen_shot_2018-06-08at102650

    請注意頁面結構,包括子頁面導覽、氣象工具集和文章。

  2. 使用功能表導覽至子頁面,並查看頁面會立即載入,而不需重新整理。

    screen_shot_2018-06-08at102815

  3. 當您導覽子頁面時,開啟瀏覽器的內建開發人員工具並監控網路活動。

    screen_shot_2018-06-08at103922

    當您在應用程式中從頁面移至頁面時,流量很少。 不會重新載入頁面,只會要求新影像。

    SPA完全在用戶端管理內容和路由。

因此,如果頁面在子頁面導覽時未重新載入,該頁面的載入方式為何?

下一節載入SPA應用程式深入探討載入SPA的機制,以及如何同步和非同步載入內容。

載入SPA應用程式

  1. 如果尚未載入,請在發佈伺服器上載入We.Retail Journal應用程式,或使用頁面編輯器中的​頁面資訊​菜單中的​查看為發佈​選項。

    /content/we-retail-journal/react.html

    screen_shot_2018-06-07at144736

  2. 使用瀏覽器的內建工具來檢視頁面來源。

  3. 請注意,來源的內容非常有限。

    <!DOCTYPE HTML>
    <html lang="en-CH">
        <head>
        <meta charset="UTF-8">
        <title>We.Retail Journal</title>
    
        <meta name="template" content="we-retail-react-template"/>
    
    <link rel="stylesheet" href="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.css?lang=zh-Hant" type="text/css">
    
    <link rel="stylesheet" href="/libs/wcm/foundation/components/page/responsive.css?lang=zh-Hant" type="text/css">
    
    </head>
        <body class="page basicpage">
    
    <div id="page"></div>
    
    <script type="text/javascript" src="/etc.clientlibs/we-retail-journal/react/clientlibs/we-retail-journal-react.js?lang=zh-Hant"></script>
    
        </body>
    </html>
    

    頁面的內文中沒有任何內容。 它主要由樣式表和對React指令碼we-retail-journal-react.js的調用組成。

    此React指令碼是此應用程式的主要驅動程式,負責轉譯所有內容。

  4. 使用瀏覽器的內建工具來檢查頁面。 檢視已完全載入的DOM內容。

    screen_shot_2018-06-07at151848

  5. 切換到「檢查器」中的「網路」頁籤並重新載入該頁。

    忽略影像要求時,請注意,載入頁面的主要資源是頁面本身、CSS、React Javascript、其相依性,以及頁面的JSON資料。

    screen_shot_2018-06-07at152155

  6. react.model.json載入新標籤中。

    /content/we-retail-journal/react.model.json

    screen_shot_2018-06-07at152636

    AEM SPA編輯器運用AEM Content Services將頁面的整個內容以JSON模型形式提供。

    透過實施特定介面,Sling Models提供SPA所需的資訊。 JSON資料的傳送會下放至每個元件(從頁面、段落、到元件等)。

    每個元件都會選擇它公開的內容及呈現方式(伺服器端與HTL或用戶端與React)。 當然,本文著重於使用React進行用戶端轉換。

  7. 模型也可將頁面群組在一起,以便同步載入,以減少所需的頁面重新載入次數。

    在We.Retail Journal的範例中,homeblogaboutus頁面會同步載入,因為訪客通常會瀏覽這些頁面。 但是,weather頁面會非同步載入,因為訪客不太可能造訪。

    此行為並非強制性,且完全可定義。

    screen_shot_2018-06-07at153945

  8. 要查看此行為差異,請重新載入頁面並清除檢查器的網路活動。 導覽至頁面功能表中的部落格和我們的頁面,並查看沒有報告任何網路活動。

    導覽至氣象頁面,並查看weather.model.json是非同步呼叫的。

    screen_shot_2018-06-07at155738

與SPA編輯器交互

使用範例We.Retail Journal應用程式,您就可清楚看出應用程式的運作方式和發佈時的載入方式,並運用內容服務來傳送JSON內容以及非同步載入資源。

此外,對於內容作者,使用SPA編輯器建立內容在AEM中十分順暢。

在下節中,我們將探索讓SPA編輯器將SPA中的元件與AEM元件建立關聯的合約,並獲得順暢的編輯體驗。

  1. 在編輯器中載入We.Retail Journal應用程式,並切換到​預覽​模式。

    http://localhost:4502/editor.html/content/we-retail-journal/react.html

  2. 使用瀏覽器的內建開發人員工具,檢查頁面內容。 使用選取工具,在頁面上選取可編輯的元件並檢視元素詳細資訊。

    請注意,此元件具有新的資料屬性data-cq-data-path

    screen_shot_2018-06-08at095124

    例如

    data-cq-data-path="root/responsivegrid/paragraph_1

    此路徑允許檢索和關聯每個元件的編輯上下文配置對象。

    這是編輯器將其識別為SPA中可編輯的元件所需的唯一標籤屬性。 根據此屬性,SPA編輯器將確定與元件關聯的可編輯配置,以便正確的框架、工具欄等。 已載入。

    此外,還新增了某些特定類別名稱,以標籤預留位置和資產拖放功能。

    注意

    這是AEM中伺服器端轉譯頁面的行為變更,其中每個可編輯元件都插入了cq元素。

    SPA中的此方法不需要插入自訂元素,只需額外的資料屬性,讓前端開發人員更容易進行標籤。

後續步驟

現在,您已瞭解AEM的SPA編輯體驗,以及SPA與SPA編輯器的關係,深入瞭解如何建立SPA。

  • AEM中的SPA快速入門 說明如何建立基本SPA以搭配AEM中的SPA編輯器運作
  • SPA編輯 器概觀深入探討AEM與SPA之間的通訊模型。
  • 開發AEM適用 的SPA說明如何吸引前端開發人員來開發AEM適用的SPA,以及SPA如何與AEM的架構互動。

本頁內容

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