[译] 已经 2019 年了，我依然赤手空拳制做网站

时间 2019-11-15

原文原文链接

原文地址：It’s 2019 and I Still Make Websites with my Bare Hands

原文做者：Matt Holt

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：EmilyQiRabbit

校对者：Fengziyin1234，TUARAN

我彻底不知道该怎样像如今那些酷小孩同样制做网站。html

我所知道的是，咱们的前端团队为新网站花费了一天的时间来搭建基础框架，而后，次日我运行 git pull，下载了这些东西（在合并钩子以后）：前端

（我必须杀掉了计算文件体积的进程，由于它占用太多 CPU 资源了。）jquery

它显示出了 Hello world，可是他们告诉我，它有能力作更多的事情！我想他们是想说它甚至可让我为 toasts 敬酒了。android

我认为，若是有一件事（一项技术），大多数的网站开发者，甚至并不是从事计算机科学的人，在谈论到本身的网站的时候，都能或多或少说一点，那么这件事（技术）必定是 frameworks 或者 hosted services（由于我不知道这些单词是什么，但它们也不在个人 CS 课程里），并且说实话，它们听起来都很神奇。我将他们描述的和我正在作的事情作了比较，我感受我本身的知识真的很是匮乏。而他们在像 DevMountain 这样的代码学校，或者最新的在线课程里学习最热门的技术。ios

不管如何，看来我已是“老学派”了，尽管我从事网络开发只有差很少 10 年。git

仅仅靠本身的双手搭建代码angularjs

19 年了。就像当初 <FONT> 标签是正确的方法。（我...11 岁的时候，教会我 HTML 的那本有趣的书的连接）github

而后就发生了下面的事，因为他们知道了我有多年网络开发的经验，有人就来请求个人帮助。随后我就知道了我对如今的状况已经一无所知，因此我就在谷歌搜索了 React 的双向数据绑定和 SCSS 的动态变量，还有其余那些我不知道的东西，可是他们却没有获得和我相同的理解，由于他们本该看到答案的时候就彻底明白了，然而我本应该什么都不懂，只能询问“这个怎么样？”，可是其实他们找不到我给出的答案。web

由于我会对这些框架感到无能为力，早晚我就必须开始询问他们：“啊，请等等，这个是作什么的？”指着那段我觉得是函数调用的代码...额，哦不，这是一个类型定义，这就尴尬了！他们的回答一般也是很不让人不满意（答案都比较浅薄），因此我就更努力的钻研更多知识，好帮他们调试应用：后端

“可是这部分是如何工做的呢？好比说，它其实是在作什么？”我问道

我一般获得的都是一段无言的凝视。他们几乎全都不知道。

因此我就处于了这样的境地，已经 2019 年了，我已经写了近 20 年的代码，我周围的人的薪资都是个人 2-10 倍（可是我仍是个学生）可是他们殊不知道如何解释他们本身的代码是如何运做的。因此我认为，那其实并非他们本身完成的代码。就像我并不知道个人车是如何工做的，可是我依旧能够天天都驾驶它。

可是，在你不知道工做原理的状况下，你要如何构建应用程序呢？

为何一个须要展现几个列表，发送几个 AJAX 请求的网络应用须要超过 500M 的文件呢？（没错，我依然这样称呼它们。我也把它们称为 XHR，尽管 XML 已经很过期了。）

为何不少网站要破坏个人返回按钮或者滚动条？就像是，你必须本身努力来实现它们。

为何打包一个有 5 个路由的网站应用须要花费时间是个人 25000 行代码的 Go 程序交叉-编译时间的十倍？

Papa Parse 是怎么变的愈来愈重了

在 2013 年，我在飞往迪士尼的航班上写了一个 CSV 解析器。个人浏览器须要一个快速准确的 CSV 解析器，可是已有的都不符合个人要求。因此我本身写了一个，这就是 Papa Parse，如今被不少知名的用户使用 —— 从联合国到各地的公司和组织，甚至是 Wikipedia —— 我很为它而骄傲（有点不谦虚的说，按理说它是服务于 JavaScript 的最好 CSV 解析器）。最开始它就是个很简单的库，运行也很是好。

而后有需求须要它兼容老版本的浏览器，因此我加上了 shims，嗯，也还好吧。

