裝飾雙螺旋

AEM 和邊緣交付服務:將網絡帶回根源

不久前,建立網站非常簡單,就像一個文本文件和一個夢想。你寫了一些 HTML,在裡面撒了一些 CSS,如果你那天感到喜歡的話,也許會投入一點香草 JavaScript。瀏覽器做到了自己的事情,而且爆炸了-您有了一個網站。就是這樣一定是-這是您的 56k 連接能夠處理的所有內容。

然後來了高速互聯網和 V8-框架,構建工具,庫和無盡的抽象層都開始了。在包裝、轉檔和多重填充的旋風之中,互聯網遠離原來的簡單性,忘記了普通 HTML、CSS 和香草 JavaScript 的功能如何。

但最近,在使用 Adobe 的 Edge 傳遞服務和文件編寫時,我感覺到一些熟悉的事情,例如撥號上傳來的標誌性握手噪音。EDS 帶我回到網絡的根源:內容首先,由 HTML 驅動,由 CSS 設計,默認情況下快速。

這篇文章是關於這種感覺-記住 Web 是如何構建的。為什麼?因為在一個充滿的前端和過度複雜的堆疊的世界中,簡單性比以往任何時候都更重要。

早期網絡:直接,誠實,快速

早期網絡的簡單性很有美麗。您打開了一個文本編輯器,寫了一些 HTML,添加了一些內嵌 CSS,如果您需要互動,也許您添加了一個帶有一些香草 JS 的腳本標籤。這就是工作流程。沒有構建步驟。沒有部署。沒有依賴關係。您將其 FTP 傳送到服務器,您很好。

它有效。它很快。任何人都可以訪問它。它不會在較慢的機器上斷裂,也沒有載入 3MB 的縮小 JavaScript 僅僅為了渲染一段落。您可以「查看源代碼」並實際上學習一些東西。它是原始的-你寫的就是被渲染的。沒有魔法。沒有猜測。

開發人員擁有完全控制權,進入障礙很低。您不需要有關框架生命週期方法的 CS 學位或 20 部分的課程。您只需要一個瀏覽器,一個文本編輯器和一個想法。

當網絡變胖時

然後來了 Chrome 的 V8 引擎-隨之而,現代 JavaScript 復興。突然,JS 不只是一個玩具。它快速,強大,無處不在。一開始,感覺像是魔法... 但真的,我們剛剛剛打開潘多拉的盒子。

我們開始從泥土丘製作山脈。一個以前是幾個靜態文件的網站現在需要一堆依賴項,一個包裝程序,一個編譯器和一半的 RAM 才能釋放「Hello World」。npm 安裝成了一種儀式,不像您的護膚程序一樣。更像召喚一個破壞你和你的構造的惡魔。

我們在圖層上構建了圖層。用於管理我們的工具。一開始就從來沒有複雜的事物的抽象。前端世界變得沉迷於「應用程序」而不是文檔。在混亂中的某個地方,我們忘記了基礎知識:HTML 代表結構,CSS 代表樣式,JS 表示行為。

輸入 Adobe 文件編寫:只有內容

Adobe 的文檔編寫-老實說嗎?呼吸新鮮空氣。一眼看,看起來你只是在編輯 Word 文檔。那是因為... 你幾乎是它專為協作而打造,易於使用,易於學習。只需清潔的內容,任何人都可以輕鬆做出貢獻。

您正在編輯的文檔不只是坐在某個地方等待複製粘貼到 WordPress 中。它成為頁面。您在那裡寫的是傳遞到網絡的內容-沒有無頭的混亂,沒有反應到 JSON 對某些管道的降低。

以最好的方式來說,它是內容第一。您不需要設計自己的寫作方式-您只是寫作,而且單獨這個變化就是巨大的。這意味著您花更少的時間嘗試將系統粘合在一起,而且更多時間專注於實際重要的事情:信息。

EDS 實際上是什麼-以及它為什麼有效

Adobe Edge 交付服務(簡而言之,EDS;您可能已經看到這項服務是 Helix 專案或 Adobe 富蘭克林)感覺像是一個安靜的革命。在紙張上,聽起來幾乎太簡單:Adobe DA 文檔(或 Word,或 SharePoint 或 Google 文檔)中的內容,以表格和標題結構化,然後使用香草 JS 和 CSS 塊傳送到網絡。沒有構建工具。沒有部署指令碼。沒有複雜的 CMS 整合。只需編寫,保存並發貨即可。

