蚂蚁金服高级前端专家，我做前端这 10 多年来的感悟

以下文章来源于微信公众号：前端早早聊 ，作者沉鱼

沉鱼毕业于浙江大学，2008 年的时候加入了阿里集团，之后又入职了蚂蚁集团。她先后作为 Node Web 框架 —— Chair 的核心开发、Basement Baas 服务的技术负责人、九色鹿的技术负责人以及现在云凤蝶的技术负责人。她今天带来的话题是《我做前端这 10 年来的感悟》。那么接下来，我们把时间交给我们的沉鱼小姐姐。

一、关于我

刚刚主持人已经给我做了一个简单的介绍，那这个地方我就不多讲了。我的经历也比较简单，现在是在蚂蚁集团的体验技术部做企业级应用设计研发平台 —— 云凤蝶的技术负责人。其实我做前端不止 10 年了，已经有 12 年了。这 12 年里发生了挺多的事情，所以也借着这个场合，跟大家一起回顾一下，这段时间里前端的整体发展。
二、前端简史

我们来看一下前端简史。这一小段的内容，其实并不是从很客观的角度去看前端的发展，更多是结合我个人的工作经历来讲这些事情。

1、2009 年
先看一下 2009 年，国内成立了第一个前端团队。大家刚刚如果有留意到主持人的介绍的话，会发现其实我是 2008 年入职淘宝的。那么那个时候我的主管是怎么发现我的呢？我当时在一家公司里面工作，工作之余还写博客，还会画一些跟程序员相关的有趣的小漫画。我估计大概是因为漫画吸引了非常多的人的眼光，然后就这样进了淘宝。大家可以看一下左边这张图，是 2008 年中秋节时淘宝网的首页截图。在这张图上，我基本上是达到了人生的巅峰。大家不要误会哈，这不是我作为一个前端的巅峰，而是我作为设计师的一个巅峰。当时才刚刚流行做节日 Logo 没有多长时间，那段时间正好我们的设计师没空，这个时候我们的部门老板就说了，沉鱼你会画漫画对吧？那你要不要给我们画个中秋节 Logo 呀？我想来想去，那就画吧！画了之后这个 Logo 就真的上线了，被非常多的人看到。这个绝对是我在前端这个行业里面，做为设计师的一个高光时刻了。

大家可能也觉得奇怪，你一个前端，你干嘛画画？实际上 2008 年我入职淘宝网的时候，淘宝是没有一个专业的前端团队的，所有的前端同学都在体验技术部，Title 应该是叫交互设计师，我们跟设计师是在一个大团队的。实际上那个时候很多的页面布局还使用 table 这样古老的技术，使得我们的设计师中也有不少人能够自主做一些网页。那个时候前端的同学更多的是专注在像淘宝首页这样一些比较重要的页面上，而一些活动页面之类的，就会由设计师同学从头至尾地完成。直到 2009 年年初的时候，我们公司才正式划拨出了一个前端团队，据我所知也是国内第一个前端团队。于是 2009 年我们才正式有前端这个行业。

大家看一下右边的这张图，是我刚刚截的淘宝网现在的首页。如果我们仔细地看一下这两张页面，会发现除了页面变得更宽了、能适应更大的屏幕了、设计也更符合当下的审美了，似乎并没有发生什么太大的变化。如果单从这两个页面来看的话，确实是这样，虽然我们使用了各种各样的新技术让页面浏览起来更加顺畅。但实际上前端的发展远不止于此。

2、2008 年 ~ 2012 年
其实任何一个行业在最初时期的发展都是非常慢的，所以在 2008 年到 2012 年这 4 年期间，前端的整体工作都非常的简单，我们可以简单地归结成为“浏览器大战”和“前端框架”这两个关键词。

“浏览器大战”可能对于一些比较新的同学来说，都已经不是很有体感了，因为现在 Chrome 一统天下，包括 2018 年微软也宣布了使用 Chromium 作为他们的浏览器的内核，所以 PC 时代的浏览器的兼容性问题已经彻底解决了。但是在当时，大家对浏览器的兼容性问题是非常头疼的。大家看一下左边这个图，有 10 来种浏览器，这还不是一个完全枚举。所以对于那个时候的前端同学来说，最头疼的事就是要处理前端兼容性的问题。而要命的是，当时 IE 仍然是市场上的主流，而且它作为一个主流，却又特别的不标准，实现的很多东西都不标准，性能也很差。所以 Diss IE 也成为当时程序员的一个日常活动。中间这幅图当时是比较流行的一幅程序员漫画，大家可以看一下 IE 大概慢到了什么样的程度。因为当时的条件特别的恶劣，所以程序员在不断地跟这些我们现在看来有些可笑的问题做着斗争。

在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 也可以关注
我的微信公众号：【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法，
以及一些前端学习手册，前端面试题，端开发工具，PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

那个时候也是非常拓荒的时期，我们还缺乏一些基本的基础设施 —— 前端框架就是非常重要的基础设施。那个时候，国内各大厂商都在开发自己的前端框架，在淘宝我就参与了 Kissy 的开发工作；实际上百度、360 以及新浪都有自己的前端框架。当时这些大厂之间的前端交流是非常频繁的，所以在有一次交流之后，我回来就画了右边这幅漫画，调侃了一下当时各大厂的前端框架，没想到当时这幅漫画就成为了一个爆款，特别多的程序员看了这个漫画。我们也觉得这种状态好像不是很正常，但是当时的前端并不像现在这样，有这么开阔的行业视野，所以大家在这个局里面困了挺久的。大家也看到，2008 年到 2012 年是整整 4 年时间，这 4 年不能说毫无发展，但是发展得真的非常慢。

