从 jQuery 到 Serverless

Posted 2021-04-08 腾讯云云开发

导语

From jQuery to Serverless，不仅标志着前端框架的高速革新，也“见证”了一大批开发者的青春芳华。芳华虽易逝，记忆却长留，深度好文带你回顾匆匆十四年间前端江湖的风云变幻。

 

▌一、前言

最近几年，前端技术加速发展，各种框架层出不穷。遥想 2005年末 jQuery 出现时的情景，不觉之间已过去了 14 年的光阴。我的职业生涯与此几乎完全重叠，中间跌宕起伏，感触尤深。

我们先聊聊前端开发中的三个典型大“坑”，然后再概要回顾前端框架的演进历程，因为很多框架都是为了填这 三大“坑”而出现的。 在回望来路的过程中，或许能让您找到点儿感觉。

▌二、前端开发三大“坑”

一号坑：浏览器兼容问题

2000 年前后，在第一次浏览器大战过程中，Microsoft 通过在操作系统中内置浏览器的方式战胜了 Netscape。从那以后，浏览器厂商之间的竞争更加激烈。

Netscape 死而不僵，旗下的 Firefox 一直试图跟 IE 再分高下。

2008 年 Google 发布 Chrome 浏览器，与 IE 展开正面对决，这是第二次浏览器大战。

大厂神仙打架，遭殃的是开发者和设计师。同样的代码，在标准浏览器里面运行得很好，在 IE 里面各种不服。为了解决这些恶心的问题，他们加了无数班、熬了无数夜、发明了无数轮子。

从Chrome 1.0 到现在 11 年过去了，在Microsoft 持续作死的操作下，IE 系列终于从全球超过93% 的市场份额一路狂泻到今天的 16% 左右，并且还在持续向下。不出意外的话，很快就会到 10% 以下。

与此相反，Chrome作为后来者，市场份额从最初可怜巴巴的 0.2% 发展到今天的70% 左右，走过了 2 个经典的死亡交叉。

最近，Microsoft发布了基于 Chrome 内核的 IE 浏览器。这是一个标志性的事件，它意味着持续了 11 年的第二次浏览器大战以 Chrome 的全面胜利而告终，开发者们终于可以松口气了。

愿天下再无 IE 浏览器。

二号坑：残破的工具链

在工具链这方面，Java 开发者很幸福。

从早期的Borland JBuilder，到 2007 年左右 IBM发布的 Eclipse，再到最近的 IDEA，所有开发、调试、测试、部署操作全部可以在 IDE 里面完成。IDEA 最近还加上了 AI 功能，想不到机器人也来抢饭碗。

与后端相反，在NodeJS 出现之前，前端开发一直缺乏完整的开发、调试、单元测试、部署工具链。

IE 到 8.0 才有开发者工具，我们很难想象在此之前开发者们是如何在 IE 里面调试 JS 代码的。或许只能一路 alert() ?

二号坑： JS 混乱的模块化机制

在 Java 中，JVM 会自动检查Class 之间的依赖关系，如果发现依赖的 Class 不在内存中，JVM 会自动调用 ClassLoader 完成加载、校验、初始化等操作。这个过程是自动的，不需要程序员操心。

JS 没有在语言层面提供完善的模块化机制，这个问题直到现在都没有最终解决。为了控制多个 JS 文件之间的依赖问题，搞出来一堆轮子：CMD、AMD、UMD、import() 函数……

这些机制看起来很相似，但又略有区别，总有一款能恶心到你。

模块化的天坑深不见底，不知何时能完美解决。如果一定要找人背锅，Branden Eich 肯定跑不掉。

▌三、前端框架的石器时代

在 WEB 发展初期，浏览器非常简陋，Netscape 在 1994 年发布的Navigator 1.0 只能渲染数量很少的 html 标签。那时候还没有 javascript，JS 要等到 1年之后的 1995 年才出生；也没有 CSS，因为 CSS 的第一个演示版本在 1994 的 10 月份才刚刚出现。

1995 年末， 以Netscape 和 SUN 公司为首，联合了业界 28 家巨头，共同宣布 JavaScript 正式发布，其中有很多耳熟能详的名字：America Online、Apple、Borland、Macromedia、Oracle、Sybase、Toshiba......

想当年，28 路诸侯齐聚山景城，高举 JavaScript 大旗，共同讨伐 Microsoft 。

