更新一个已有 25 年历史的网站

作为前端开发者，我们总是希望使用最新最好的系统。然而，很多时候，我们的客户仍然依赖于老旧的系统，而更新这些系统需要花费巨额资金。几年前，我不得不使用一个已有 25 年历史的网站的代码。

首先，让我们回顾一下。1993年，当时我20岁，是个极客，在丹麦哥本哈根一家名叫“Fantask”的漫画书店工作。

Fantask 使用一个名为“Perfect Filer”的数据库来处理所有客户、产品以及最重要的订阅。客户可以订阅各种产品：美国漫画、丹麦漫画、特定作者或系列的书籍等等。

“Perfect Filer” 于 1983 年发布，是一款基于命令行的工具，占用了 261kB 的硬盘空间和高达128kB 的内存！毋庸置疑，处理海量数据时，它的使用非常复杂，而 Fantask 的客户群却日益壮大。

因为我对 IT 感兴趣，并且曾在 Fantask 的目录上做过一些“计算机工作”，所以他们要求我创建一个新的图形用户界面来处理客户、产品、订阅等。

幸运的是，我最好的朋友学习数据科学，可以帮助我进行数据库设计和编码 - 因为我对这两者几乎一无所知！

当时，“SQL Server”仅适用于 OS/2，因此我们选择了全新的“Microsoft Access 1.0”数据库，它也支持 VBA：Visual Basic for Applications。

使用 VBA，您可以（并且仍然可以）构建：

• 数据库应用程序
• 自定义表单
• 自定义报告
• 自定义导航

...并将其像应用程序一样打包，带有图标等。

我记不清花了几个月的时间开发它，但是……他们一直在用它！（稍后会详细介绍）

几年后，万维网突然成为人们热议的话题，所以我不得不学习另一种“编程”：HTML。

我于 1995 年 9 月创建了这个漂亮的网站：

很抱歉伤害了您的眼睛，但当时大多数网站都是这样的！

1996 年 12 月，微软推出了Active Server Pages（今天称为“Classic ASP”），允许您将数据库与网站连接起来。

突然之间，我们就可以将 Access 数据库连接到网站，创建一个在线商店了。而且，请注意，数据量非常大：

• 超过 50,000 部漫画
• 超过 5,000 本书
• 超过 5,000 个游戏、人物、电影等。
• 超过 10,000 名客户

不久之后，我离开了公司，开始自己创业。
在接下来的21年里，我的网站一直是这个样子的：

搜索体验就像......嗯，1997 年，布局是用 完成的<table>，而且外观和感觉没有赢得任何设计奖项😂

在这21年里，他们请过很多公司帮忙搭建新网站……但对于一家小型漫画书店来说，成本实在太高（2万到2.5万美元以上）。而那些“另类”的漫画书店根本无法处理如此海量的产品/数据。

2018年，Fantask濒临破产，于是向我寻求帮助。他们认为一个炫酷的新网站可以帮助商店生存下去。我当时没有太多空闲时间，但答应用一个月的所有周日来帮助他们。

由于时间有限且没有预算，我意识到最便宜的解决方案是......好吧，继续使用 Classic ASP！

由于未知的原因，它仍然受到微软的支持（或者说它仍然有效），尽管它.Net在 2002 年就被取代了，而且最后一个稳定版本已经有 21 年多了！

我为“VS Code”安装了“Classic ASP Syntaxes and Snippets”插件，遍历了我的旧代码（哦，太恐怖了！）——并将其拆分为：

• 模块
• 服务
• 成分

我添加了输入清理，重新使用了数据库连接，注意不要过度使用session对象，并应用了过去 20 年的一些“最佳实践”。

我添加了现代语义、有效和结构（schema.org）标记、Google Snippets、超级菜单和fetch()基于的“自动建议”：

然后我应用了所有“Google Analytics 增强型电子商务”逻辑：

• 产品印象
• 详情点击
• 细节印象
• 加入购物车交易
• 从购物篮中移除交易
• 购买交易

……以及“Google Merchant”和“Facebook Business”的信息流。
我还从 Access 数据库中删除了所有敏感数据，因为我觉得它可能比现代数据库更容易被黑客入侵。

回顾

该项目最终耗时7 天（而不仅仅是我同意的 4 个星期天），其中包括：

• 完全重写“后端”代码，分为：模块、服务和组件
• 完全重写 HTML（无<table>基于的设计！）
• 完全重写 CSS
• 完全重写 JS
• 结构化、语义化和有效的标记
• Google 搜索代码片段
• Google 增强型电子商务集成
• Google Merchant 与 Facebook Business 集成
• 结构化、可衡量、目标友好的结账流程
• 性能优化
• ...还有更多！

该网站于 2018 年 12 月重新上线 — Fantask 依然发展强劲！— 可访问fantask.dk（抱歉，仅提供丹麦语版本！）：

结论

由于范围或成本的原因，使用旧代码有时是不可避免的，但它也可以教会你一些东西。

在这种情况下，我之所以能在如此短的时间内完成重写，唯一的原因是技术栈简单精简：、 HTML和。无需框架。无需后端开发，因为“经典 ASP”非常简单，就像 PHP 一样。只需VS Code和Internet Information Server，并进行一些调整。ASPCSSJavaScript

而且，这也许是最重要的原因，因为我可以自己做所有决定！无需与 BE 开发人员、项目经理、Scrum Master、JIRA 工单、UX 讨论——或者与想要的设计师讨论1px box-shadow！

换句话说：在现实世界中完全不现实！

但这很有趣，虽然我不建议在你的下一个项目中使用“经典 ASP”，但我会建议你看看技术堆栈，看看是否可以简化任何事情。