不知怎麼... 這就是重點。

這是一種設置讓你停下來問:「等等,我們為什麼要複雜了這個問題?」

EDS 不是將所有內容轉換為應用程序,而不是將文檔轉換為網站,這是互聯網最初的運作方式。文件專注於內容。如果您需要配置或互動,則使用圖塊。每個區塊只是一塊邏輯(內容 + CSS + JS),它知道如何解釋文檔的結構並將其轉換為乾淨,高效的 HTML。如果您可以閱讀 Google 文檔並檢查表格,則可以找出區塊的運作方式。

更好的是,GitHub 上的所有代碼都是開源,開發工作流程是基於 Git 的,您可以使用 AEM Sidekick 等瀏覽器擴展實時查看任何區塊正在做什麼。它在所有重要的方面都是現代化的,而不會受到所有不同的東西負擔。

為什麼這實際上很重要

所有這些簡單性不僅僅是懷舊,而且實用。當您消除雜訊並專注於通過一些 CSS 和 JS 提供真正的 HTML 時,一切都會變得更好。

EDS 網站速度很快,比如,Lighthouse 得分速度很快,因為沒有一個充滿的 JS 框架來負擔任何事情。您正在發送 HTML,而不是僅僅為了顯示貓的圖片來啟動應用程序。

可訪問性和 SEO?它在那裡。清潔的 HTML 意味著屏幕閱讀器和搜索引擎實際了解您的內容。沒有黑客,沒有圈子。

開發人員經驗?我放學了大學因為鏈中深處的某些軟件包出了側面,您不會在上午 2 點進行調試配置或調試損壞的構建。你建立一個區塊。你給它造型。你碰到草

內容工作流程?讓他們烹飪。作者和編輯者使用他們已經知道的工具(Google 文件、Word 和 SharePoint)工作,並且他們的更新會上線。沒有守門。沒有「你能在那句子中添加空格嗎?」的 Jira 門票

簡而言之:它的構建速度更快,更容易維護,並且對所有參與者(從開發人員到作者到用戶)都更容易訪問。

回到未來

很容易認為進度意味著添加更多工具,更多圖層,更多的抽象。但有時候,您可以做的最好的事情就是將所有內容脫下來,並記住一開始使網絡出色的原因。

Adobe 文件編寫和 EDS 不僅使事情變得更加輕鬆,而且讓事情變得更清晰。它們再次為開發人員和內容創作者提供了一種共同的語言。它們提醒我們,HTML,CSS 和 JS-只是基本的-仍然非常強大。

也許這不是重新發明網絡。也許這是關於擺脫他的路

想深入瞭解邊緣交付服務?
瀏覽我們關於邊緣傳遞的文件編寫部落格,或聆聽我們在 YouTube 上的播客討論,探索它如何改變您的內容傳遞。

關於作者

弗蘭克·湯森

阿伯利數碼前端開發人員 & A/V 忍者

Frank 擁有強大的網站開發和設計背景。在加入 Arbory 之前,他在 InstantOrder 在設計和開發方面獲得了經驗,然後從事自由職業。Frank 熱衷於尋求新機會,轉移到 Arbory 數碼,在那裡他欣賞合作和活躍的氛圍。在工作之外,弗蘭克的興趣包括木工、攝影、錄影、農業、管理 Always Loretta Show 的旅行團以及其他副項目。

在 Linkedin 上與弗蘭克聯繫

播客劇集 & 博客文章

了解在 AEM 和邊緣交付服務上進行重定向的 6 種方法

重新導向是 Web 基礎架構的重要方面,尤其是在 Adobe 體驗管理員 (AEM) 和 Edge 交付服務等平台上管理內容時。現在有一個全新的無管線重定向選項,用於在 AEM/AEM Cloud Service 中進行 URL 重定向映射,現在是一個好時機來瀏覽所有可用的各種選項,因為它們都有自己的時間,地點和使用案例。

將舊版網站遷移到 Adobe 的邊緣傳遞服務

將網站遷移到 Adobe Edge 交付服務的時間可能需要比執行 AEM 移轉所需的時間很少。這是您的網站的正確方法嗎?

邊緣傳遞服務的文件編寫 (DA) 簡介
瞭解文件編寫或 " DA " (前稱為 " Project Dark Alley ")-Adobe 提供極快的邊緣交付原生的早期存取技術,用於管理、編輯和發佈基於邊緣傳遞服務的網站。