Web开发的未来

“组件应具备专注、独立、可重用、小巧和可测试的特点”

“如果你要构建的组件是要与社区甚至团队共享的，请问问自己，API 中的某些功能是否会被 90% 的用户使用。如果答案是肯定的，那么它很可能是核心功能，应该保留。如果某个功能只会被 10% 的用户使用，那么它最好是一个单独的组件或模块。避免代码臃肿。”

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

剧透：编写代码将会变得容易得多。

预测未来并非易事——在观察社会现象（而网络开发就是一种社会现象）时，人们很清楚，不能指望从当前事件到未来进行简单的线性预测。

收集数据和观察趋势总会遗漏一些事实和趋势，甚至可能包含一些本应忽略的无关数据。即便如此，做出有根据的推测或许比对未来漠不关心、置之不理更有益。

作为软件开发人员，我们有责任预测未来发展趋势，并据此提供长期解决方案。

Web开发作为一套技术、实践和机构的集合，主要由两股力量构成：硬件，更具体地说是消费电子设备，以及对经济利益永无止境的追求。在预测Web开发的未来时，对这两股力量的考察应当是我们的出发点。

消费设备种类日益丰富

近年来，我们看到了消费电子设备种类的爆炸式增长——智能手表、智能眼镜、智能音箱、智能电视、可折叠智能手机等等——在这个物联网时代，当一种新的“东西”戴上“智能”的帽子并加入其中时，我们几乎不会感到惊讶。

这对我们这些网页开发者来说意味着什么？设备种类的日益丰富意味着平台、输入输出类型和格式的日益多样化。过去那种一个网页应用（或网站）只能适配有限范围的设备，而且所有设备都配备方形大屏幕和网页浏览器的时代早已一去不复返了。

如果我们想要最大限度地提高网络应用的使用率，就必须提前规划，使其能够在种类繁多且难以预测的设备上运行。这意味着，我们需要在构建应用时就考虑到，既要能够轻松地针对任何现有设备进行定制，也要为未来的新技术做好准备。

网站开发成本太高了。

软件开发人员成本高昂。优秀的开发人员供不应求，而且需求还在不断增长。据预测，到2026年，仅在美国就将新增超过25.3万个软件开发人员职位。这意味着需要花费更多资金来支付高昂的劳动力成本。

目前，市场对此的反应较为有限。我们看到，面向低技能程序员或开发人员的拖放式低代码平台开始兴起。Google App Maker、Microsoft Power Apps 以及 Wix 等网页设计平台只是其中的几个例子。

显而易见，这些平台虽然不错，但远非解决问题的彻底方案，因为它们的功能过于有限，难以广泛应用。如果目前的趋势不改变，我们不仅会面临软件价格昂贵的问题，还可能看到不合格的开发人员编写出劣质代码，最终导致软件质量低下。

编写代码太难了

到目前为止，我们已经讨论了两个主要问题：

1. 设备种类日益繁多，要跟上它们的步伐变得越来越难。

2. 就像其他自然资源一样，我们的开发人员也越来越少了😃

这两个问题有着共同的根源——编写代码太难了！正因如此，才没有所谓的“代码技工”，只有工程师。每项工作都需要专家，每项任务都需要处理脆弱而晦涩的代码——即使对专家来说，这也是件令人畏惧的事。

展望基于 JavaScript 的 Web 开发的未来，我们面对的是一个丰富、复杂且快速变化的生态系统。因此，每项工作都需要掌握一系列广泛的工具、技术和架构。

为什么开发Web应用程序如此困难？

编写一个 Web 应用程序需要付出巨大的努力。需要考虑的因素太多了，每一个因素都可能导致整个应用程序的失败。正如 Peter Jang 在他精彩的博文《用通俗易懂的方式解释现代 JavaScript》中所写的那样：

“我们从纯 HTML 和 JS 过渡到使用包管理器自动下载第三方包，使用模块打包器创建单个脚本文件，使用转译器使用未来的 JavaScript 功能，以及使用任务运行器自动化构建过程的不同部分。”

如今，“组件”和“模块化”这两个词被频繁提及。对 Web 开发领域不熟悉的人可能会误以为现代 Web 应用就像乐高积木一样——由一个个独立的代码块组成，每个代码块都能独立运行，而且都很容易替换。

实际上，虽然我们的应用程序以模块化方式构建，但这种模块化仅限于表面。模块或组件依赖于其所在项目中的许多其他代码，依赖于项目的编译器，也依赖于项目的代码仓库。

在网页应用中移动组件——与其说是乐高积木，不如说是叠叠乐。

组件、组件、组件

朋友们，未来在于组件——真正的组件。正如前文所述，“组件”和“模块化”是Web开发领域备受推崇的概念。

到处都能找到这方面的证据，无论是 React 等组件驱动的前端框架的巨大成功，标准组件模型（又称“Web 组件”）的概念，为组件构建的工具的增长，微服务等后端架构的日益普及，向更模块化的存储库（如 Lerna）的转变，甚至是最近对函数式编程的重视。

在我们继续单方面讨论组件的种种优点之前，让我们先停下来片刻，明确一下组件的实际外观应该是什么样的。为此，我想引用Yeoman、TodoMVC 和 Material Design Lite 的作者Addy Osmani 的话：

“组件应具备专注、独立、可重用、小巧和可测试的特点”

和 -

“如果你要构建的组件是要与社区甚至团队共享的，请问问自己，API 中的某些功能是否会被 90% 的用户使用。如果答案是肯定的，那么它很可能是核心功能，应该保留。如果某个功能只会被 10% 的用户使用，那么它最好是一个单独的组件或模块。避免代码臃肿。”