JavaScript 深受 Java 的影响，很多特性来自于 Java，比如：自动垃圾收集机制、内置类型，等等。当年 Netscape 开发 JavaScript 的时候，SUN 公司派出了自己的工程师，两家一起联合开发了一段时间，因为他们两家必须联合在一起对抗 Microsoft 。所以，Java 和 JavaScript 并非“雷锋和雷峰塔”的关系。一直以来，Java 和 JavaScript 都是 SUN 公司的注册商标，现在归属 Oracle 所有。

早期的 WEB开发者面对的技术环境非常恶劣，他们手里的工具很简陋，就像石器时代的原始人一样，拿着弓箭和石头去打猎。那时候没有人谈论前端的工程化、模块化，技术上也做不到。这种状况从 1994 年 Navigator 1.0 发布，持续到 1998 年 CSS 2.0 成为推荐标准，前后有 5 年左右。

石器时代的代码跟粗糙，经常一个 HTML 页面上写好多 <script> 标签，类似这样：

当我写这段代码的时候，只有我和上帝看得懂。  

现在只有上帝看得懂。

▌四、农业时代

粗略地算，前端开发的农业时代从 1999 年持续到 2008 年，总计10 年。

因为 2008年 ECMA 在经过 9 年的争吵和政治妥协之后，终于发布了 ES5 这个历史性的版本。而 2009 年因为有了 NodeJS，很多东西已经可以大规模自动化处理，就不能算在农业时代了。

2005 年之后出现了一些小型的 library，比如 Prototoye、Mootools，它们对粗糙的 JS 基础 API 进行了封装，就像农业时代的耕牛一样，部分解放了一些人力，但是仍然没有做到大规模机械化生产。

这些library 非常迷你，比如 Prototype 总共不到8 千行代码，压缩下来也就 5K 的体积。所以它们还称不上 Framework，只是小工具而已。

2005 年末，2006年初，前端开发迎来了第二个历史性的时刻，jQuery 的出现帮助开发者屏蔽了恼人的浏览器兼容性问题，同时借助于当时 WEB2.0 的概念一飞冲天，它开启了一个属于自己的全新时代。jQuery 1.3.X压缩之后有 110K 的体积，比它的前辈们膨胀了 10 倍。

2007年，前端领域迎来另一座高峰，JackSlocum 在离开 Yahoo！的 YUI 实验室之后，发布了开源免费的 ExtJS 框架。由于 Jack 本人的技术背景，ExtJS 整体上采用了 Java Swing 的设计思想，框架本身的源代码也是满满的 Java 风。

Ext框架组件丰富、界面精美，可以在浏览器环境中构建出类似桌面端应用的效果，迅速占领了大量后台管理系统的开发者。

以DataGrid 组件为例，它基本上在浏览器环境中实现了简化版的 Excel 功能：复杂表头、字段过滤、单元格实时编辑、分页加载、MVC 模式……DataGrid 的功能由多个组件组合而成，整体代码有 2 万多行，编写和维护都需要消耗很多时间。

在ExtJS(Sencha) 6.X 中，整个框架的 JS 代码多达 24 万行。如此庞大的体积，对初学者极其不友好，加上 Jack 离开之后的收费策略，整体发展陷入低谷。

从 2008 年到 2010 年，AdobeFlex 是夜空中最亮的星，可惜是颗流星。

Adobe Flex 基于 mxml和 ActionScript 3 开发，编译成 swf 文件运行在 Flash 播放器里面。整个平台的思路与 Java 如出一辙，Flash 播放器被称为 AVM（AdobeVirtual Machine），而 swf 被称为 ABC 字节码文件（Adobe Binary Code）。

Adobe Flex 借助于Flash 播放器这个 AVM 虚拟机实现跨平台，而且开发出的界面很漂亮，所以当时大家担忧的问题是： AS3 要替代 JavaScript 而一统天下！

是不是总感觉这句话怪怪的，在哪儿看到过？

2010 年 4 月，Steve Jobs 发了一份著名的文章：Thoughts On Flash。他在这篇文章里面火力全开，全面列举了 Flash 平台的 7 大类问题，包括：

l  不能支持完整的WEB 标准

l  性能差，移动端消耗电量大

l  安全性问题太多

l  对触摸屏支持不友好

......

 

这篇文章至今还挂在 Apple 的官网上。

https://www.apple.com/hotnews/thoughts-on-flash/

