前端发展史 #856

guanhui07 · 2024-11-30T10:53:35Z

看看大前端工程化发展史.

什么是前端

现在的前端其实是个很大的范畴（web，移动端（Hybrid App），游戏，桌面端(electron.js、NW.js)，小程序等）。

我们在做的工作基本上是web前端开发——针对浏览器的开发，代码在浏览器运行，
它实质是前端代码在浏览器端被编译、运行、渲染成页面。前端代码
由HTML、CSS、 JavaScript构成。Nodejs就属于后端开发了。

Netscape

IE6

1996年11月，JavaScript被Netscape公司提交给ECMA制定为标准，
称之为ECMAScript，标准编号ECMA-262。
最新版为ECMAScript 6（也就是我们常说的ES6）。
符合ECMA-262 3rd Edition标准的实现有：

符合ECMA-262 3rd Edition标准的实现有：

Microsoft公司的JScript.
Mozilla的JavaScript-C（C语言实现），现名SpiderMonkey
Mozilla的Rhino（Java实现）
Digital Mars公司的DMDScript
Google公司的V8
WebKit

Ajax

1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。
这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。

2005年2月，AJAX（Asynchronous Javascript And XML）这个词第一次正式提出，
指围绕这个功能进行开发的一整套做法。从此，AJAX成为脚本发起HTTP通信的代名词。2006年W3C发布了它的国际标准。

为什么说AJAX至关重要呢？前后端分离

在前后不分的时代，静态网页完全满足不了社会的发展对网页的需求，于是，由后端工程师
主导的PHP、JSP、ASP等动态网页诞生了，但是服务端渲染有很多的弊端，服务器压力大，
前后端代码耦合高，交互差，页面的交互需要刷新整个网页，所以AJAX改变了一切，
前端走上了第一个里程碑式的时代。它解放了前端的部分生产力，是前后端分离的先决条件。

切图：2006年之前

网页三件套，DW+PS+Flash，DW是设计工具，PS是图像处理工具，Flash是动画制作工具。

前端切图仔出HTML静态页面 - 后端套模版
Table布局

js+jQuery

对原生js封装
更容易操作html文档，处理事件，处理动画，发起ajax请求等，承担交互
尤其异步表单之类提升用户体验等场景
DIV+CSS+JQuery +后端渲染的开发方式
https://jquery.com/

随着AJAX受到重视，2006年，jQuery就应运而生。它封装了大量的函数，
较少的代码可以做更多的事。有以下特点：

具有独特的链式语法和短小清晰的多功能接口
具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展
拥有便捷的插件扩展机制和丰富的插件
兼容各种主流浏览器

后面诞生Sass 这样的css预处理器，Sass编译为css使用

2006年，Sass（英文全称：Syntactically Awesome Stylesheets）就出现了，它最初是用ruby写的，
后来修改为c++，现在又改成了dart。它出现在这个时间段比较令人意外，不过可以理解，
sass解决的是css模块化的问题，全局命名空间的污染。它可以使用巢状、
混入、选择子继承等功能，最终还是会编译成CSS。

Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，
并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，
即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，
这两套语法通过.sass和.scss两个文件扩展名区分开。

2008年 Google 发布 Chrome 浏览器，从此IE开始衰败

2008年9月2日，Google的chrome浏览器发布，一并发布的Js引擎，就是V8引擎。
V8使用BSD协议开源。V8引擎使用 C++ 开发，将JavaScript编译成了机器码，
而不是字节码，还用很多优化方法提高性能，因此，V8引擎速度非常快，据说使js的性能提升了几十倍。

V8引擎还可以独立运行，可以嵌入到其他任何C++程序中，使在服务端
运行JS成为可能。其意义重大，它间接催生了前端工程化。

同年，搭载Google开源的安卓系统的第一款智能手机发布了，这是移动系统另一场
变革的开端。恐怕Google自己也想不到，Android会轻易干掉当时手机界绝对的霸主诺基亚。

前端的蓬勃发展得益于 Google的V8引擎（2008年出现），Node.js 的诞生（2009年出现）。
V8引擎把 JavaScript 的运行速度提上来了（有兴趣的可以看下 Chrome 第一次
出现的时候，大家对网页加载速度惊叹），有了 Node.js ，前端出现了打包、编译，
变得工程化，前端一下子从石器时代进入到了工业化时代

2009年 ES5（ECMAScript5）发布

https://en.wikipedia.org/wiki/ECMAScript
增加一些标准一些方法特性
比如

Array.isArray(arr)
arr.forEach(function(ele){
     console.log(ele);
});
map()

2009年还发布了Node ,基础于 Chrome V8引擎的JS运行时环境 -采用非阻塞I/O模型

nodejs的出现，标志着一个新的时代的开始。

其实nodejs能做到的东西，其它语言也都能做到，那为什么就它成为前端工程师的标配了呢？
因为Js本身就简单，前后端一套语言的心智成本低啊，不管原来是搞后端还是搞前端的，
都愿意接受。原来造轮子还需要到邻居家借斧子，现在我自家就有了，自己动手，
丰衣足食。流行的不一定是最好的，但一定是容易学习的。

从2009到2013年，正是模块化、组件化的迅速发展时期，满足了前后端分离的先决条件，
诞生了现在的前端三驾马车，也随着webpack的出现使得前端工程化蓬勃发展，
前端与后端彻底分道扬镳。微软还发布了typescript这个强类型的js超集，
nw.js与electron把前端扩展到桌面领域，而react-native使得web工程师开发移动端成为可能。

