一起自学前端开发!

我做前端这 12 年来的感悟

来源:原创    更新时间:2020-09-14 13:18:00    编辑:前端网    浏览:87

@沉鱼,毕业于浙江大学,2008 年的时候加入了阿里集团,之后又入职了蚂蚁集团。她先后作为 Node Web 框架 —— Chair 的核心开发、Basement Baas 服务的技术负责人、九色鹿的技术负责人以及现在云凤蝶的技术负责人。

17394d7148409252.webp.jpg17395276340948c2.webp.jpg

一、关于我

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

17394d7147f7d262.webp.jpg 

二、前端简史

 

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

1、2009 年

17394d714c07349b.webp.jpg

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

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

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

2、2008 年 ~ 2012 年

17394d714c07349b.webp.jpg

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

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

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

3、2013 年

17394d714c07349b.webp.jpg

转机出现在 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 组件库,变成了一个非常大的家族。在去年的时候,我们的 GitHub 仓库的 Star 数也已经超过了 Google 的 Material Design,成为了 GitHub 上同类开源项目当中 Star 数最高的项目。Ant Design 对我们来说其实还是做得挺艰难的,从 2015 年开始一直到现在,我们还是在大力维护它。

这个项目的 Owner 就在我们隔壁组,叫偏右。我有的时候也会调侃他说,你说你们的 Ant Design 这么多人用,它的竞争力到底是什么?他就非常干脆地甩给我两个字:好看。没错,很多时候我们常常强调要有大局观、要有全局的视野,但是我们手上的活儿也不能落下,就是因为这个东西它真的好用,能契合到我们工作当中的一些场景,它就非常地有生命力。

 

除了刚才提到的 toB 的前端框架,那段时间大数据也开始崭露头角了,所以相关的可视化的图形库也非常多,包括百度的 Echarts,蚂蚁的 DataV。最早的时候大家可能会用这些图表来做一些可视化的用户行为分析,包括 CNZZ 还有 Google Analytics 这样的东西。但是慢慢地行业就逐渐向深水区发展了。

在 Keynote 的右上角是我们的一个业务分析场景,这个场景特别复杂,可能会有数十万个节点要去操作,这样复杂的场景,又给技术带来了新的挑战,比如说:数十万的节点的计算如何保证性能,如何呈现能保证向用户有效地传递信息等等,这些新的问题都有待我们去解决。实际上我们的业务越来越复杂的话,就会推动技术进一步的发展。

而 Keynote 的右下角是一张非常漂亮的大图,是可视化发展的另一个分支,这个分支比较高端,叫大屏。大屏上的东西特别漂亮,一般来说大家会在企业的接待处或者政府机关看到这种大屏,它其实是有几面墙那么大的。它对视觉的要求是非常高的,大家可以看到它非常精细。最近也在流行一个形容这一类大屏的词,叫做数字孪生,就是用数字化去打造一个跟我们生活当中一模一样的城市,通常都会用于做交通管控或者金融管控,这种时候大屏就会非常有用。这类大屏之所以足够特殊,就是因为普通的电脑根本就跑不起来,它是需要有特殊的机器来承载的。

刚刚说的这两件事,其实我是一行代码都没参与,都是我们隔壁组的同学做的事。

 

那这段时间我干嘛去了呢?我在做这件事。因为随着 2009 年 Node.js 的发布,前端逐渐有了一些想象力,就是能够去做一些后端的事。倒不是说没有 Node.js 就做不了,你可以用 PHP,也可以用 Java,但是对于前端来说 Node.js 有天然的亲和力,因为用 Node.js 的话,你的前后端语言是一样的,有很多问题你自己就可以解决。

虽然 Node.js 一直都被作为一个玩具般的存在,但实际上它已经发展了很长的一段时间,包括 2010 年的时候 Express 框架发布、socket.io 发布,2011 年的时候 LinkedIn、Uber 上船,2013 年的时候 Ebay上船。2013 年还发生了一件比较特殊的事情,那就是激进派的 Web 框架 Koa 诞生了,它的诞生给大家带来了一些新的思路和启发。所以我们团队在 2014 年的时候就开始计划要去做一个 Node.js 企业级的 Web 框架。

大家看中间的这一张图,这是我们当时的代码提交的记录图,可以看到至今还是非常活跃的。这个框架叫做 Chair,我在这个框架里面主要是参与打通跟现有技术体系的连通的这一部分。下面的叫做 egg,是 Chair 的一个开源版本,也就是说对于其他公司的同学来说,如果他想用这个东西的话,他可以基于 egg 来做自己的企业级 Web 框架。那么在这个框架上,我们的第一仗是什么呢?在当时流量最 Top 的支付宝收银台页面上,我们把它用上去了。