Jobs 的文章发出之后，很快所有 ios 设备不允许运行 flash ，然后 Andriod 平台也半推半就开始跟进。

Adobe 也迅速做出了反应，他们先是不承认 Jobs 的观点，然后批判 Apple 试图垄断市场。发现反驳无效后，他们决定全面退出移动端，然后把 Flex 捐赠给了 Apache 基金会。接着，开发者大量出逃，整个 Flex 平台雪崩式瓦解。

在 2010 年那样一个关键时刻，居然有一家公司宣布全面退出移动端，思路之清奇、操作之风骚，令人叹为观止。在技术决策方面，只有 Nokia 和 Black Berry 能与 Adobe 比肩。从先锋变成先烈，一手好牌打个稀烂。

2017 年 7 月，Adobe 官方正式宣布，整个 Flash 平台将会在 2020 年之前彻底终结。从 2004 年收购 Macromedia 开始算，Flash 技术栈活了 16 年。

在我的职业生涯中，有 4 年左右的时间在研究 AS3 和 Flex，开发了不少业务系统，包括框架。突然有一天，这个平台说没就没了，没有一丝防备。

2008 年的时候，很少有人会预测到，Adobe Flex 将会成为前端农业时代的帝国余晖。

▌五、工业时代

2009 年，终于等来了NodeJS ，它开启了前端开发的规模化、自动化时代。

之后，出现了大量基于 NodeJS 的工具和框架，有效地解决了前端开发中的第二个大坑：工具链的问题。以前很多做不到的事情，有了 NodeJS 之后都可以实现了。

从 2009 年到今天，NodeJS 平台持续向各个方向延伸：

l JS 代码的编译压缩混淆：

Grunt、Gulp、Webpack

l CSS 预编译器：

LESS、SASS

l  单元测试和集成测试：

Karma+Jasmine

l  服务端框架：

Express、Koa、Nest

l  IOT：

Cylon.js

l  桌面端：

Electron

▌六、移动互联网时代

2007 年iPhone 发布 1.0 版本，2008 年 android 也发布了第一个版本。

初期，iPhone 很不好用，Android 更挫，而且那时候 3G 技术刚开始全面铺开。因此，人类真正进入移动互联网时代要等到 2011 年左右。

彼时，iPhone4S 已经发布，4G 网络已经上路，陌陌和微信都开始摇一摇。

2007 年之前出生的框架在设计的时候并没有考虑移动端，因为它们出生的时候压根没有智能手机，比如：jQuery、ExtJS (Sencha)。为了弥补这个短板，后来出现了 Zepto、Sencha Touch 这样的 Hybrid 方案，但是用户体验很差。

对于移动互联网时代出生的框架来说，有一个天然的问题需要解决：如何自动适配各种各样的屏幕分辨率？因此， 2011 年之后出现的前端框架都宣称自己是： 一套框架，多种终端 。而我的脑海里浮现的是： Write once, debug everywhere.

当年业界猛吹H5 和 Hybrid APP，有一个傻子当真了，Facebook第一个宣布彻底用 H5 相关的技术来开发自己的社交 APP ，结果一脚踩到了焦油坑里。后来几经挣扎，Zuckerberg 不得不痛苦地宣布项目失败，退回原生开发。今天的 React 框架，就是当年填坑的副产品。

移动互联网时代出生的框架都要考虑兼容各种终端的问题，这是本质性的差异。

▌七、Serverless时代

2017 年出现的微信小程序，加上最近的“云开发”模式，是前端发展史上的另一个重大里程碑。JavaScript 技术栈开始向云端强力渗透，不再局限于浏览器环境了。

 

在传统开发模式下，开发者除了要考虑业务逻辑本身，还需要考虑很多方面：认证授权、数据备份、文件存储、负载均衡、网络安全、CDN……每一个细节都需要消耗很多精力。

 

在小程序+云开发的模式下，APP 端有微信提供的各种 UI 组件和API 接口。服务端有：NoSQL 数据库、对象存储、云函数、支付接口，等等。开发、调试、真机模拟、发布上线、运营维护，全部可以在微信开发者工具里面一站式完成。

中所介绍的，小程序+云开发很好地实践了 Serverless 思想，前端开发的 Serverless 时代已经开始了。

 

☁

 更多精彩 

云开发，不止于「快」

云开发

Tencent CloudBase

      点击在看让更多人发现精彩