Less -受Sass启发

https://less.bootcss.com/

2010智能手机爆发-移动互联网兴起

响应式web 根据不同设备自动调整布局和样式--开始前后端分离
然后出现ANGULAR JS ,由谷歌发布，mvc思想
https://angularjs.org/

乔布斯发布Iphone4

2010出现 Express 框架 -Nodejs

https://expressjs.com/zh-cn/

2010出现 NPM

https://www.npmjs.com/

2011 推特2个工程师业余发布 Bootstrap 响应式框架

https://getbootstrap.com/

2012 TypeScript 出现，可以像静态语言一样开发

https://www.typescriptlang.org/

2012 出现 Webpack , Grunt 简单打包工具

https://webpack.js.org/

Webpack 仓库创建者Tobias Koppers是一个德国人，他的网络昵称叫sokra，后面我们就叫 sokra。

sokra 没有写过 web页面，一开始是写Java的，Java 里面有个很出名的技术叫GWT（Google Web Toolkit）
，GWT 是把 Java 代码转换成 JavaScript ，也就是让后端来写前端，
本质上也是在 AST 层面对代码做一成转换，Babel 也是干这件事的，但是 GWT 这门技术没有流行起来
，后面 Google 也不推广了。

GWT 里面有个 feature 叫 「code splitting」，于是他当时给用来做前端项目
 Bundle 的 node.js 库 modules-webmake[4] 提了一个 issue[5] ，希望他们能实现，
「code splitting」就是 Webpack 现在提供的主要功能，也是当代前端的基石。

modules-webmake 维护者一直没有实现这个功能，这个 issues 现在还 open 着。
于是 sokra 就 follow 了一份 modules-webmake 代码 ，
在github上开了一个新的项目 webpack，时间是 2012年3月10号。记住这个伟大的日子，
Webpack这个伟大的项目就这样诞生了！估计 sokra 当时也没想日后 Webpack 会这么流行，成为前端开发的标配。

所以 Webpack 最开始的功能主要是 Bundle，特点是code splitting。

Webpack 诞生了，但它是怎么流行起来了呢？在2013年，React 开源了，
React 是 Facebook 在 2012年内部使用的一个框架，同年 Facebook 收购了 Instagram，
所以 Instagram 也是用的 React ，Instagram是一个图片的社交网站，图片还是高清的，
对页面性能要求那是相当高的。
到了 2014 OSCON 大会 ，Instagram 的前端团队分享了他们
对前端页面加载性能优化，其中很重要的一件就是用到的 Webpack 的 「code splitting」。
当时引起了很大的轰动，之后大家纷纷使用 Webpack，
并给Webpack 贡献了无数的 plugins ，loader。

所以大家看到 2014年后 Webpack 发展非常迅猛，版本更新非常快，
最后这些 plugins 也模糊了 module bundler 和 tasks 的界限，
再随着三大框架都改用了Webpack来进行工程化管理，
前端tasks/workflow工具 grunt、gulp渐渐就没落了。

https://gruntjs.com/

2013 React 由Facebook发布，构建单页应用程序(SPA)

https://react.dev/

引入虚拟DOM概念，组件化开发，单向数据流，使用JSX语法等
极大改变前端开发方式，推动前端开发 组件化，高性能，高效率 方向发展

2013 ，Koa 框架发布

使用异步编程更加优雅，代码更清晰
https://koajs.com/

2014 GitHub发布 Electron

基础于Chromeinum 和 Nodejs 可以开发桌面端跨平台应用
https://www.electronjs.org/

2014 年华人尤雨溪发布Vue

Vue结合了Angular 和 React 的优点
更简洁的API 和更灵活的设计
更像之前套模版，使得一些前端开发可以无缝过渡
https://cn.vuejs.org/

Vue的作者尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯。

2013年他在Google工作时，前端框架还处于比较草莽的阶段，React 刚刚发布还没几个人知道，最成熟的是 AngularJS (Angular 1)，当时他想自己实现一个简单的框架练练手，也想尝试一下用 ES5 的 Object.defineProperty 实现数据变动侦测。众所周知 AngularJS 使用的是脏检查，而当时大部分的应用还需要支持 IE8，所以不能全面使用 ES5，而个人项目则不需要考虑这些，于是Vue就诞生了。

2016年10月，vue2.0发布，它是第二个重要的里程碑，吸收了React的Virtual Dom方案，还支持服务端渲染，继而为进军移动端打好了基础。

2020年9月，vue3.0发布，这次版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API，并为框架未来的长期迭代奠定了坚实的基础。原来计划后续版本支持IE11，但过了一段时间，Vue团队决定放弃了。与之同时发布的，还有一个命名为vite的小工具，后面再说。

2014年 HTML5 由W3C正式推荐为标准 ,同时CSS3 开始在主流浏览器得到支持

https://developer.mozilla.org/zh-CN/docs/Glossary/HTML5

html5引入了更多的Api特性和 Web API

2014 CSS3

如圆角(border-radius) 阴影(box-shadow text-shadow) 渐变(gradient)
动画(animation) 过渡(transition) ，弹性布局(flexbox) 等
https://developer.mozilla.org/zh-CN/docs/Web/CSS