实际上这个过程是非常坎坷的,首先有非常多的技术问题要去解决,比如性能、安全性。比如说你说性能不好对吧?实际上 Node.js 非常擅长的就是 IO 密集型的处理,所以我们可以去做 Benchmark,看看到底是 Java 的性能好,还是 Node.js 的性能好,这些问题都是相对容易解决的。比较难的是,当时我们是没有一个配套的研发流程的;我们也需要融入现有的研发体系,因为现有的研发体系完全是寄生在 Java 之下。其实很长一段时间里,前端都没有自己的发布流程,前端同学写完了一个模板语言之后,他需要把脚本提交到仓库里面,由 Java 的同学去做最后的发布。另外还有一个更深远的问题,那就是要考虑相关研发人员的培养。因为大家都知道,在大学里面大家都是受过相关技能教育的,所以对于学 C、学 Java 的同学,他可能从学校一毕业出来就带着这样的技能;但是到现在为止 Node.js 也不是一门大学里的常驻课程。所以这个非常难。当时这件事难点非常多,但是其他的就不细讲了,就讲讲当时我参与的那部分工作。当时我主要是做了两类工作。

一类是跟现有的 Java 服务器打通的工作,跟Java 服务器打通是非常麻烦的事情,你经常需要去解析它的 RPC 请求,你需要知道它的协议是什么…… 所以在这段时间里,我写了很多的协议解析代码,包括一些像 Java IO 这样的协议解析,让它能够真正地跟 Node.js 端连通起来,让我们能够真正地连上生产端的各种各样的服务。

另外一个当时非常现实的困难就是,我们除了现在在 Keynote 上看到的这个支付宝收银台页面,实际上还有大量的业务,如果我们希望这个东西能够大量使用的话,我们不能把这个业务里面的代码全部推倒,都重新手写一遍,我们不能这样折腾这个业务。当时我们在 Java 体系里面使用的是一个叫 Velocity 的模板,这个模板它坏就坏在它太灵活、太高级了,它跟现在的 Vue 这样的模板语言是完全不一样的东西。它可以说是非常接近编程语言的一个模板语言。那怎么办呢?当时我们就写了一个转换解析器,把 Velocity 的模板语言转换成了 nunjunks 的模板,实际上 Velocity 模板语言的能力是 nunjunks 的超集,我们在转换过程中,还做了非常多的功能检查,在转换完成后,还会提示开发者在这个过程中发现了多少问题是需要人工转换的。

通过这样一系列的努力,我们能够真正地在既有体系里面跑起来了。所以如果大家做一个新东西时希望证明自己的话,最好的方式就是去做一个标杆项目。当时我们拿流量最高的支付宝收银台页面去做,还好最后做成了。2014 年的种子在后面就开花结果了,到了 2015 年的时候,这个框架基本上受到了比较广泛的认可。 

其实 2015 年还发生了很多的事情,大家可能也不是很记得。其实 2015 年也是钉钉发布的第一年,在这一年里,有一个关键词叫做 Electron,Electron 是一个能让 Web 开发的同学用 Web 开发相关的技术做 Native 应用的一种技术,它最早其实是 GitHub 的 Atom 编辑器的副产品 —— 它一开始确实是个副产品,而后面就变得独立起来了。

在这方面有两个我觉得比较好的应用:一个是支付宝的小程序 IDE,它最早也是用 Electron 来开发的;一个就是我们的钉钉。大家都知道其实很多开发钉钉的同学,早期都是做“来往”的,所以里面有非常多前端的同学。后来大家转向钉钉之后,要做 Native 的App,大家是没有那么多的经验的,人又特别缺乏,我们又希望能够尽快做一版出来校验一下,看看是不是能得到市场的认可。所以那个时候一帮前端同学就用 Electron 技术把钉钉的第一版给做出来了。虽然最终钉钉的版本还是换成了 Native 的版本,但是实际上 Electron 的版本也运行了很长一段时间,直到最后被大家反馈有比较多的性能问题。但是实际上这也是见仁见智的,很多时候大家在说了一大串性能有问题的时候,我们经常会举一个例子:你去看看 VS Code,VS Code 慢吗?VS Code不慢,VS Code 可是用 Electron 来做的。所以很多时候我们也要看这个技术到底被用得怎么样,这也是很重要的。 

