由Lara Aigmüller于2023年12月24日发布
“HTML很简单。”、“前端开发比后端开发更容易。”、“一旦后端准备好，更新UI应该是一项简单的任务。”——在我作为Web开发人员的职业生涯中，我一次又一次听到类似的说法。
这些说法经常让我感到难过。 🥲
原因是我大部分工作时间都在编写前端代码，包括HTML、CSS和JavaScript（实际上，大部分时间都是TypeScript）。当有人告诉我，我的工作很“简单”时，我感觉自己的技能并不特别，随时都有其他开发人员可以取代我…
接下来是一篇关于我在过去几年中与不同团队的不同背景的不同人员一起在HTML和前端技术等方面合作时涌现的一些想法的文章。这是一篇关于我脑海中的许多“为什么”以及可能的答案的文章…
为什么人们认为HTML很容易？
“容易”究竟是什么意思呢？是否某事容易通常取决于看客的眼光。当我对一项技术或编程语言很了解时，它对我来说就比对该领域新手和无经验的人更容易。
有些人倾向于对前端开发的复杂性进行假设，根据我的经验，这些人通常是那些不经常使用前端技术，特别是HTML的人。以下是我能想到的一些原因：
- HTML语法并不难学。组合一些尖括号、标签名和键值对（即属性），你就可以开始了！
- HTML语法既可以被机器读取，也可以被人类读取，这是类似XML语言背后的一个想法。
- 一旦你在一个.html文件中写了几行代码，只需在浏览器中打开相同的文件，就可以立即看到你工作的结果，无需进行编译或构建步骤。
- HTML的门槛很低。在一些所见即所得的编辑器中，有一个切换到“代码”视图的选项，你可以摆弄你文本的HTML版本，无论你知道自己在做什么与否。（你有一个可用的预览，可能会出什么问题呢？）
- 浏览器很棒，对很多错误都很兼容（J. David Eisenberg在一篇关于“兼容”浏览器的相当古老的文章中描述了这一点，其中包含一些今天仍然有效的想法）。当你打开一个语法错误的HTML页面时，浏览器仍然渲染的机会很大。你忘记关闭一个标签？没问题。你添加了一个未知的标签或属性？浏览器会简单地忽略它。与整个应用程序因为缺少分号而崩溃的编程语言相比，是的，这感觉“容易”。
让我们进一步思考为什么人们倾向于比较Web技术或将前端与后端开发进行对比。
为什么人们认为前端开发容易？
编写网站或应用程序的后端是难的部分，创建前端是容易的部分。对吧？有时候，我觉得这是许多开发人员中的共同观点。
再次，我在寻找“为什么”的答案，并得出了以下的想法：
用户和项目利益相关者通常根本不接触业务逻辑和后端代码，而只是与用户界面（UI）打交道。关于在哪里放置哪个按钮或信息块以及UI应该如何工作的想法更容易，因为它比复杂的数据库查询或嵌套的for循环和if语句更具体。后端是一个黑盒子，它完成它的魔术并为前端生成数据。前端开发人员“只需”显示这些数据，添加颜色并构建布局（使用CSS），工作就完成了。
幸运的是，有许多可以使用的前端组件库。组合一些（预定义的）视图，在其中填充数据，你甚至不需要再考虑颜色和布局了——这不是很棒吗？因此，在这么多的帮助下，几乎任何人都可以在不需要太多HTML/CSS知识的情况下构建出色的前端！
由“非前端”开发人员构建的前端
我有这样的经验，认为编写前端是Web开发中简单的部分的人（他们从不会称自己为“前端开发人员”，而更倾向于称自己为“全栈开发人员”）在其前端代码中犯了最大的错误（即使在使用框架和库的帮助下）。
Heydon在“不情愿的门禁：全栈问题”中提到了这个问题，他写道：
[…]如果你让某人负责所有这些事情以及更多的事情
[…]很可能他们在某些方面会比其他方面弱很多
[…]根据我的经验，特别是男性因其对JavaScript或Python的知识而受到赞赏，但对CSS技能的了解却很少。CSS，使事物看起来“漂亮”，被认为是女性的。
上面提到的一些错误是实际的语法错误，其他一些是与语义、性能、可访问性等相关的问题。在原型演示或测试期间，它们通常不会被注意到，因为浏览器会原谅它们（见上文），性能在开发者的机器上通常很好，不进行可访问性测试…结果是：它能正常工作，浏览器显示了预期的内容，一切似乎都很顺利，可以发布到生产环境。
糟糕的HTML代码？
一旦代码部署到生产环境，问题可能就会出现。未参与开发过程的用户第一次与产品互动时可能会遇到一些问题，其中一些可能是由破碎的HTML代码引起的，影响用户体验。
糟糕的用户体验
让我们看看基于糟糕HTML代码的问题，最终用户可能会遇到的问题：
令人沮丧的表单（这里有一篇我写的关于在Web上使用表单时糟糕用户体验的文章，其中包含一些示例）
性能问题（这里有一篇由Harry Roberts在YouTube上发布的关于你的HTML文档的“head”可能出现什么问题的演讲– Get your “head” straight）
标题（h1-h6）的错误使用或对非文本内容缺少文本替代，这对使用屏幕阅读器的人来说是不好的
交互元素的错误/不正确使用（“div不是按钮！”）或元素的混乱的制表次序，这对使用键盘进行交互的人来说是不好的
基本上你可以在 htmhell.dev 上找到的所有问题
不同兼容性的JavaScript和兼容性的功能造成糟糕的HTML代码
糟糕的开发者体验
当HTML/前端代码不正确时，不仅你站点和应用的用户可能在使用你的产品时遇到困难，你的同行开发者也可能会有“面掌瞬间”，因为…
…当HTML代码结构混乱时，为其编写良好的CSS代码就会变得更加困难。换句话说：一旦CSS投入使用，通常需要调整HTML代码。当你有编写这两种语言的经验时，你的HTML和CSS代码很可能会变得出色且易于维护。
…当项目UI组件的HTML代码不灵活时，您可能无法在不进行必要的重构的情况下重用它们或扩展项目，当需要新功能时。
…当开发者不使用平台而试图重复发明轮子，而不考虑浏览器的能力时（例如使用JavaScript导航从一个页面到另一个页面，而不只是使用链接），可能更容易出现错误，修复它们而不破坏应用程序的其他部分变得更加困难。
为什么我们要在意？
如上所述，浏览器是很棒的，它兼容了很多错误；即使网站不可访问、性能不佳，甚至其中的某些部分出现问题，它们可能仍然对许多人有效。维护这些网站的工作可能也是由心地善良/命运多舛的开发者完成的，他们不介意在一个难以忍受的代码库上工作。
这不仅仅是关于编写HTML
我曾遇到一些人，他们开始学习Web开发，直接投入到最新的框架中，然后使用Angular构建了一个简单的网站，而不先学习基础知识。问题在于：没有基本的HTML（或CSS或JS）知识，最流行的框架也无法帮助你成功；相反，你是在杀鸡焉用牛刀。无论你使用哪些工具，最终发送到浏览器的代码都是HTML、CSS和JavaScript，了解这些语言的工作原理是构建出色应用所必需的——不管你将什么新奇的技术应用于解决问题。
单独编写HTML并不难。
但是：通过优雅地将这种语言的特性与CSS相结合来构建用户界面，创建令人愉悦的设计和值得记忆的用户体验，需要经验和技能，这些经验和技能不容小觑。HTML也一样，它是塑造Web的语言之一，如果不是最重要的一个。
关于Web前端开发（专业知识）价值的相关思考由以下人分享：
- Christian Heilmann，他为前端开发辩护，认为它是全职工作
- Jeremy Keith，他担心我们可能已经“达到了一种将更复杂、过度设计的方法视为默认方法的状态”
- Andy Bell，他描述前端远不止于构建设计
让我们停止比较Web技术及其价值。让我们不讨论什么更容易/更难做或更/不那么重要。让我们团队协作，倾听并向具有专业知识的人学习，不管他们擅长编写HTML、CSS、TypeScript、PHP、Python，还是{在此添加你最喜欢的语言}… 让我们共同努力，使Web成为一个美好的地方，并更加重视那些在前端工作的人！
P.S.：感谢Felix一直为我的文章校对并扩充我的英语词汇量。感谢Manuel维护HTMHell并创建这个鼓舞人心的降临节日历。
但我确信我们可以做得更好。 💪
目标应该是确保网站（和Web应用程序）适用于大多数人，不，对于所有在网络上浏览的人，作为开发者，我们应该构建产品，尊重所有（潜在的）用户的需求。编写可扩展和可维护的代码不仅会导致可访问、快速和可用的网站，还会让开发者感到愉快。
关于Lara Aigmüller
Lara是scale.at的软件开发人员，一直致力于创造出色的用户体验。她希望通过不断提高对HTML和CSS的了解，使Web变得更好。在scale博客上查看Lara的更多文章，并在Mastodon上关注@scale_www。
scale博客: scale.at/blog
Lara在Mastodon上: Mastodon