太好了。既然我们已经解决了这个问题——让我们来看看编写组件化代码的所有好处：

组件易于共享和复用：这一点毋庸置疑。如果您以组件优先的理念编写代码，就能更轻松地在其他项目中复用代码，甚至可以与团队和社区成员共享。定义清晰、API明确且无副作用的组件使用起来非常方便。

组件化实现了关注点分离：将代码编写成组件，关注点分离就变得自然而然。每个组件负责一项任务或功能。这使得更新可以更频繁、更可靠地推送。此外，由于业务部门和开发部门都以功能为导向，因此组件化也使得二者之间能够使用共同的语言。

组件让代码更易于测试和维护：这一点毋庸置疑。编写功能单一、体积小、结构简单的代码片段，会让理解、测试、修改和替换代码变得轻而易举。

组件使得编码更加抽象和友好：最后但同样重要的是，组件能够以更抽象的方式处理代码。这意味着，使用组件无需理解具体的代码细节。一个好的组件是一个抽象实体，可以像 API 一样使用。

更简单的编码

组件化开发让开发更加稳健。代码片段可以轻松共享、重用、修改和替换。这意味着，你的应用能够更轻松地适应各种变化。在组件化的开发环境中，应用更像是一套乐高积木，每个零件都可随时重复使用，而不是一个庞大而令人望而生畏的庞然大物。

从工程师到技术人员

组件甚至可以在行业中创造新的角色——不仅是工程师，还有组件技术人员。前者负责具体的代码编写，确保代码正确且完全优化；后者则负责构建新的应用程序或分子组件。这是一个双赢的局面：既能以更低的成本，在更短的时间内编写出高质量的代码。

我们时代的先知

短短几年内，Web开发的历史就从jQuery的“页面时代”经历了AngularJS和Backbone的“MVC时代”，最终迈入了React、Angular和Vue的组件时代。Web组件时代即将到来。

提到即将全面组件化的开发世界，人们会想到许多技术——但为了保持文章简洁明了，我将略过列举清单，只提及一些在我看来在推动组件概念走向未来方面表现卓越的技术。当然，还有许多其他技术同样重要。

React 和朋友们

React无需过多介绍，但如果我不把它列入“推进组件概念”的技术列表中，那将是极大的失职。React 是一个超轻量级的前端框架。它如此轻量级，以至于很难将其视为一个完整的框架。

引用 React 官方博客的话：

“React 不是一个 MVC 框架。React
是一个用于构建可组合用户界面的库。它鼓励创建可重用的 UI 组件，这些组件可以呈现随时间变化的数据。”

为什么这很重要？因为任何真正推动封装和可重用组件使用的技术都不能是一个庞大的框架，否则就失去了意义。

React 的设计方式是将 Web 开发中涉及的两种不同实践（构建和组合）解耦。

“* React 不使用模板。*（重点为笔者所加）
传统上，Web 应用程序的 UI 是使用模板或 HTML 指令构建的。这些模板规定了你可以用来构建 UI 的全部抽象概念。React
则采用了不同的方法来构建用户界面，它将用户界面分解成组件。”

和 -

“构建能够管理自身状态的封装组件，然后将它们组合起来以创建复杂的用户界面。”

展望未来，Web组件将带来不可避免的规范化，使Web开发围绕与框架无关的组件进行整合。我们已经可以看到这种趋势正在发生（工具、库）。

少量

“在Bit的设计理念中，组件是构建模块，而你就是架构师。Bit只是消除了实现这一目标的障碍……”

Bit从表面上的模块化跃升至真正意义上的模块化。它是一款开源工具，让您可以轻松地在不同的项目和应用程序中共享和管理组件。

它能够独立跟踪您的组件，并将它们及其依赖项、编译器和测试工具封装导出。之后，这些组件可以通过包管理器使用，或者直接导入到新项目中。

Bit 允许您控制和管理跨多个项目和应用程序的源代码更改和组件依赖项更新，因此存储库不再限制模块化或您在它们之间共享多少代码。

Bit 还通过其组件中心 UI 和搜索引擎确保每个组件都易于查找。您可以搜索组织内部甚至整个开源社区的组件。找到所需组件后，Bit 的实时演示环境会将其渲染出来，方便您进行实际操作。
团队协作，共享可重用代码组件 · Bit
*轻松在项目和应用程序之间共享可重用组件，从而加快团队协作速度。协作开发…*bit.dev

框架

Framer是设计师进行应用原型设计的出色工具。它的独特之处在于，它允许你设计用真正的 JS/TS 编写的实际组件。它将全新的模块化理念引入 Web 设计领域，巧妙地利用组件化时代，为应用设计带来新的可能性。

Bit 为开发者提供服务，Framer 为设计师提供服务，对于那些希望看到应用程序构建更像是组件组合，从构思到功能齐全的应用程序的人来说，这似乎是一个非常有前景的未来。

Framer X 的组件功能强大，不容错过。您可以从生产环境中直接导入组件，也可以根据设计或代码创建自己的组件。精准掌控每一个动画和微交互。为每个组件创建自定义 UI，并在多个项目中重复使用。Framer是
一款速度极快的交互式设计工具。
*Framer 是您为任何平台创建交互式设计的唯一工具。Dropbox 的产品团队也在使用 Framer……*www.framer.com

结论

回顾过去，我们从 jQuery 一路发展到 React，现在正处于 Web 组件和 ES 模块时代的边缘。

想象一下，拥有强大且模块化的应用程序该有多棒！再也不用编写重复的代码了。能够以更轻松、更友好的方式处理代码。能够将更多精力集中在逻辑和组合上，而不是我们正在构建的应用的实现和集成细节上。

这就是软件开发日新月异的未来世界。