一篇博客带你回顾前端发展的 20 年🫕
“诸侯纷争，群雄割据”：前端如何一路走来？
当初，网景 (NetSpace) 推出其浏览器 Navigator 和脚本语言 Javascript，后被 微软 (Microsoft) 反编译而催生出 IE 和 JScript。刚开始，网景凭借技术创新而领先。但微软将 IE 与 Windows 98 捆绑销售，便将它打败了。这被称作 第一次浏览器大战 (The First Browser War) 。本来，EMCA-262 规范了浏览器对 Javascript 的解释行为。但在此次战争中，它实际上被两家厂商忽视了。这直接导致了后来的 前端兼容问题 。在这样的背景下，“前端人士”入场了……
最初为解决兼容性问题，后造就 jQuery 工具链 (2005 ~ 2008)
前面提到：由于浏览器大战，微软并没有按照规范来实现 Javascript、HTML 和 CSS，导致前端页面难以兼容不同浏览器。所以 CSS Hack、浏览器判别、特性侦测等技术应运而生。2005 年，Protype 诞生，它是一个非常优雅的基础类库。 在当时，它的诞生除了解决兼容问题，还实现了两大影响深远的功能：动画特效 和 Ajax 请求。自 Protype 之后，Dojo、ExtJS、MooTools 等库也陆续出现。当时前端开发模式是选择一个核心库，找一些组件，或者扒别人的脚本进行开发。
2006 年，jQuery 发布，它同样是一个 Javascript 基础类库。 其刚发布之时，并没有如预想般吸引众多人使用。直到 2009 年 Sizzle 选择器引擎 研发成功，jQuery 才取得压倒性的优势、击败同期许多竞争对手。jQuery 的主要贡献分为三个方面：
- 发掘出大量的 DOM/BOM 兼容方案 （例如 Dean Edwrad 的 addEvent()，IE 的 px 转换方案，domReady 的 doScroll 方案，globalEval 的兼容方案等）。
- 以 DOM 为中心的 链式操作，解放了前端开发者的编程思维。开发者们开始注重前后端分离，并要求不能污染 Object 原型对象，不能污染 window 全局变量。
- 促使人们对 CSS1~CSS3 选择器的学习，促进了浏览器原生选择器引擎的诞生。
jQuery 的出现让前端工程师开发更加轻松。工程师如果想实现一个功能，可以搜索出一个好用的 jQuery 插件来实现。那时候大家就整天介绍 jQuery 插件，很少讨论一些底层的实现。这时，前端发展进入了 jQuery 小作坊时代，人们围绕 jQuery 创造出了一条成熟的工具链。
万恶之源？JS 的漫长工程化道路 (2009~2012)
jQuery 的风靡导致了些许问题。当时，前端工程师编写一个页面，可能会引入十多个乃至几十个 jQuery 插件，导致页面上塞满了 <script> 标签，严重影响页面解析与呈现。其次，jQuery 插件质量良莠不齐，导致全局污染问题愈发严重，无法再通过命名空间等传统手段解决。 由于这些问题，前端工程师们对 JS 的模块化需求愈发强烈。
2009 年，ES5 发布。 但 ES5 只是增加了部分方法与特性，没有实现 Javascript 的模块化。于是，部分民间社区自发创造了一些模块化的规范，比如 CommonJS 规范、RequireJS 规范以及国内的 SeaJS 规范 等。自此，JavaScript 开发模式焕然一新了：模块化后的 JS 代码在外面包一层就可以全世界通用，再不用担心全局污染的问题了。模块化还改变了人们的思维方式，前端模板 和 前端路由 相继诞生。
同样是在 2009 年，Node.js 诞生了。 Node.js 以其处理并发请求的高效性打败了同时代的 PHP，使人们可以使用 JS 编写服务端程序。Node.js 迅速流行，很快冒出海量模块，包括：路由管理、状态管理、数据库 CRUD 操作、MVC 框架等等。前端工程师们欢呼：可以不用传统的后端就能自己写一个网站了！ 自此，Javascript 踏上了漫长的工程化道路。
2010 年，智能手机终端激增，移动优先设计理念兴起，响应式 Web 设计渐成主流。人们发现：用旧技术“套模板”后仍需另开发 api 供 APP 使用，不如直接开发 api，让网页也通过调用 api 实现。 自此，前后端正式分家。 后端成为了“CRUD Boy”，只负责提供 api；而前端则需要负责静态页面设计、交互逻辑、处理页面路由等等。繁重的工作使前端工程师疲于应付，再依靠纯粹的 jQuery 技术已经无法满足需求了。
于是，在 2010 年，Google 推出了 Angular.js。 几乎是在同时，微软推出了 Knockout.js，苹果推出了 Ember.js。这三个框架都是 MVVM 框架，相比 MVC 框架多了 双向数据绑定 的功能。大公司的介入，使局面迅速稳定下来，人们很快就拥抱并适应了新的开发方式。 同年，npm 诞生。 npm 是使用 Node.js 开发的一套 CLI，里面包含了脚手架生成、打包脚本、语法风格检测、环境变量插入、代码复杂度检测、自动单元测试、图片与 JS 压缩等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint 等也在同时期出现。
至此，依靠挪用后端开发经验，在大公司和开源社区的共同努力之下，JS 实现了工程化。在此后的两年里，又陆续发生了几件大事。首先， 在 2011 年，Bootstrap 出现，首次采用宫格式响应设计，为后续各前端 UI 框架的设计提供重要借鉴。其次， 在 2012 年，Typescript 出现，使 JS 可以像静态语言一样开发项目，赋予 JS 无限可能，为 JS 开发大型项目扫清了障碍。同时， 构建工具 Webpack 在同年诞生，但此时它还仅仅是一个简单的模块打包工具，并没有引起广泛关注。
版本之子入场，前端的业务场景不断膨胀 (2013~2014)
2013 年，React 由 Facebook 发布。 React 主要用于构建 单页面应用程序 (SPA) 的交互式界面。它引入虚拟 DOM 的概念、组件化开发、单向数据流、使用 JSX 语法等等。React 的出现极大地改变了前端开发的方式，推动了前端开发向组件化、高性能、高效率的方向发展。React 就像它的 Logo（原子）一样：原子组成了物质世界，而 React 组成了前端世界。它在前端领域的影响巨大，成为目前最受欢迎和广泛应用的前端框架之一。随后，GitHub 发布 electron。 它是一个基于 Node.js 和 Chromium 的跨平台桌面应用程序开发框架，允许开发者使用 Web 技术构建原生桌面应用。
2014 年，Vue 发布。 Vue 结合了 Angular 和 React 的优点，同时提供了更简洁的 API 和更灵活的设计。Vue 的开发方式，更像之前的“套模板”的开发形式，使得前端开发者可以无缝过度，深受“老前端”的喜爱。同时，Vue 还组建了极为接地气的活跃社区，大大降低了新手入门的难度。因此，Vue 迅速席卷整个前端圈子，拥有更广泛的开发者基础。
同样是在 2014 年，HTML5 由 W3C 正式推荐为标准。 相较于 H4，H5 更加满足现代 Web 应用对于交互性、多媒体、性能等方面的需求。同时，H5 还引入了许多新的特性和 API，如语义化元素、表单空间、图形和多媒体元素以及各种 Web API 等等。H5 的出现使得 Web 应用的能力得到了极大的提升。同时，CSS3 的新特性开始在主流浏览器中得到广泛支持，如圆角、阴影、渐变、动画、过度、弹性布局等，使 Web 设计的可能性得到了极大的拓宽，可以更好地适应各种设备和屏幕，提供更丰富的视觉效果。正是这一年，前端进入了 HTML5 + CSS3 的时代。
JS 从脚本变成语言，React 与 Vue 分庭抗礼 (2015 ~ 2017)
2015 年，ES6 在万众期盼下终于发布。 ES6 不仅对 JS 进行了语法改进，还增加了类和继承、Promise 等特性，制定了模块化标准。这一年，JS 不再是脚本，而是一门语言，前端开发者也成为了实至名归的工程师。 随后，React Native (RN) 发布。 RN 基于 React 的框架，使用 JS 和 React 的语法构建同时运行在 iOS 和 Android 平台上的原生应用。同年，GraphQL 发布。 它通过自描述，避免了文档和版本控制的困难，使 api 演进更加灵活和可控。
在 ES6 这颗“定心丸”的影响下，Webpack 选择支持 ES Module，在前端社区迅速流行。特别是在 React 和 Vue 等流行框架的支持下，Webpack 逐渐成为前端开发的标配。而后，React 和 Vue 两大阵营逐步稳固。后续的众多技术开发都是在这两大阵营各自展开……
在 React 阵营，Next.js 于 2016 年发布。 它是一个基于 React 的轻量级框架，提供了服务端渲染、静态文件导出等功能，简化了 React 应用的开发和部署。Next.js 使得 React 的应用更易于优化与扩展，同时提供了更好的性能和 SEO 支持，成为构建现代 Web 应用的流行选择。 同年，在 Next.js 的启发下，Vue 阵营出现了 Nuxt。 Nuxt 的功能和 Next 几乎一模一样，给 Vue 提供了开箱即用的丰富功能和工具，使得 Vue 应用更加高效和便捷。
同样是在 2016 年，Sevlte 发布。 它是和 React、Vue 一样的现代化前端框架，不使用虚拟 DOM，相比 React 和 Vue 更加轻巧。然而在当时，Sevlte 的出现并没有改变 React 和 Vue 的“垄断地位”。直到今年以来，随着开发者对其性能优势和开发体验的认可，Svelte 才逐渐成为前端开发中备受推崇的框架之一。
2017 年，在 React、Vue 等组件化开发框架的影响下，DOM 的复用再不是难题。在大型项目下，CSS 的复用性已经名存实亡。 于是，Tailwind CSS 出现了。 Tailwind 的设计理念是提供一组原子类，以快速构建样式，而无需编写自定义的 CSS。这一开发方式深受开发者喜爱，并成为了 Next.js 的默认组件。自 2017 年以后的相当长一段时间里，前端领域每隔一两年都会爆发出新的技术和框架，前端领域也因此进入了 技术通胀 时代，让数不尽的前端初学者们苦不堪言。
技术通胀：移动应用开发与小程序开发时代 (2017 ~ 2024)
2017 年，Google 推出 Flutter。 它是一种用于构建跨平台移动应用的框架，可以同时在 iOS、Android、Web 和桌面平台上运行。此外，Nust 也在同年发布。 Nest 的设计灵感来源于 Angular 框架，借鉴了其模块化、依赖注入和装饰器等概念，用于构建高效且可扩展的服务端应用程序。Nest 的出现填补了 Node.js 生态领域的部分空白，在 Typescrpit 的加持下，为 JS 开发大型后端应用打下基础。
2018 年，在国内畸形的移动互联网发展背景下，各主流平台纷纷推出自己的小程序平台（微信开发者工具、支付宝小程序 Studio、百度开发者平台、抖音开发者平台、QQ 开发者平台）。这带来了 程序多平台发布 的需求。于是，uni-app 发布了。 uni-app 是一款跨平台应用开发框架，可以使开发者使用基于 Vue 的一套代码开发应用，并快速发布到多个平台。之后，在 React 阵营，Taro 应运而生。 它基于 React，其余功能与 uni-app 几乎一样。此后，uni-app 和 Taro 成为国内开发多平台发布程序的两大重要支柱，在“疫情时期”发挥了重要的作用。
2020 年，前端的技术生态完全成熟。这一年，Vue3 发布。 Vue3 增加了组合式开发模式和 TS 支持，并引入了全新的 Composition API。同年，现代化前端构建工具 Vite 推出。 Vite 利用模块热更新和按需编译等，为开发者提供了一种快速、轻量级、现代化的前端构建工具，填补了 Webpack 的技术瓶颈。 2021 年，Svelte 官方推出 SvelteKit。 SvelteKit 直接对标 React 的 Next.js 和 Vue 的 Nust，意在提供 Svelte 风格的全栈框架和应用构建工具。2022 年，华为推出 ArkTS 语言，并确定该语言用于鸿蒙 APP 的开发。 ArkTS 是基于 TS 扩展的语言，使 Web 前端开发者可以无缝衔接鸿蒙 APP 的开发。华为使用 ArkTS 语言，意味着瞬间拥有了大量的开发者基础。华为此举有可能促进所有的终端开发都采用 TS。
2023 年，情况发生了些许转变。首先是 ChatGPT 的爆火导致 AI 编程的出现，许多前端程序员担心会因此丢掉饭碗。尽管这目前还是天方夜谭，但 AI 的出现确实促使各大公司纷纷开始将资源倾斜到大语言模型的训练上。或因此，前端领域在 2023 年很少有真正意义上的技术革新，大家都只是在对各自的框架和工具进行版本迭代和层层加码。这种低迷的氛围一直持续到 2024，开始有人放出“前端已死”的消极信号……
前端已死？未来我们将何去何从？（2025 ~ ?）
2024 年 12 月，蚂蚁金融“前端第一人”玉伯在即刻 APP 上说：“传统编程是手动挡。在 Cursor 辅助下编程是自动挡。用 Devin 的感觉是自动驾驶……我大概率能经历，前端程序员从诞生到消亡的全过程……” 然而，黄玄大牛也在同年的掘金年度技术演讲上提出“前端永生”的说法：“只要人还在和机器进行交互，那前端就不会真正意义上消亡。”。上个世纪，各种“所见即所得”的低代码工具曾取得一时的“爆火”。2017 年，imgcook 得到了铺天盖地的宣传。但最后他们都扫进了历史的尘埃，只有前端成功一路走到现在。或许，新出现的 ai 编程只不过是又一阵短暂的旋风，当喧嚣过去、投机消退，一切都会归于平静……