3、2013 年
转机出现在 2013 年之后，我觉得整个前端行业走上了一个快车道。大家可以看一下左边的这张截图，一看就非常土，2009 年的一个手机淘宝页面，当然我当时有参与它的开发。这么土的一个页面 —— 我们刚刚说 PC 时代结束了兼容性的问题，而移动时代其实才刚刚开始 —— 哪怕是 2009 年这么土的一个页面，它也有非常多得兼容性问题要考虑，可能都是大家意想不到的。比如说，那个时候所谓的智能手机，其屏幕宽度差异是非常大的，我们为了确保每一行的文案都不折行，实际上需要采集当时市面上所有主流手机的屏幕尺寸，然后去做文案字数的适配。实际上在 2020 年，手机淘宝已经发展得非常好了，它跟 PC 没有什么太多的区别。

但我们的发展过程也不是一帆风顺的，特别是在早期的很长一段时间里，手机淘宝的地位可能都类似于一个附属品，或者说一个补充的存在。直到 2013 年，整个公司都觉得这样下去不行了，我们必须要加速移动业务的发展。所以当时出了一个非常有名的事件，叫做阿里的“无线 All In”事件。当时公司调派了非常多的人员、资源去做无线手机淘宝。那一仗算是打胜了，胜得比较惊险。

但是要说业务真正地涨起来、形成 Mobile First 这样的用户心智，可能也要到 2015 年左右了。当时有一件印象特别深的事情，因为我们的内网里有非常多的人，好几万人，所以大家也经常会在上面做一些自己的产品营销 —— 几万人也是不能忽视的对吧~ 是在 2012 年还是 2013 年的双 11 大促的时候，无线手机淘宝的 PD 就在内网发言说今年双 11 大家都来用无线淘宝吧。因为那个时候，不知道大家还有没有印象，秒杀特别火，就是一块钱秒一个特别贵的东西。我们无线淘宝的 PD 说快来用无线淘宝的页面吧，咱们服务器水位可低了，秒杀一定不会卡。所以大家可想而知，在那个时候，哪怕是我们做成了“无线 All In”的那个时候，用户量也还没有大到一定的程度，但是趋势已经非常明显了。而现在，大家基本上已经全部都是人手一个手机这样的情况了。在这个事情里面，我们很容易就能看到，哪怕我们在今天看来是一些巨变的事件的发生，也不是一朝一夕的事情。就像我们在 2009 年的时候，就已经开始做手机淘宝了，到 2013 年无线 All In，再到市场完完全全以无线为主，这中间有足够多的时间去做反应（准备）。所以很多的时候，我们只要踏准了时代发展的脉搏，就有足够的时间去做相应的对策。

那么为什么说在无线端，浏览器兼容性的问题才刚刚开始呢？是因为一开始的时候，我们做的是 Native App，这个时候 iOS 跟 Android 的程序员是非常稀缺的。很多前端在这段时间里就转做了 iOS 跟 Android 开发。但是这两个领域吧，它们的人员培养成本非常高，而且研发成本也不低。在现在这样飞速发展的时代，如果所有的东西都用这两个技术去开发的话，成本是非常高昂的。所以慢慢地 H5 又重新走上了历史的舞台。因为 Web 技术的成本特别低，所以我们尝试在无线的 App 里面加入 H5 的页面，来处理一些非核心页面的研发。慢慢地，小程序又出现了，这个时候大家就已经知道了，今天的无线、今天的手机端，真正重要的是那几个无线流量的入口，而小程序可能也是非常重要的一个入口。于是 Web 研发技术又重新回到了历史的舞台。当然最核心的那些 App 以及最核心的那些页面还是会用原生的 iOS 跟 Android 来开发。

大家可以看到，这个页面下面还放了一个 PWA，不知道有多少同学见过它，或者对它有体感。它是一个希望能用 Web 技术做 Native 应用的解决方案，是 Google 家的产品。到目前为止还没有看到 PWA 特别大规模流行的趋势，但它其实已经出来蛮多年了，大家可以关注一下。这几个技术的此消彼长，其实是蛮有意思的事情。

4、2015 年
时间飞快地来到了 2015 年，由于之前“无线 All In”的事情，从很多团队调派了人手，集中人力去做了这么一件大事，所以作为团队留守的一些成员来说是比较伤的，因为业务被裁撤，人员也减少了。但是我们团队有一部分同学留下来了，我是其中之一，我们仍然在摸索 PC 端的一些可能性。这个时候其实新一代的研发框架已经逐步地生长起来了，最早的是 2010 年的 Angular 以及 2013 年 React.js 和 Vue.js。在这几个框架当中，我们并没有犹豫太久。在 2015 年的时候我们团队就决定要使用 React。原因比较简单，因为 React 可能比 Angular 好用，比 Vue 灵活。但是这个不牵涉语言之争，仅仅是我们团队的一个选择哈。

在那个时候，我们并没有太长的时间去喘息或者迷茫，很快我们又忙起来了，为什么呢？因为 2015 年被称为 toB 元年，那一年发生了很多的事情，我们就发现其实 toB 的业务也非常地繁茂、非常地有前景。所以这个时候我们也发布了我们第一个 toB 的 UI 组件库 —— Ant Design，简称 AntD。它从最初的一个非常单一的 toB 组件库发展到今天，已经集合了可视化解决方案、业务场景化模板以及 Mobile 组件库，变成