前言
狙击手都是由子弹喂出来的。今日早读文章由蚂蚁金服
沉鱼授权分享。沉鱼,毕业于浙江大学,年的时候加入了阿里集团,之后又入职了蚂蚁集团。她先后作为NodeWeb框架——Chair的核心开发、BasementBaas服务的技术负责人、九色鹿的技术负责人以及现在云凤蝶的技术负责人。9月26号第十五届前端早早聊大会-前端搞报表,有兴趣的可以了解一下
正文从这开始~~
一、关于我刚刚主持人已经给我做了一个简单的介绍,那这个地方我就不多讲了。我的经历也比较简单,现在是在蚂蚁集团的体验技术部做企业级应用设计研发平台——云凤蝶的技术负责人。其实我做前端不止10年了,已经有12年了。这12年里发生了挺多的事情,所以也借着这个场合,跟大家一起回顾一下,这段时间里前端的整体发展。
二、前端简史我们来看一下前端简史。这一小段的内容,其实并不是从很客观的角度去看前端的发展,更多是结合我个人的工作经历来讲这些事情。
1、年先看一下年,国内成立了第一个前端团队。大家刚刚如果有留意到主持人的介绍的话,会发现其实我是年入职淘宝的。那么那个时候我的主管是怎么发现我的呢?我当时在一家公司里面工作,工作之余还写博客,还会画一些跟程序员相关的有趣的小漫画。我估计大概是因为漫画吸引了非常多的人的眼光,然后就这样进了淘宝。大家可以看一下左边这张图,是年中秋节时淘宝网的首页截图。在这张图上,我基本上是达到了人生的巅峰。大家不要误会哈,这不是我作为一个前端的巅峰,而是我作为设计师的一个巅峰。当时才刚刚流行做节日Logo没有多长时间,那段时间正好我们的设计师没空,这个时候我们的部门老板就说了,沉鱼你会画漫画对吧?那你要不要给我们画个中秋节Logo呀?我想来想去,那就画吧!画了之后这个Logo就真的上线了,被非常多的人看到。这个绝对是我在前端这个行业里面,做为设计师的一个高光时刻了。
大家可能也觉得奇怪,你一个前端,你干嘛画画?实际上年我入职淘宝网的时候,淘宝是没有一个专业的前端团队的,所有的前端同学都在体验技术部,Title应该是叫交互设计师,我们跟设计师是在一个大团队的。实际上那个时候很多的页面布局还使用table这样古老的技术,使得我们的设计师中也有不少人能够自主做一些网页。那个时候前端的同学更多的是专注在像淘宝首页这样一些比较重要的页面上,而一些活动页面之类的,就会由设计师同学从头至尾地完成。直到年年初的时候,我们公司才正式划拨出了一个前端团队,据我所知也是国内第一个前端团队。于是年我们才正式有前端这个行业。
大家看一下右边的这张图,是我刚刚截的淘宝网现在的首页。如果我们仔细地看一下这两张页面,会发现除了页面变得更宽了、能适应更大的屏幕了、设计也更符合当下的审美了,似乎并没有发生什么太大的变化。如果单从这两个页面来看的话,确实是这样,虽然我们使用了各种各样的新技术让页面浏览起来更加顺畅。但实际上前端的发展远不止于此。
2、年~年其实任何一个行业在最初时期的发展都是非常慢的,所以在年到年这4年期间,前端的整体工作都非常的简单,我们可以简单地归结成为“浏览器大战”和“前端框架”这两个关键词。
“浏览器大战”可能对于一些比较新的同学来说,都已经不是很有体感了,因为现在Chrome一统天下,包括年微软也宣布了使用Chromium作为他们的浏览器的内核,所以PC时代的浏览器的兼容性问题已经彻底解决了。但是在当时,大家对浏览器的兼容性问题是非常头疼的。大家看一下左边这个图,有10来种浏览器,这还不是一个完全枚举。所以对于那个时候的前端同学来说,最头疼的事就是要处理前端兼容性的问题。而要命的是,当时IE仍然是市场上的主流,而且它作为一个主流,却又特别的不标准,实现的很多东西都不标准,性能也很差。所以DissIE也成为当时程序员的一个日常活动。中间这幅图当时是比较流行的一幅程序员漫画,大家可以看一下IE大概慢到了什么样的程度。因为当时的条件特别的恶劣,所以程序员在不断地跟这些我们现在看来有些可笑的问题做着斗争。
那个时候也是非常拓荒的时期,我们还缺乏一些基本的基础设施——前端框架就是非常重要的基础设施。那个时候,国内各大厂商都在开发自己的前端框架,在淘宝我就参与了Kissy的开发工作;实际上百度、以及新浪都有自己的前端框架。当时这些大厂之间的前端交流是非常频繁的,所以在有一次交流之后,我回来就画了右边这幅漫画,调侃了一下当时各大厂的前端框架,没想到当时这幅漫画就成为了一个爆款,特别多的程序员看了这个漫画。我们也觉得这种状态好像不是很正常,但是当时的前端并不像现在这样,有这么开阔的行业视野,所以大家在这个局里面困了挺久的。大家也看到,年到年是整整4年时间,这4年不能说毫无发展,但是发展得真的非常慢。
3、年转机出现在年之后,我觉得整个前端行业走上了一个快车道。大家可以看一下左边的这张截图,一看就非常土,年的一个手机淘宝页面,当然我当时有参与它的开发。这么土的一个页面——我们刚刚说PC时代结束了兼容性的问题,而移动时代其实才刚刚开始——哪怕是年这么土的一个页面,它也有非常多得兼容性问题要考虑,可能都是大家意想不到的。比如说,那个时候所谓的智能手机,其屏幕宽度差异是非常大的,我们为了确保每一行的文案都不折行,实际上需要采集当时市面上所有主流手机的屏幕尺寸,然后去做文案字数的适配。实际上在年,手机淘宝已经发展得非常好了,它跟PC没有什么太多的区别。
但我们的发展过程也不是一帆风顺的,特别是在早期的很长一段时间里,手机淘宝的地位可能都类似于一个附属品,或者说一个补充的存在。直到年,整个公司都觉得这样下去不行了,我们必须要加速移动业务的发展。所以当时出了一个非常有名的事件,叫做阿里的“无线AllIn”事件。当时公司调派了非常多的人员、资源去做无线手机淘宝。那一仗算是打胜了,胜得比较惊险。
但是要说业务真正地涨起来、形成MobileFirst这样的用户心智,可能也要到年左右了。当时有一件印象特别深的事情,因为我们的内网里有非常多的人,好几万人,所以大家也经常会在上面做一些自己的产品营销——几万人也是不能忽视的对吧~是在年还是年的双11大促的时候,无线手机淘宝的PD就在内网发言说今年双11大家都来用无线淘宝吧。因为那个时候,不知道大家还有没有印象,秒杀特别火,就是一块钱秒一个特别贵的东西。我们无线淘宝的PD说快来用无线淘宝的页面吧,咱们服务器水位可低了,秒杀一定不会卡。所以大家可想而知,在那个时候,哪怕是我们做成了“无线AllIn”的那个时候,用户量也还没有大到一定的程度,但是趋势已经非常明显了。而现在,大家基本上已经全部都是人手一个手机这样的情况了。在这个事情里面,我们很容易就能看到,哪怕我们在今天看来是一些巨变的事件的发生,也不是一朝一夕的事情。就像我们在年的时候,就已经开始做手机淘宝了,到年无线AllIn,再到市场完完全全以无线为主,这中间有足够多的时间去做反应(准备)。所以很多的时候,我们只要踏准了时代发展的脉搏,就有足够的时间去做相应的对策。
那么为什么说在无线端,浏览器兼容性的问题才刚刚开始呢?是因为一开始的时候,我们做的是NativeApp,这个时候iOS跟Android的程序员是非常稀缺的。很多前端在这段时间里就转做了iOS跟Android开发。但是这两个领域吧,它们的人员培养成本非常高,而且研发成本也不低。在现在这样飞速发展的时代,如果所有的东西都用这两个技术去开发的话,成本是非常高昂的。所以慢慢地H5又重新走上了历史的舞台。因为Web技术的成本特别低,所以我们尝试在无线的App里面加入H5的页面,来处理一些非核心页面的研发。慢慢地,小程序又出现了,这个时候大家就已经知道了,今天的无线、今天的手机端,真正重要的是那几个无线流量的入口,而小程序可能也是非常重要的一个入口。于是Web研发技术又重新回到了历史的舞台。当然最核心的那些App以及最核心的那些页面还是会用原生的iOS跟Android来开发。
大家可以看到,这个页面下面还放了一个PWA,不知道有多少同学见过它,或者对它有体感。它是一个希望能用Web技术做Native应用的解决方案,是Google家的产品。到目前为止还没有看到PWA特别大规模流行的趋势,但它其实已经出来蛮多年了,大家可以