"切图仔"（2006）
- 在 css3 之前，前端开发者能做的事情很有限，前端语言的能力非常薄弱
- 一个简单的圆角矩形样式要拼八张图片，更别提动画阴影之类的特效
- 大量的工作时间都是在拆卸设计稿，然后将做完后的静态页面交给后端
jQuery 问世（2006）
- jQuery 是对原生 js 的封装，简化了繁琐的 js 开发
- 开发人员可以更容易地操作 html 、处理事件、创建动画和发起 AJAX 请求
- 前端开发者已经可以承担一部分交互了，比如异步表单之类的
- 最终实现较为稳定的开发方式：DIV+CSS+jQuery+后端渲染
随着 web 项目开发越来越复杂，原生 ccs 的开发效率已经不能满足需求
CSS 预处理器——Sass 诞生（2007）
- Sass 提供类似编程语言的功能，包括变量、嵌套规则、混合、继承、函数等
- Sass 不能直接在浏览器执行，需要配置的 ide 插件等工具编译成 css 文件
- 帮助开发者更高效的编写和组织样式表，但此时前端地位依然远低于后端
ES5 + Node.js （2009）
- ES5 统一更多标准，增加了一些方法特性；没有革命性变化
- Node.js 是基于 Chrome V8 引擎的 js 运行时环境，用于构建快速可扩展的网络应用
- Node.js 可用于编写服务端程序；Node.js 采用非阻塞 io 模型，能高效处理大量并发请求；Node.js 的响应效率上比同时代的 PHP 更有优势。Node. Js 也因此而逐渐流行发展起来
- 伴随 Node. Js 的流行，js 项目的模块化工程化需求日益强烈；于是民间社区自发的创造了一些模块化的规范，例如 CommonJs 规范（Node. Js）、AMD 规范 （RequireJS）以及 CMD 规范（SeaJS）
- 这些规范也直接影响了后续 ES 6 的发展，使得前端工程化提上日程
- 同年 Less 发布，其受 Sass 启发，为开发者提供一种更高效和便捷的样式表编写方式
智能手机终端随着互联网的兴起而爆发式增长（2010）
- 移动优先设计理念开始兴起，要求网站能够在各种设备上提供一致的用户体验
- 网站需要能够根据访问设备的不同，自动调整布局和样式，以适应不同的屏幕尺寸；
- 项目开始普遍使用前后端分离技术，即统一使用 api 调用来兼容复杂多变的开发场景
- 在制作静态页面基础上，前端开始承担更多的工作——处理页面，路由交互逻辑等
- 此时 jQuery 技术已经无法满足开发需求，期间也有短暂出现过一些 js 的模板引擎。但是效果并不好，于是 2009~2010 年期间由 google 发布的 AngularJS 框架出现了
AngularJS 引入了双向数据绑定、依赖注入和模块化等许多新的概念；为 web 开发带来了革命性的变化。也为后续的 SPA 框架发展奠定了基础；然而 AngularJS 是典型的“精英”框架，他直接沿用了 MVC 的后端思想,加上很多首创的概念，所以学习曲线较为陡峭，晦涩难懂，因此并不怎么流行~
Express + npm（2010）
- Express 是一个用于构建 web 应用和 API 的 web 应用框架
- Express 构建 web 应用十分容易和高效，也使得 Node.js 开发后端程序流行起来
- 同年 NPM 也出现，Node.js 开发者可以方便地管理、共享和管理包和依赖项
- 至此，依靠庞大的开源社区生态，前端技术逐步完成了工程化（支楞起来了）
Bootstrap 响应式框架（2011）
- 首次使用“宫格”响应式的理念，预制丰富的样式和组件
- 极大提高了前端开发效率，并为后续的各前端 ui 框架起到前驱意义
TypeScript（2012）
- 由于 js 是动态语言，因此基本与大型项目无缘，否则需要承担巨大的维护代价
- 而 TypeScript 的出现使得 js 可以像静态语言一样开发项目，进而具备更多的可能
- 同年 Webpack、Grunt 发布，作为简单的模块打包工具，当时并没有引起广泛的关注
React + Electron（2013）
- 由 facebook 发布，主要用于构建单页面应用程序（SPA）中的交互界面
- React 引入虚拟 DOM 的概念、组件化开发、单向数据流，使用 jsx 语法等
- React 的出现推动了前端开发向组件化、高性能、高效率的方向发展
- React 在前端领域的影响力巨大，是目前最受欢迎和广泛应用的前端框架之一
- 构建工具 Gulp 和 Koa 也在同年发布；Koa 是 Express 的下一代框架。旨在解决 Express 中一些设计上的限制和缺陷，使得异步编程更优雅。代码更清晰，应用更加灵活
- 随后 Github 发布 Electron，它是一个基于 Chromium 和 Node.js 的跨平台桌面应用开发框架，允许开发者使用 web 技术来构建原生桌面应用。前端技术开始逐步渗透到更多领域
Vue + HTML5 + css3（2014）
- Vue 结合了 AngularJS 和 React 的优点，提供了更简洁的 API 和更灵活的设计
- Vue 的开发方式更接近传统的“套模版”形式，深受老前端的喜爱
- Vue 极为接地气，同时社区活跃，开发文档完善，因此迅速流行起来
- Vue 拥有更广泛的开发者基础，是成为目前最受欢迎的前端框架之一
- 同年 HTML5 正式推出，解决了很多历史缺陷，同时为满足现代 Web 应用对于交互性，多媒体、性能等方面的需求，引入了许多新特性和 API，比如语义化元素、表单控件、图形和多媒体元素等
- 同时 css3 的新特性开始在主流浏览器中得到广泛支持，比如圆角、阴影、渐变、动画、过渡、弹性布局等，这都使得 Web 设计的可能性（设备兼容/视觉效果丰富）得到极大的拓宽
2014 年前端进入了 HTML5+css3 的时代，那个"切图仔"的时代也结束了
由于 HTML5 的影响深远，因此 HTML5 也逐渐沦为移动端网页的代名词
ES6 + GraphQL（2015）
- ES6（ECMAScript 6）对 js 进行了语法改进。还增加了类和继承、Promise 等特性
- ES6 制定了模块化标准以提供了更好的开发工具和语言特性，使得 js 变得更加现代化
- 2015 年对前端开发是意义非凡的；js 成长为一门语言，而前端开发者则是实至名归的工程师
- 随后 React Native 发布，React Native 是基于 React 的开发框架。开发者通过 React Native 可以使用相同的代码库来构建同时运行在 ios 和安卓平台上的原生移动应用
- 同年 GraphQL 发布，GraphQL 是一种 API 查询语言。客户端可以通过一个请求获取多个资源的数据，避免多次请求的情况，减少了网络请求的次数并提高了性能
- GraphQL 可以查询可用字段和类型，避免了文档和版本控制的困难，使 API 的演进更加灵活可控
Webpack + Next.js + Svelte（2016）
- 在 ES6 的影响下，Webpack 开始支持 ES Module 并在前端社区中迅速流行起来
- 在 React 和 Vue 等流行框架的支持下，Webpack 使用逐渐成为前端开发的标配
- 之后 React 和 Vue 两大阵营逐步稳固，后续的众多技术都是在这两大阵营各自展开
- Next.js 也在同年发布，作为一个基于 React 的轻量级框架，提供了服务端渲染，静态导出等功能
- Next.js 简化了 React 应用的开发和部署，使得 React 应用更易于优化和扩展，同时提供了更好的性能和 SEO 支持。最终成为构建现代 Web 应用的流行选择
- 在 Next. Js 的启发下。Vue 阵营出现了功能与之极为相似的 Nuxt；Nuxt 给 Vue 提供了开箱即用的丰富功能和工具，使得 Vue 应用开发更加高效和便捷。
- 同年 Svelte 发布，作为和 React 和 Vue 一样的现代化的前端框架。Svelte 由于没有采用虚拟 DOM 技术因而更加轻巧；近年来随着 Svelte 性能优势和开发体验的认可逐渐成为流行的前端开发框架之一
Tailwind CSS + Flutter（2017）
- Tailwind CSS 的出现是为了解决大型项目中 CSS 的复用问题，Tailwind CSS 提供一组原子类快速构建样式，而不需要编写自定义的 CSS，这一开发方式广受开发者喜爱
- Tailwind CSS 成为 Next 框架的默认组件，至此 Sass、Less 完成了他们的历史使命
- 同年 google 推出 Flutter，一种用于构建跨平台（IOS/Android/Web/桌面平台）移动应用的框架
- 此外 Nest 也在同年发布。Nest 的设计灵感来源于 Angular 框架，借鉴了其模块化、依赖注入和装饰器等概念，用于构建高效且可扩展的服务端应用程序，弥补了 Node.js 生态系统的部分空白
- Nest 对 TS 的支持，为未来 js 开发大型后端应用打下基础
移动互联网发展畸形，各个平台纷纷推出自己的小程序平台（2018）
- 受此影响，开发者需要在不同平台挨个适配一款应用（简直是灾难级体验）
- 于是跨平台应用开发框架 UniApp 出现，可以基于一套 Vue 的代码开发应用并快速发布多个平台（包括 IOS、Android、H5、各平台小程序等）
- 随后，与之对标的 Taro 也在 React 阵营中应运而生（功能与 UniApp 一模一样）
- 小程序作为经济发展的产物，UniApp 和 Taro 在开发中出现了数不尽的兼容问题
- 不过 UniApp 和 Taro 在未来的疫情三年充分发挥了他们的作用（人员统计/健康码等）
Vue3 + Vite （2020）
- 前端开发的技术和生态都已经成熟；Vue3 发布，增加了组合式开发模式，增加了 TS 支持，引入了全新的 Composition API，更加适应现代化前端的开发模式。
- 同年 Vite 发布，Vite 利用模块热更新，按需编译等特性，为开发者提供了一种快速、轻量级、现代化的前端构建工具，填补了 Webpack 的性能瓶颈
SvelteKit（2021）
- Svelte 官方推出了 SvelteKit；和 Next 相同功能的框架，极大丰富了 Svelte 生态系统
ArkTS（2022）
- 华为推出 ArkTS 语言，并确认该语言用于鸿蒙 app 的开发
- ArkTS 是基于 TS 扩展的语言，意味着如果会 web 前端。也就会鸿蒙应用开发
- 华为使用 ArkTS 语言。意味着瞬间拥有大量的开发者基础，同时很有可能促进所有的终端都采用 JS。而那时前端技术将迎来大一统
Next.php（2023） 年
- Next14 版本中推出的 server action。允许开发者直接在组件编写服务端代码
- 该除前后端分离的开倒车行为，受到很多人的质疑，Next.js 也因此被人戏称为 Next.php
展望未来（2024）：
- 前端技术已经渗入了各个领域，未来有无限的可能
- 也许互联网不再像以前一样风光，没有了热钱，没有了喧嚣
- 但它只是回归到它本该有的平静
- 投机退去，剩下的是真正热爱它的人