装饰双螺旋

AEM 和 Edge Delivery Services:让 Web 回归本源

不久前,建立网站非常简单,就像一个文本文件和一个梦想一样。您编写了一点 HTML,添加了一些 CSS,如果那天您觉得有趣的话,还可以添加一些原始的 JavaScript。浏览器完成了它的使命,然后轰隆一声,你就有了一个网站。就是这样。必须如此 - 这是你的 56k 连接所能处理的全部。

然后出现了高速互联网和 V8——框架、构建工具、库和无尽的抽象层都开始了。在捆绑、转译和 polyfill 的旋风中,互联网逐渐远离了其最初的简单性,忘记了纯 HTML、CSS 和原生 JavaScript 的强大功能。

但最近,在使用Adobe 的 Edge Delivery ServicesDocument Authoring时,我感觉到了一些熟悉的东西 - 就像拨号上网时发出的标志性握手噪音。EDS 让我回归了网络的本源:内容第一、由 HTML 驱动、由 CSS 设置样式、默认速度快。

这篇文章就是关于这种感觉的——回忆网络是如何建立的。为什么?因为在一个前端臃肿、堆栈过于复杂的世界里,简单性比以往任何时候都更重要。

早期网络:直截了当、诚实、快速

早期网络的简单易懂很有美感。您打开一个文本编辑器,编写了一些 HTML,添加了一些内联 CSS,如果您需要交互性,也许您会在脚本标签中添加一些原始 JS。这就是工作流程。沒有建置步驟。没有部署。无依赖关系。您通过 FTP 将其上传到服务器,一切就绪了。

它成功了。很快。任何人都可以访问它。它不会在较慢的机器上崩溃,也不会为了呈现一个段落而加载 3MB 的缩小版 JavaScript。您可以“查看源代码”并真正学到一些东西。它是原始的——你所写的内容就是所呈现的内容。没有魔法。无需猜测。

开发人员拥有完全的控制权,并且进入门槛很低。您不需要计算机科学学位或有关框架生命周期方法的 20 部分课程。您只需要一个浏览器、一个文本编辑器和一个想法。

当网络变得臃肿时

随后 Chrome 的 V8 引擎诞生了,随之而来的是现代 JavaScript 的复兴。突然间,JS 不再只是一个玩具。它速度快、功能强大、而且无处不在。一开始,感觉就像魔术一样......但实际上,我们只是打开了潘多拉的盒子。

我们开始小题大做。一个曾经只有几个静态文件的网站现在需要一堆依赖项、一个捆绑器、一个编译器以及一半的 RAM 才能输出“Hello World”。npm install 成为一种仪式,而不像你的皮肤护理程序。更像是召唤一个恶魔来摧毁你和你的身体。

我们一层层地建造。管理我们的工具的工具。对原本就不复杂的事物进行抽象。前端世界开始痴迷于“应用程序”而不是文档。在混乱之中,我们忽视了基本原则:HTML 代表结构,CSS 代表样式,JS 代表行为。

进入 Adobe 文档创作:仅内容

Adobe 的文档创作- 说实话吗?呼吸一口新鲜空气。乍一看,您似乎只是在编辑 Word 文档。那是因为...你确实如此。它专为协作而构建,使用简单,易于学习。只需提供清晰的内容,方便任何人参与贡献。

您正在编辑的文档不仅仅是放在某个地方等待被复制粘贴到 WordPress 中。它变成了页面。你在那里写的内容将被传送到网络上 - 没有无头混乱,没有 markdown 到 React 到 JSON 到某些管道。

它以最佳方式实现内容优先。你不需要设计自己的写作方式——你只需写作,而且这种转变本身就具有巨大的意义。这意味着您可以花费更少的时间来尝试将系统粘合在一起,而将更多的时间集中在真正重要的事情上:信息。

EDS 究竟是什么?以及它的工作原理

Adobe Edge Delivery Services(简称 EDS;您可能已经看到它以 Project Helix 或 Adobe Franklin 的形式出现)感觉就像一场静悄悄的革命。从纸面上看,这听起来太简单了:Adobe DA 文档(或 Word、SharePoint 或 Google Docs)中的内容,以表格和标题为结构,然后使用原始 JS 和 CSS 块传送到网络。没有构建工具。没有部署脚本。无需复杂的 CMS 集成。只需编写、保存并发送。