2015 年还发生了这件事,如果不提那就肯定是漏掉了。Alpha Go 掀起了一场全民人工智能的浪潮,这波浪潮直到今天还在继续。其实早在 2015 年的时候,我们就有一些团队在跟进这个领域了,但是这里我要说的是,人工智能研究和人工智能应用完全是两件事。如果想要做人工智能研究的话,基本上除了重新回去读个书可能还有点机会之外,剩下的应该就没机会了。因为这个行业的竞争其实非常激烈,绝对得是人中龙凤 —— 这个词用得一点都不夸张,一定是人中龙凤才能来做这件事。

但人工智能应用会越来越广泛,它的门槛也会越来越低。我们在这方面做了一些应用上的尝试,包括 2015 年阿里的智能设计平台,以及 2018 年的智能设计稿转代码平台。这两个平台都是贴着营销大促这个场景在跑,因为当时在双十一或者 6.18 大促期间的 Banner,或者这种推荐产品的图,它们的量级已经达到了上亿级别,这已经根本不可能靠人工去做了,所以我们只能向技术要产能。所以大家想到了这样一些办法。还有一个就是我们团队现在在做的,蚂蚁企业级应用设计研发平台。可能大家会说,这看起来不就是一个 IDE 吗?它是怎么个人工智能法呢?这里我们先按下不表,待会再说。

5、2018 年

 

2015 年真的是技术发展非常蓬勃的一年,当然虽说很多技术可能在更早的时间 —— 比如说 2008年、2009 年 —— 就已经出现了,但是对于我而言,我觉得特别重要的那些技术,可能都是在 2015 年、2016 年那两年感知到的,那个时候技术真的是出现了一个大爆发,而且出现了非常多的能很好地落地到业务里的应用。这些技术现在仍然还在发展,但是近几年非常繁荣的可能是我们的 Web IDE 和 Web Editor。

这是我截的一个我们公司内部的一些相关产品的图,非常多,至少有 10 个,肯定还有很多我不知道的,就像前一个分享讲师讲的他们的 IDE,那个我就不知道。

大家可以从左到右看一下,最早的是大屏可视化数据分析类的产品,这个是跟着大数据的浪潮来发展起来的;然后到中间人工智能的这一波浪潮,Data Works 大数据开发以及 Pai 人工智能可视化开发;到第三列的支付宝小程序 IDE 和我们的 H5 & 小程序建站 IDE,最年轻的两个 IDE 是我们的 Cloud IDE 也就是云 IDE,以及云凤蝶企业级应用设计研发平台。

除了这些程序向的 IDE 之外,还有一些其他的复杂 Editor 的出现,即下面以语雀为例的富文本编辑器以及电子表格等。所以如果我们今天回头来看整个前端的发展,会发现实际上是非常迅猛的。很多工作年限比较短的同学,甚至都无法想象在 2008 年我们前端面临的是那样的一个场景。所以业界不是有句名言嘛,说凡是能用 JavaScript 做的东西,最终都会用 JavaScript 做一遍,包括现在的 IDE 都是用 JavaScript 在写了,所以还挺神奇的。

6、2020 年

 

大家可能会说,你们前端这么牛,你们怎么不上天?其实确实上天了,大家可以看一下,2017 年 NASA 就已经上船 Node.js 了;在刚刚过去的 Space X 的发射中,大家也发现他们使用了前端的相关技术来做触控大屏。当然这条推文仅供大家娱乐一下,因为这条推文其实并不是 Space X 的工作人员发的,而是 Google 的一个程序员发的。这里引发了大家比较多的讨论,我觉得有些回复比较有趣:有人说 node_modules 有没有让飞船超重啊?大家可以看一下截图的回复中间,有一个老爷爷,它其实是 JavaScript 的创始人,他仍然很活跃,经常做的事情之一就是反驳别人说 “JavaScript 就是个玩具语言”。这一页给大家娱乐一下。

发展到现在,其实我们会发现,首先前端的领域性越来越广了,在最初的前端行业里面,大家所要知道的东西就是 CSS、JavaScript、HTML,以及一些周边的东西,但是并没有像现在这样有那么多重要的东西能够去玩;另外一个是,它的难度确实是越来越高了,大家会发现整个前端的工作是一路向上延续的,从写页面到写编辑器,到移动端的浏览器内核,一路在向上,在向上的过程中对事情有更多的把控力。这两个趋势非常明显。那么对于我们而言,我们要想的是,我们作为今天的前端,是不是可以满足于做的那些页面?答案肯定不是,我们要去看前端的后续发展中下一个浪潮在哪里,我们要踏对浪潮的脉搏,可能才会有更好的下一轮发展。

这个大概是我对前端过去这 12 年的简单总结。这个总结其实是非常个人的,有一些关键技术也没有出现在今天的分享当中,比如说 IoT,比如说 Web Assembly 等一些技术,相关的同学也可以去关注一下。


评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