而后有需求但愿能够在 Node 上使用它。

接下来，不止是需求，还有问题反馈 —— 它在 <insert JavaScript framework here> 的时候没法正常运行。这就有点让人发狂了：添加对一个框架或者工具链的支持，就会让其余的失灵。Papa Parse 从只有几百行代码增长到几千行。这已是不一样的数量级了。从只有一个文件，到大概有十几个。从不须要构建，到大概 3 到 4 个系统构建以及分布式打包。

全部都是为了浏览器中 Papa.parse("csv,file") 的丰富功能。

我最终放弃了它的维护，交给了社区中的其余人。他们很是好的完成了维护工做。它的功能远远超出了我所能支持的。在此以前，我在我本身的小世界里，完成很轻量、拥有它本身原本样子的库，自得其乐。可是如今，尽管 Papa Parse 依然是一个很棒的库，可是我已经再也不知道它到底是作什么的了。

（顺便说一句，我依然很喜欢而且推荐 Papa Parse，万一你正好须要 JavaScript CSV 解析器。）

按照老样子，我如何制做个人网站

我不认为本身是一名网络设计师，甚至也不是网站开发者，可是当我须要的时候我仍是会制做网站（而且我常常这样作 —— 次数很是多，因此我写了一个完整的网络服务，Caddy，来让这个的过程更加快速）。

我不是开玩笑的，我仍然是这样制做网站的：

打开一个编辑器，写下这些（手写，大概只须要 30 秒 —— 为了这篇文章的真实性，我甚至真的写了一遍 —— 除非烦人的标签在这里并不起做用）：

<!DOCTYPE html>
<html>
  <head>
    <title>I code stuff with my bare hands</title>
    <meta charset="utf-8">
  </head>
  <body>
     Hi there
  </body>
</html>
复制代码

而后我打开了一个新的标签页，写了 CSS 文件；也就是像这样的代码：

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-size: 18px;
  color: #333;
}

p {
  line-height: 1.4em;
}
复制代码

JavaScript 怎么办呢？我固然也用了。可是，仅用了我懂的那部分。我有不少须要学习，尤为是如今还出现了 ES6，以及不少新的 API 好比 fetch，可是我仍旧会在一些场景（强调下一些）中使用 jQuery —— 它能完成特定的任务，好比可以很是简单直接的操做多个 DOM 元素，并且它几乎是模版代码，我能够积累下来，还能够从一个项目复制粘贴到另外一个项目。并不存在依赖地狱。

不管如何，我仅在这里加入了须要的 JS 代码。我偶尔也会加入一些仅基于原生 JS 的库，例如用 Papa Parse 来知足高级、高性能 CSV 解析需求。（UtahJS 视频的连接，我在这段视频中介绍了将浏览器性能发挥到极限的惊人方法。）

大多数的时候，传统的表单请求或者页面导航没什么缺点。我确实常常将表单请求改为 AJAX 请求，可是却没什么须要修改 URL（它们中任何一个都不须要）。

而后我开始保存文件，在咱们项目文件夹中运行 caddy，而后打开浏览器。我每次修改都须要刷新页面。十多年之后，我终于安装了第二个屏幕，因此我不须要切换桌面了。

JavaScript 并非我吝啬使用的惟一技术：CSS，SVG，Markdown 还有静态站点生成器也是如此。我几乎从不使用 CSS 库。我只是在 CSS 3 和一些新特性好比 flexbox 和 grid 没有被支持的时候坚持用几个 hack 技术。可是全部的也就如今我说的这些了。就浏览器支持而言，SVG 依旧还处于发展中，而 Markdown 嘛...嗯...多数状况下我仍是宁愿写 HTML/CSS，由于至少这样子在全部浏览器上表现都是相同的。

我很喜欢静态站点生成器的思想，可是一般它们都过于复杂。多数状况下，我所须要的就只是将代码片嵌入到个人 HTML 文件中，Caddy 只须要简单的几个模版操做就能够完成：{{.Include "/includes/header.html"}}。（我甚至能够用 git push 来部署使用了 Caddy 的网站，不须要静态站点生成器！尽管它也支持这些功能）

优点

不使用那些花哨的，用途普适的，或者功能过多的库、框架和工具可以：