不管怎样...这就是重点。

这种设置会让你停下来并问:“等等,我们为什么要把它复杂化?”

EDS 不会将所有内容都变成应用程序,而是将文档变成网站——就像互联网最初的运作方式一样。该文件侧重于内容。如果您需要布局或交互性,您可以使用块。每个块只是一段逻辑(内容 + CSS + JS),它知道如何解释文档的结构并将其转换为干净、高效的 HTML。如果您可以阅读 Google Doc 并检查表格,您就可以弄清楚块的工作原理。

更好的是,所有代码都是在 GitHub 上开源的,开发工作流程基于 Git,并且您可以使用 AEM Sidekick 等浏览器扩展实时查看任何块的操作。它在所有重要方面都体现了现代性,但又不受那些不重要的因素的拖累。

为什么这真的很重要

所有这些简单性不仅仅是怀旧,而且是实用的。当你消除噪音并专注于通过少量 CSS 和 JS 提供真正的 HTML 时,一切都会变得更好。

EDS 网站速度很快 - 就像 100 Lighthouse 评分一样快 - 因为没有臃肿的 JS 框架拖累它。您正在发送 HTML,而不是引导应用程序只是为了显示一张猫的图片。

可访问性和 SEO?都在里面。干净的 HTML 意味着屏幕阅读器和搜索引擎实际上理解您的内容。没有黑客就没有箍。

开发经验?我从大学辍学了。您不会因为链中深层的某个包出了问题而在凌晨 2 点争论配置或调试损坏的构建。你建造了一个街区。你来设计它。你触摸草。

内容工作流程?让他们做饭。作家和编辑使用他们熟悉的工具(Google Docs、Word、SharePoint)进行工作,并且他们的更新可以上线。沒有把守門戶。没有“你能在那句话里加个空格吗?”的 Jira 票

简而言之:构建速度更快、维护更轻松,并且所有相关人员(从开发人员到作者再到用户)都更容易访问。

回到未来

人们很容易认为进步意味着增加更多的工具、更多的层次、更多的抽象。但有时,您能做的最好的事情就是回顾一切,并回忆一下最初是什么让网络变得伟大。

Adobe Document Authoring 和 EDS 不仅使事情变得更容易,还使事情变得更清晰。它们再次为开发人员和内容创建者提供了通用语言。它们提醒我们,HTML、CSS 和 JS——只是基础知识——仍然非常强大。

或许这并不是关于重新发明网络。也许是为了避开它。

想要深入了解边缘交付服务吗?
请查看我们关于边缘交付文档创作的博客在 YouTube 上收听我们的播客讨论,了解它如何改变您的内容交付方式。

关于作者

弗兰克·汤森

Arbory Digital 的前端开发人员和 A/V Ninja

弗兰克拥有强大的网站开发和设计背景。在加入 Arbory 之前,他在 InstantOrder 从事设计和开发工作,积累了丰富的经验,之后从事自由职业。弗兰克渴望获得新的机会,因此转到了 Arbory Digital,他很欣赏这里的协作和活力氛围。工作之余,弗兰克的爱好包括木工、摄影、摄像、农业、管理 Always Loretta Show 的巡演以及其他副业。

在 Linkedin 上联系 Frank

播客节目和博客文章

了解在 AEM 和 Edge Delivery Services 上进行重定向的 6 种方法

重定向是 Web 基础设施的一个重要方面,尤其是在 Adobe Experience Manager (AEM) 和 Edge Delivery Services 等平台上管理内容时。现在,AEM/AEM Cloud Service 中有一个用于执行 URL 重定向映射的全新无管道重定向选项,现在是时候仔细研究您可以使用的所有各种选项了,因为它们都有自己的时间、地点和用例。

将旧版网站迁移到 Adobe Edge 交付服务

将站点迁移到 Adobe 的 Edge Delivery Services 所需的时间可能只是 AEM 迁移所需时间的一小部分。对于您的网站来说,这种方法正确吗?

边缘交付服务的文档创作 (DA) 简介
了解文档创作或“DA”(以前称为“Project Dark Alley”) - Adobe 推出的一项速度超快、Edge Delivery 原生、早期访问技术,用于基于 Edge Delivery Services 管理、编辑和发布网站。