“查看页面源代码”的未来

现代网络的现实

我的 Web 开发之旅

查看页面源代码

恐吓因素

现代网络的困境

现代网络的现实

以下术语构成了现代 Web 开发中大量词汇的一小部分：

• 汇编
• 转译
• 最小化
• 压缩
• 代码拆分
• Polyfill 和 shim
• JavaScript 包和块
• CSS 预处理器
• 框架和库
• 构建系统
• 搜索引擎优化

遇到这些术语是不可避免的。如今，构建严肃的生产级应用程序需要大量使用这些术语。

这就是 Web 的现状。我们部署的代码与我们在开发过程中在机器上实际编写的代码已经无法区分。编译、转译和压缩等各个阶段都以一种网络高效的方式对“生产代码”进行了处理。

我们大多数人都会合理地争辩说：“这很好！Web 速度快、灵活、便携！”但对于其他人来说，这与使用原始 HTML、CSS 和 JavaScript 手工编写网页的 Web 的起源相去甚远。

我的 Web 开发之旅

和许多其他开发者一样，我对编程的热情最初源于对电子游戏的迷恋。但四年前，我完全没有编程经验。我太胆怯了，不敢理解游戏开发背后的复杂性和数学原理，所以我转而学习了 Web 开发，希望它能成为我进入游戏开发的垫脚石。

我的旅程始于一间教室。我的一个同学因为能神奇地改变网页的外观而吸引了一大群人。突然间，他可以即时编辑维基百科页面，把我们的名字和讽刺信息插入段落中。

我当时并不知道他只是使用 Chrome 的 DevTools 来操作页面，但正是在那一刻，我知道我必须从事 Web 开发。

我问他是如何编辑这些页面的。他的回答出奇地简洁：

“这很简单。只要学习 HTML 就可以了。”

在接下来的几周里，我花了很多时间学习W3Schools的 HTML 教程。掌握了 HTML 标签的打开和关闭后，我开始学习 CSS。

那时，为了运用所学知识，我编写了许多简单的网页。但随着页面的增多，我越来越渴望交互性。正是在那时，我最终决定深入研究 JavaScript 这个“兔子洞” ^。1

我最初编写的几行 JavaScript 代码是点击按钮恢复视频播放的。第二年，我从编写网页转向开发 Discord 机器人，这算是我接触 Node.js 和后端开发的入门。两年后，长话短说，我现在正在写这篇文章。

查看页面源代码

这段旅程很艰难——主要包括长时间的 Google 会话和深入的 Stack Overflow 探索——但尽管如此，我还是挺过来了，这要感谢一路上各种在线资源和YouTube 视频。

但不可否认的是，如果没有当初被通过 DevTools 操作 HTML 的“魔力”所震撼，这一切都不可能实现。

看到网页的内部框架，感觉它如此……平易近人，好像所有的“魔力”都消失了，但取而代之的是页面结构美丽直观的可视化。

我记得我当时心里想：

“哇。看来 Web 开发也不是那么糟糕……”

但是现在，当我打开页面源代码时，我看到的只是一大块缩小的 HTML 代码、混乱的 CSS 类、混淆的 JavaScript 和注入的第三方跟踪器。

恐吓因素

这个不幸的现实是在与一位朋友的谈话中让我震惊的，我们谈到近年来，由于激烈的竞争、层出不穷的新框架、复杂的开发环境以及“生产代码”的神秘输出，Web 开发变得多么令人生畏。

我记得当时正是这种“恐惧感”阻碍了我从事游戏开发。突然之间，就在我眼皮底下，网页开发也变成了一个难以接近的神秘黑匣子。

平心而论，Web 确实已经成为一个功能更强大、更可靠、更可扩展、更可行的现代应用平台。可惜的是，所有这些新的复杂性都伴随着高昂的代价。

现代网络的困境

这篇文章的灵感主要来源于前段时间看过的一场发人深省的演讲，题为《继续押注 JavaScript》。演讲的最后，主讲人 Kyle Simpson 提出了现代 Web 在效率与简洁之间的困境。

我担心的是，一些有抱负的新开发者——现在大概 10 岁或 11 岁——对 Web 很感兴趣。几年后，当他去“查看 Web 源代码”时，看到的不再是 HTML、CSS 和 JavaScript……而是 Go、Rust、PHP、JavaScript，以及其他五六种语言，它们以一种完全无意义的方式混合在一起……我们会说这是 Web 最好的未来，因为它的性能要高得多，可以做所有这些事情——但我们会忘记，人们需要能够适应 Web。

我清楚地意识到，我曾经是那个寻找编程世界垫脚石的“新晋开发者”。我曾经是那个很容易被 Chrome 的 DevTools 迷惑的“新晋开发者”。我曾经是那个在 Web 的简洁中发现美的“新晋开发者”。我曾经是那个认为 Web很容易上手的“新晋开发者” 。

从那时起，时代发生了翻天覆地的变化。我无法判断这种变化是好是坏，但我们都认为这是一种进步。

短短几年间，Web 已成为编译目标。对于静态站点生成器来说，HTML 是构建目标。对于 UI 框架来说，CSS“模块”与 JavaScript 一起构建。对于打包器、编译器和构建系统来说，JavaScript 是构建目标。对于核心 Web 技术之外的语言来说，WebAssembly 是构建目标。

然而，这并不是说网络现在“一团糟”。毕竟，近年来我们已经取得了很大进步。事实上，有些人甚至认为，网络自诞生以来一直处于最佳状态。

我们只需要意识到，这就是我们未来的方向。我们未来做出的决定将为“新晋开发者”铺平道路。

说实话，我不知道我们是否正在为“新晋开发者”（比如我们当时）构建最佳的前进之路。现代 Web 的困境在于效率与简洁之间的权衡。在软件开发中，应用程序性能和代码可读性之间也存在着类似的永恒争论。

话虽如此，您对“查看页面源代码”的未来有何看法？您如何看待 Web 成为编译目标？我们正朝着正确的方向前进吗？

1. 你可能已经看出来了，我还没找到走出兔子洞的路。😂  ↩