网站代码量少
更容易管理测试环境
调试速度快，解决问题的方法更普适
服务配置更简单（我了解这方面，相信我）
网站加载更快

它还可以为你省下好几个 GB 的硬盘空间！

代价

既然我不了解 React，Angular，Polymer，Vue，Ember，Meteor，Electron，Bootstrap，Docker，Kubernetes，Node，Redux，Meteor，Babel，Bower，Bower，Firebase，Laravel，Grunt 等等，我就没办法真正的帮助个人朋友们，或者在个人答案中惊艳他们，或者达到如今不少网站开发工做的要求。

尽管如此，可是从技术上讲，我并不能作不少事 —— 这是关键！仅有真正须要工具的时候，我才引入它们，不然我就选择本身写代码或者从 Stack Overflow 复制粘贴过来一些小功能（我很诚实）。（提示：和 YouTube 或者 HN 不一样，请阅读 Stack Overflow 上的评论。）（须要绝对的了解你借用的代码是什么！）

我开发的效率下降了吗？

也许吧。可是，其实我并不这么认为。

结果

这里有几个网站，都是我这样赤手空拳的搭建起来的 —— 相信我，若是我有资源可以雇佣专业的前端开发者，我更愿意雇佣他们的 —— 可是全部这些网站都没有用任何框架，没有没必要要的、笨重的依赖库。

我甚至没有最小化页面资源（除了图片压缩，只要拖动到 tinypng.com 就能够了），基本上是由于我比较懒。可是你知道吗？页面的加载时间依旧很是短。

可是我认为，他们的代码中和“网络应用”最相关的，就只是一些毛糙的 jQuery。（毛糙，其实仅仅由于我很忙）。

网站连接：

caddyserver.com
goconvey.co/
www.papaparse.com
relicabackup.com （羞耻的提一句：如今有五折优惠！）

每一个网站大概都会花费我一天到一个礼拜的时间完成（取决于页面有多少，以及可以有多少的收入）。实质的内容固然会须要更长时间，但这都是给定的。

下面是一些我收到的反馈，是我“经典”路线的结果：

我很喜欢你网站设计的简洁性。你是本身写的吗，仍是用了模版/主题？
你的网站是一个优秀的榜样，好的网站设计应该如此。它快速，干净，不会加载不少没用的东西，并且几乎全部内容都能脱离 JavaScript 工做。
我很好奇你使用了什么框架或者工具来构建你的文档网站！它真的很是棒，很是轻量。

我并非说个人网站是十全十美的 —— 它们距离完美还差得远，我只是当心的将它们用做案例研究 —— 可是不管如何，它们的功能都实现了。

给你一个小奖励：这里有一个颇有意思的 API 示例，是我在几年前为了当时的工做，使用 vanilla HTML，CSS，和 JS 制做的。

Youtube 视频连接

我知道每行代码都是什么意思，而且，包括了最小化的 jQuery（未压缩），全部内容加在一块儿大概是 50KB。很明显，显示地图图块时使用了另一个依赖（Leaflet），但这是很合理的，由于它们是必需的功能。例如，若是你在作复杂的和时间相关运算以及时间渲染，那么使用 Moment.js 就没什么问题。我只是想要避免广适性的框架、库、以及工具，除非我真的须要他们或者明白它们在作什么。

开发过程

我收到了一些请求，因此我写下了构建网站的过程，而且这篇文章已是我想到的最好的了。也许这篇文章很粗俗，可是个人开发过程真的很是简单，很难解释，由于...其实没有任何过程。

除了最低需求（文字编辑器和一个本地网络服务），个人“开发过程”不须要其余特别的工具：没有表意，没有安装，没有包管理。就只有我本人，个人文字编辑器，个人网络服务，而且懂得网站运行的基础。

要点

我并非一个专家。网络开发须要不少年的实践才能得到真知灼见，就算没有使用华丽的工具也是同样的。

我相信随着时间流逝，一我的可以获取到全部须要的技术和知识，能以相同的速度来作如今酷小孩作的事情，可是却有一下优点：

大大减少代码量
更少出故障
更直观
更短，更有效率的调试会话
更高的知识转移
更灵活，面向将来的软件结构

全部这一切都是经过只消费你所须要的而来。

这也正是技术债的治愈方法。

（嗯，本文可能更像是一剂“预防针”。）

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。