前端编年史（非完整版）

前言

俗话说：读历使人明智，学习一个领域也是最好先从它的历史下手，才能了解里面的前因后果，之后的学习也事半功倍。

前端是什么

以前可能单指写浏览器的网页。现在我认为就是UI，负责用户交互和对系统进行视觉呈现。包括网页，移动端，电视，还可以包括车机端。

洪荒时代 1989-1995 浏览器的诞生，World Wide Web诞生，JS的诞生等等

• 1989年 www的初步设想
  • 当时已经存在计算机网络，可以通过网络获取信息和数据。
  • 但是不同信息和数据存放在毫无关联的地方，需要使用各种不同的计算机和软件、系统去访问这些信息，因此非常不方便而且效率低。
  • 在CERN工作的年轻科学家 Tim Berners-Lee 敏锐地觉察到这点，他想创造一种能把这些信息整合到一起方便访问的技术。
  • 所以他于1989年3月向CERN提交了最初的建议并于1990年五月做些轻微的修改，提议发展一种叫做网（mesh）的分布式信息技术。
    • 
• 1990年 第一个浏览器被发明
  • 万维网之父Tim Berners Lee 在NeXT电脑上发明了第一个浏览器（WorldWideWeb后来为了避免与万维网混淆而改名成Nexus), 第一个web服务器
• 1991年 WWW出现
  • Tim在alt.hypertext新闻组贴出了一分关于World Wide Web的简单摘要。标志着Web页面在Internet上的首次登场
  • 最初的Web主要者是一帮科学家用来共享和传递信息，全世界的Web服务器也就几十台。
  • 仅仅是静态页面，因为还没有JS
• 1991年 跨平台GUI框架 QT开始开发
  • 两位作者开发一个超声波图像程序的时候遇到跨平台画UI的问题，于是决定搞一个跨平台的GUI框架，支持（Windows Macintosh Unix)
• 1993年 CGI 出现、网景浏览器的前身Mosaic出现。
  • Common Gareway Interface出现了，可以在后端动态生成页面。
    • 语言无关性，Perl由于跨操作系统和易于修改的特性成为CGI的主要编写语言。但其实CGI程序可以用任何脚本语言或者编程语言实现，只要符合标准。
    • 缺点：通常一次请求对应一个CGI脚本的执行，生成一个HTML。每次更新页面都要整页刷新，早起网络有非常慢。用户体验差
    • 针对上面这种缺点，人们开始从多方面改进：编写语言的升级，浏览器的升级，HTML的升级
  • Mosaic由两名学生开发，是第一个用户友好的浏览器。
    • {:height 298, :width 424}
    • 第一个引入了图片，可点击的超链接，和简单导航的浏览器
    • 引起了轰动，1993底快速达到了100w的用户量，并占据了近90的市场份额。
    • 由于一些所有权纠纷，创始人之一 Marc Andreessen 离开了Mosaic
• 1994年 Navigator发布、W3C小组诞生、PHP诞生
  • 10月，Marc Andreessen成立了Mosaic通信公司，不久后改名Netscape。12月发布了第一款面向用户的商业浏览器Navigator。
    • Marc Andreessen召集了一群学生一起大量优化了Mosaic中的体验问题。95年初，Netscape占据了80%的市场份额。
    • 网景公司上市后，微软也推出了IE浏览器。也埋下了JS分裂的种子。
  • 1994年10月 W3C小组诞生
    • 负责 HTML的发展路径，执行标准和指南，来帮助每个人以可访问性好，国际化，隐私和安全的方式构建WEB
  • 周边大事：PHP Hypertext Preprocessor这年四月也诞生了。
    • 最早其实是一组C语言编写的CGI文件，最初用于追踪对作者在线简历的访问，所以作者命名为 personal home page tools，更多的引用为PHP tools。
    • 随着时间的推移，作者重写了这个工具，能和数据库交互，提供了框架，可在框架上开发简单切动态的web程序。
    • 优点：能将动态内容嵌入到HTML中，提升了编写页面的效率可读性，性能也比一般CGI好。
    • 影响：PHP的界定符、循环语句等的发明，深刻影响了后来的ASP,JSP，乃至后来的JS前端模版引擎。
• 1995年 JS诞生
  • 为了在浏览器端实现一些简单逻辑（比如输入合法校验），Netscape雇佣了程序员 Brendan Eich开发了这种网页脚本语言。
  • 早期的JS一直被正统程序员所嫌弃，直到Ajax的出现才让大家稍微接受它。
    • 也许由于工期太短的元素，有许多瑕疵
    • 早起的浏览器都有一个选项，用来禁止js运行
  • 主要语言特征
    • 基本语法：借鉴C及java
    • 数据结构：借鉴java
    • 函数的用法：借鉴Scheme Awk语言，函数作为第一等公民，并引入闭包
    • 原型继承模型：借鉴Self语言（smalltalk的一种变种），使用基于原型 Prototype的继承机制
    • 正则表达式：借鉴Perl
    • 字符串和数组处理：借鉴Python
  • 当时（1996年）微软也打造了一款竞品，可以运行于浏览器的语言 VBScript
  • 早期的JS语言非常空洞
    • 没有包管理机制
    • 内置方法屈指可数
    • 没有类似Java C++打辅助的SDK
  • 两大缺陷：语言特性少，性能不佳
  • 所以JS语言早期有两大任务 完善语言特性 提高性能
    • 完善语言特性：
      • 到了2019年，数组上的原型方法，是原来3倍。
      • prototype.js 拓展了js的原生函数，添加了一些很实用的功能。
    • 性能优化
      • jQuery通过选择器、DOM操作、事件处理的优化一定程度解决了一些性能问题

浏览器战争 1995-2004 UA 嗅探技术, CSS规范诞生

• 争的是浏览器的使用份额。
• 一共三场： IE vs Navigator IE vs Firefox IE vs Ghrome
• Round one IE vs Navigator
  • IE 发布于 1995年8月16。此时发布与1994年的网景浏览器已经占据了先机和绝对优势。
  • 那怎么办呢？
    • 微软用了些手段反编译出Netscape Navigator的源码，推出IE 和 JScript。
    • 但是Bug太多，以至于大家发掘出UA专门过滤掉IE（判断UA，提示用户用网景浏览器打开），不开发IE的网站。
    • 被开发者忽视了怎么办呢？
    • IE就把自己的UA尽量伪装成网景的UA，欺骗检测UA的脚本。
    • 当时90%人都在使用windows os，微软直接来了一招捆绑销售，大量用户被动选择了IE。
  • 最终，Round one 以微软胜出，Netscape被美国在线收购，落下帷幕。
  • 第二次战争的伏笔
    • 1998年Netscape被收购前，公开了Navigator的源代码想通过广大程序员的帮助重新获得市场份额。Navigator改名为Mozilla，这也是火狐浏览器的由来和第二次战争的伏笔。
  • 第一次浏览器战争带来的问题： 前端兼容性
    • 尽管当时有 ECMA-262（JS的规范） W3C（HTML CSS的规范），微软却没有按照规范来实现JS HTML CSS，导致前端兼容性问题的产生。
      • 所以 CSS Hack 浏览器判定 特性则测等等这些为了解决兼容性问题的技术应用而生
    • 名人 Dean Edwrad 最早近乎完美解决事件绑定的兼容性大神。
      • 其 addEvent()内置于jQuery的最早版本中。
      • jQuery的作者 John Resig看到其超强的技艺，最后放弃了推出大而全的框架，专攻选择器引擎。
      • 其IE7.js IE8.js时早起处理浏览器兼容的良药，可以说是一些Polyfill的起源。
        • 他在其中写了大量的hack 如在IE如何测量元素的宽高，许多操作DOM的兼容
• Round two IE vs Firefox 2006年10月
  • IE7 和 firefox2相继发型，IE7短短几天下载量破300万，微软再次胜利
• Final Round IE vs Ghrome 2008-2020
  • 2008年 Google推出 Chrome浏览器，IE开始走向衰弱。
  • 2020年 微软正式推出采用 chromium内核的 Edge，同年8月，正式宣布放弃并停止更新IE6, 7, 8, 9, 10
• 周边大事
  • 1996年 一个德国大学生Matthias Ettrich 决定使用QT开始一个Unix的桌面 KDE
  • 1996 年 12 月，W3C 推出了 CSS 规范的第一个版本
    • 1994 年，Hkon Wium Lie 最初提出了 CSS 的想法。
    • HTML诞生依赖，网页基本就是一个建议的富文本容器。
    • 由于切少布局和美化手段，早期流行用table标签进行布局。
    • 为了解决丑的问题，Hkon Wium Lie 和 Bert Bos 共同起草了 CSS 提案，同期的 W3C 也对这个很感兴趣。
    • Hkon Wium Lie的 CHSS（Cascading HTML Style Sheets）最早提出了样式表可叠加的概念。
  • 1997年七月：ECMA-262 标准的诞生
    • 1996年，Netscape决定将js提供给国际标准化组织 ECMA European Computer Manufacturers Association。希望JS能成为国际标准，来抵抗微软。
    • ECMA的39号技术委员会（Technical Committee 39）负责审核和指定这个标准，成员由业内大公司排除的工程师组成。
      • 委员会定期开会，所有的邮件会议记录公开。
    • 1997年七月，ECMA发布262（ECMA-262）号标准文件，规定了浏览器脚本语言的标准。
    • ECMAScript只用来标准化js语言，其部署环境相关标准都由其他标准规定，比如DOM标准是W3C（world Wide Web Consortium）组织规定。
  • 1997年，DHTML出现，被一些浏览器供应商用来描述HTML CSS 客户端脚本（JS or VBScript or ...)的组合，可用来创造可交互的，有动画的网页。
    • 这标志着 DOM 模式（Document Object Model，文档对象模型）正式应用。
  • 1998年：Netscape 开源了 Netscape 浏览器套件，创建了Mozilla Project项目。 也是第二次浏览器战争的伏笔。
  • 1999年：IE5支持了XMLHttpRequest 接口
    • 允许JS发送网络请求，为Ajax创造了条件。
  • 2000年10月：Konqueror（其实是Conqueror, 但KDE的项目都用K开头）出现，KHTML KJS崭露头角。
    • KHTML 之前有一个早期的引擎，称为 khtmlw 或 KDE HTML Widget，由 Torben Weis 和 Martin Jones 开发，它实现了对 HTML 3.2、HTTP 1.0 和 HTML 框架的支持，但没有支持 DOM、CSS 或 JavaScript。
    • KHTML 本身于 1998 年 11 月 4 日出现，作为 khtmlw 库的一个分支，进行了一些轻微的重构，并添加了 Unicode 支持、向 Qt2 迁移的支持。
    • 在 1999 年 5 月，Lars Knoll 开始研究 DOM 规范。在 1999 年 8 月 16 日，他差不多完全重写了 KHTML 库的内容（将 KHTML 更改为使用标准 DOM 作为其文档表示）。这也为后来添加 JavaScript 支持打下了基础，不久之后 Harri Porten 便为KHTML集成了 KJS。
    • 最终KDE重写了浏览器引擎KHTML。
    • Konqueror最终没有实现抱负，因为Unix在桌面市场占用率太低了。但其两个重要组件渲染引擎KHTML和JS引擎KJS却在后来大放异彩，为后来的WebKit 和 Blink引擎打下了基础。
  • 2001年，Douglas Crockford 提出 JSON 格式，用于取代 XML 格式进行服务器和网页之间的数据交换。
    • JavaScript 可以原生支持这种格式，不需要额外部署代码。
  • 2002年，Mozilla 项目发布了它的浏览器的第一版 0.1版本，后来起名为 Firefox。
    • 2004年发布 1.0版本。其使用Gecko 引擎
  • 2003年，苹果公司发布了Safari浏览器的第一版 和 WebCore
    • 2001年开始调研，发现KHTML KJS设计很优秀，代码量小。于是fork了一个分支，移植到了OS X上。改名为 WebCore和 JavaScriptCore
  • 2004年， WHATWG Web Hypertext Application Technology Working Group成立
    • 致力于加速 HTML语言的标准化进程。
    • 出现的原因：W3C开发现代HTML标准太慢了，还计划将HTML转换成一个名为XHTML的变体（有类似XML的结构），浏览器厂商都不同意。因此WHATWG成立了，有苹果，Mozilla和Opera的成员组成。
    • 与W3C经历了从竞争到合作的转变
    • 学习规范，可以阅读大漠：我认识的W3C规范
  • 2004年 Google发布了Gmail, 开启了AJAX和互联网应用程序（Web Application）的时代

Prototype.js时期 2005-2009 Prototype.js诞生 jQuery诞生 Node.js诞生

• 2005年 Prototype.js 诞生
• Prototype.js是Sam Setphenson写的一个十分优雅的js基础类库
  • 这个人是Ruby的大牛，所以prototype的许多方法名都来自Ruby界
  • 最大的贡献是发掘了Prototype.js与创造了 Function.prototype.bind，在数组上也写了一大堆方法，很多都标准化了
• 还解决了两大问题 动画特效和Ajax请求
  • 动画特效由Scriptaculous提供，通过了一套丰富的用户界面效果和空间。我们现在直到的各种缓动动画，各种特效的命名与大致的运行形态都是Scriptaculous确定下来的。
  • 对Ajax的封装
    • 早期 google就开始使用iframe实现页面刷新。
• 这时的前端开发还离不开后端语言，因为没有模块机制，当时需要使用PHP进行打包。
  • 这是雅虎34条军规之一，可以减少请求数。同时混淆代码，防止偷窥
  • N年前，前端面试必问的题目
    • pic2.zhimg.com/80/v2-9c28e…
    • 模块化的雏形，在注释中标注它的依赖
• 周边大事
  • 2005年 Apple把WebCore和JavaScriptCore打包到Webkit中，作为一个开源软件发布
    • Webkit是一个优秀的浏览器引擎，小巧 灵活有强大，而且率先实现了CSS3 HTML5的功能，收到业界的喜爱，围绕着它有很多浏览器发展起来。
  • 2005年 Jesse James Garrett发布了白皮书方法正式诞生，创造了AJAX这个词。
    • 这篇文章把Ajax被挖掘了出来，大家才开始重视起这技术的应用
    • 2月份发布的Google Maps大量采用了该方法，标志着AJAX开始流行，它几乎成了新一代网站的标准做法，促成了 Web 2.0时代的来临。
  • 2005年 Apache基金会发布了CouchDB数据库，标志着NoSQL类型数据库诞生。
    • 这是一个基于 JSON 格式的数据库，可以用 JavaScript 函数定义视图和索引。
  • 2006年，JQuery 函数库初版诞生，作者为John Resig。
  • 2006年，Google推出 Google Web Toolkit 项目（缩写为 GWT）
    • 提供 Java 编译成 JavaScript 的功能，开创了将其他语言转为 JavaScript 的先河。
  • 2007年，Webkit 引擎在 iPhone 手机中得到部署
    • 这标志着 JavaScript 语言开始能在手机中使用了，意味着有可能写出在桌面电脑和手机中都能使用的程序。
  • 2007年，Douglas Crockford 发表了名为《[JavaScript: The good parts]({{video www.youtube.com/watch?v=_DK…
    • 次年由 O'Reilly 出版社出版。这标志着软件行业开始严肃对待 JavaScript 语言，对它的语法开始重新认识。
  • 2008年，V8 编译器闪亮登场。
    • 这是 Google 公司为 Chrome 浏览器而开发的。它提高了 JavaScript 的性能，让 JavaScript 的运行变得非常快。推动了语法的改进和标准化，改变了外界对 JavaScript 的不佳印象。
    • V8 是开源的，任何人想要一种快速的嵌入式脚本语言，都可以采用 V8，这拓展了 JavaScript 的应用领域。
  • 2009年，来自Ruby界的高手Ryan Dahl创造了Node.js 项目
    • 标志着 JavaScript 可以用于服务器端编程，从此网站的前端和后端可以使用同一种语言开发。
    • Node.js 支持异步I/O，所以可以承受很大的并发流量，使得开发大规模的实时应用变得容易。
  • 2009年，Jeremy Ashkenas 发布了 CoffeeScript 的最初版本。
    • CoffeeScript 可以被转换为 JavaScript 运行，但是语法要比 JavaScript 简洁。这开启了其他语言转为 JavaScript 的风潮。
    • 添加了受Ruby, python Haskell启发的语法糖，以增强JS的简介和可读性。
    • 一度非常流行，但是ES6出现后（也很大地提升了语法便利性），coffeeScript就走向衰落了。
  • 2009年，PhoneGap 项目诞生。
    • 它将 HTML5 和 JavaScript 引入移动设备的应用程序开发，主要针对 iOS 和 Android 平台，使得 JavaScript 可以用于跨平台的应用程序开发。
  • 2009年，Google 发布 Chrome OS。
    • 号称是以浏览器为基础发展成的操作系统，允许直接使用 JavaScript 编写应用程序。类似的项目还有 Mozilla 的 Firefox OS。

jQuery时期 2009-2012 2009年jQuery开始取得压倒性优势

• 2006年 jQuery发布，但在2009年之后才取得压倒性优势
  • 因为当时有很多竞品：Dojo, Prototype, ExtJS, MooTools
  • 所以jQuery的宣传口号是它的性能上升了：100% 200% 300%。但其实直到2009年Sizzle选择器引擎研发成功，它才取得压倒性的优势。
  • jQuery 为操作网页 DOM 结构提供了非常强大易用的接口，成为了使用最广泛的函数库，并且让 JavaScript 语言的应用难度大大降低，推动了JS的流行。
• jQuery的特点
  • 发掘出了大量DOM/BOM兼容方案
    • 例如前面提到的Dean Edward的addEvent(), IE的px转换方案，domReady的doScroll方案，globalEval的兼容方案
  • 链式操作改变了用户心智，打开了前端开发者的新思路
    • 之前都是按后端开发思路来的，做一个业务先封装一个类，有了类后，再想办法传一个DOM，再通过类方法操作DOM。
    • jQuery以DOM为中心，可以选一个或多个DOM，变成jQuery对象，然后进行链式操作。
  • 使用全局变量少，只占用两个全局变量
    • 当时开发者们已经开始注意前后端分离，并要求不能污染Object原型对象，不能污染window全局对象
  • 轻量级且实现巧妙
    • 采用Dean Edwards编写的Packer压缩后，大小不到30kb。
    • 以令人瞠目的手段解决各种兼容痼疾
• jQuery的流行带来的影响
  • 促使人们对CSS1-CSS3选择器的学习
  • 促进了浏览器原生选择引擎document.querySelectorAll, Element.matches的诞生
  • 提高了人们对domReady（DOMContentLoaded事件）的认识
  • 促进了Promise与requestAnimateFrame的诞生
  • 最重要的是降低了前端门口，让更多的人进入了这个行业，又一个时代开始了。
• 这样越来越多的优秀工程师入行，创造了大量的jQuery插件和UI库，称之为后jQuery时代
  • 人们研究前端模块加载，统一一步机制，打造大型MVC框架，甚至伸向后端，接口打包脚本而发明Node.js来腾出大量时间
  • 这个时期也涌现了大量 jQuery-like的库，最著名的是Zepto.js。它的出现标志这移动互联网时代的到来。
  • 当时配套的著名库还有iScroll, fastclick, lazy load modernizr fullpage
• jQuery存在的问题
  • 链式操作风靡一时，也带来许多问题。当Ajax出现依赖时，就不可避免地出现回调地狱。
    • 针对这方面的讨论，诞生了Deffered 与 Promise
  • 太多的选择器也无法维护，随着页面交互越来越复杂，入行的人数越来越多，网页正在从WebPage 向WebApp进化，新的趋势带来新的开发方式
• 周边大事
  • 2010年，微软的MVVM框架Knockout.js 发布。
    • 使用函数代替属性的技巧实现数据绑定的功能，其设计影响到后来的Mobx。
    • 是MVVM领域的先驱
  • 2010年，三个重要的项目诞生，分别是 NPM、BackboneJS 和 RequireJS，标志着 JavaScript 进入模块化开发的时代。
  • 2011年，MVVM框架 Ember.js诞生，基于 Object.defineProperty实现数据绑定
  • 2011年，微软公司发布 Windows 8操作系统，将 JavaScript 作为应用程序的开发语言之一，直接提供系统支持。
  • 2011年，Google 发布了 Dart 语言
    • 目的是为了结束 JavaScript 语言在浏览器中的垄断，提供更合理、更强大的语法和功能。Chromium浏览器有内置的 Dart 虚拟机，可以运行 Dart 程序，但 Dart 程序也可以被编译成 JavaScript 程序运行。
  • 2011年，微软工程师Scott Hanselman提出，JavaScript 将是互联网的汇编语言。
    • 因为它无所不在，而且正在变得越来越快。其他语言的程序可以被转成 JavaScript 语言，然后在浏览器中运行。
  • 2012年，单页面应用程序框架（single-page app framework）开始崛起，AngularJS 项目和 Ember.js 项目都发布了1.0版本。
  • 2012年，微软发布 TypeScript 语言。
    • 该语言被设计成 JavaScript 的超集，这意味着所有 JavaScript 程序，都可以不经修改地在 TypeScript 中运行。同时，TypeScript 添加了很多新的语法特性，主要目的是为了开发大型程序，然后还可以被编译成 JavaScript 运行。
  • 2012年，Mozilla 基金会提出 asm.js 规格。
    • asm.js 是 JavaScript 的一个子集，所有符合 asm.js 的程序都可以在浏览器中运行，它的特殊之处在于语法有严格限定，可以被快速编译成性能良好的机器码。
    • 这样做的目的，是为了给其他语言提供一个编译规范，使其可以被编译成高效的 JavaScript 代码。
    • 同时，Mozilla 基金会还发起了 Emscripten 项目，目标就是提供一个跨语言的编译器，能够将 LLVM 的位代码（bitcode）转为 JavaScript 代码，在浏览器中运行。因为大部分 LLVM 位代码都是从 C / C++ 语言生成的，这意味着 C / C++ 将可以在浏览器中运行。
    • 此外，Mozilla 旗下还有 LLJS （将 JavaScript 转为 C 代码）项目和 River Trail （一个用于多核心处理器的 ECMAScript 扩展）项目。目前，可以被编译成 JavaScript 的语言列表，共有将近40种语言。
    • asm.js和Emscripten入门教程

后jQuery时期 2012-2016

• 以RequireJS的诞生开始，RN的出现结束。
• 这个阶段主要解决了前端的模块定义、模块打包问题。js可以不依赖其他语言创造一套自己的工具链。
• 模块化的由来，来自于当时存在的两个问题
  • 1 当时工程师想实现一个功能一般用jQuery插件，为了写一个页面可能会引入十几个乃至更多插件，塞满了Script标签。单线程的浏览器加载这么多script标签，会影响页面解析与呈现，导致著名的白屏问题
  • 2 由于插件的质量问题，经常会造成全局污染。IIFE模块或命名空间等传统手段无法解决了。
• 为了解决这些问题，工程师们取经后端引入了模块机制。
  • 早期，这种模块机制在Dojo, EXT框架中都是内置的。但是无法说服一个框架的用户使用对方的模块机制，于是Mozilla工程师Kevin Dangoor希望统一模块定义方式，成了 [[CommonJS]]
  • 有人的地方就有派系，谁也不服对方。终于有人忍不住独立开发出了RequireJS,模块规范为AMD。
    • AMD最大的优势是支持各种插件，且简单明了，提供shim机制加载以非AMD规范编写的js代码
  • CommonJS怀才不遇很久，在Node.js出现时才开始施展拳脚。
  • 国内的情况：流行另一种规范，背靠阿里有人推出了SeaJS, 其模块规范称为CMD。
• 引入模块机制后， js开发模式焕然一新了，不用担心全局污染的问题。
• jQuery开发者还需要解决大段HTML生成的问题，于是前端模版技术也出现了
  • 之前有有$.html,$.append, $before等方法，可以将一大段符合HTML结构的字符串转换成DOM再插入到页面上
  • 但开发者想将其拆分到不同文件中，然后插入数据，这就是前端模版。
  • 可以用一个公式来描述 HTML=template(vars)
• 有了前端模版之后，又诞生了前端路由。
  • 基于它们人们又发明了一个新词汇SPA
• 同时 诞生于2009年的Node.js生态逐渐成熟
  • 发展历程看这里：[Node.js换个角度看世界][mp.weixin.qq.com/s?__biz=MzI…]
• Node.js发展很快，没多久就冒出了海量模块、路由、状态管理、数据库、MVC框架。
• 当时出现了大量的MVC MVVM框架。最先火起来的是Backbone.js
  • 它使用纯正的MVC模型，强依赖于jQuery，是其最后的支持者
  • Backbone的作者Jeremy Ashkenas还搞了另一套语言CoffeeScript，里面的箭头函数、类机制、结构赋值等语法糖都深深影响了后来的ES6。Underscore.js的作者也是他
• 接下来是大公司出品的三个MVVM框架
  • MVVM比MVC多一个数据绑定的功能，但这个功能不太好实现。
  • 谷歌的Angular 将函数体转移成 setter() ,getter()函数实现
  • 微软的Knockout.js 使用函数代替属性的技巧实现，其设计影响到后来的Mobx
  • 苹果的Ember.js 基于 Object.defineProperty
• 这些大公司还将后端开发经验挪用过来，用Node.js搞了一套CLI。
  • 包含脚手架生成，打包脚本，语法风格检测，环境变量插入，代码复杂度加测，代码提交时自动跑单元测试，图片与JS压缩等功能。
  • ESLint、JSLint、JSHint、CSS Lint、 htmllint等都是这个时期出现的。
• 大公司入局带来的影响
  • 大家都迷信大公司，纷纷投靠，所以局面一下子稳了下来。
  • 新的开发模式。早期都是找一个核心库，再搜刮一大堆插件，然后自己写业务代码，最后后端打包。
  • 前端的分裂：以前大家都用jQuery，但现在CLI建好项目的一刻起，就被自动划归了某一个阵营。
  • jQuery被边缘化，因为没有大公司的支撑，人都被抢走了。
  • jQuery小作坊时代的终结：个人开发者没能力开发功能完备的CLI，于是出现了Code Climate、Travis CI、CircleCI这样的平台
  • 前端开发者出现分化
    • 有人转入后端，出现了CNode的门户网站。
    • 一些开始搞工程化：一时间又是上百种构建工具，出名的有Grunt Gulp FIS3 webpack Rollup npm-script
• jQuery的时代一去不复返了。
• 没有人关心拖了N年的Bootstrap4终于发布了，没人直到jQuery3.5的瘦身计划，面试也没有人问jQuery的源码，渐渐地，大家也不关注jQuery的工具链了。
• 周边大事
  • 2013年4月，Blink引擎诞生
    • Google也fork了Webkit的代码，并且花了大功夫梳理，使得可读性更好，编译效率更高。但也与苹果版本的分歧越来越大，干脆自立门户叫Blink
  • 2013年5月，Facebook 发布 UI 框架库 React。
    • 引入了新的 JSX 语法，使得 UI 层可以用组件开发，同时引入了网页应用是状态机的概念。
    • 5月的版本主要是作为Fackbook内部项目的原型而存在，随后在2013年10月，React的第一个公开版本 0.9.0正式发布。
  • 2013年，ECMA 正式推出 JSON 的国际标准，这意味着 JSON 格式已经变得与 XML 格式一样重要和正式了。
  • 2013年末，Vue.js初始版本0.8发布
  • 2014年, Vue.js 1.0版本发布
  • 2014年，微软推出 JavaScript 的 Windows 库 WinJS，标志微软公司全面支持 JavaScript 与 Windows 操作系统的融合。
  • 2014年11月，由于对 Joyent 公司垄断 Node 项目、以及该项目进展缓慢的不满，一部分核心开发者离开了 Node.js，创造了 io.js 项目。
    • 这是一个更开放、更新更频繁的 Node.js 版本，很短时间内就发布到了2.0版。三个月后，Joyent 公司宣布放弃对 Node 项目的控制，将其转交给新成立的开放性质的 Node 基金会。随后，io.js 项目宣布回归 Node，两个版本将合并。
  • 2015年3月，Facebook 公司发布了 React Native 项目。
    • 将 React 框架移植到了手机端，可以用来开发手机 App。它会将 JavaScript 代码转为 iOS 平台的 Objective-C 代码，或者 Android 平台的 Java 代码，从而为 JavaScript 语言开发高性能的原生 App 打开了一条道路。
  • 2015年4月，Angular 框架宣布，2.0 版将基于微软公司的TypeScript语言开发，这等于为 JavaScript 语言引入了强类型。
  • 2015年5月，Node 模块管理器 NPM 超越 CPAN，标志着 JavaScript 成为世界上软件模块最多的语言。
  • 2015年5月，Google 公司的 Polymer 框架发布1.0版。
    • 该项目的目标是生产环境可以使用 WebComponent 组件，如果能够达到目标，Web 开发将进入一个全新的以组件为开发基础的阶段。
    • 是Vue的灵感来源之一
  • 2015年6月，ECMA 标准化组织正式批准了 ECMAScript 6 语言标准，定名为《ECMAScript 2015 标准》。
    • JavaScript 语言正式进入了下一个阶段，成为一种企业级的、开发大规模应用的语言。
    • 这个标准从提出到批准，历时10年，而 JavaScript 语言从诞生至今也已经20年了。
  • 2015年6月，Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。
    • 这是一种 JavaScript 引擎的中间码格式，全部都是二进制，类似于 Java 的字节码，有利于移动设备加载 JavaScript 脚本，执行速度提高了 20+ 倍。这意味着将来的软件，会发布 JavaScript 二进制包。
  • 2015年，google提出PWA Progressive Web App的概念。
    • 旨在通过一些列web技术的结合，提升一种类似原生应用的体验，同时保留web应用的便捷性和可访问性。
    • 关键技术是Service Worker技术，可以在离线状态下访问部分内容或执行简单操作。
  • 2016年6月，《ECMAScript 2016 标准》发布。
    • 与前一年发布的版本相比，它只增加了两个较小的特性。
  • 2016年月，Angular2.0发布
    • 和之前的AngularJS完全不是一个东西，注意区别

三大框架三足鼎立 2016-至今

• 虽然三大框架中的有些发布早于2016，但真正成为主流并形成割据差不多在2016年后。
• React的突然爆发
  • React早在2013年就已经发布，但JSX语法让人们无法接受它。
  • 此时已经进入移动互联网的中期（2013-2016），大公司都有自己的APP，或原生或Hybrid
    • Hybrid指用WebView加载一个网站或一个SPA
  • 由于两个原因：原生成本太贵（安卓 IOS写两套），Hybrid一直有性能问题。Fackbook推出了RN
  • RN性能不比原生差，比hybrid好些，其次开发效率高。
    • 国内经过瀑布流、团购、P2P、区块链等全新商业模块的开发浪潮后，前端人员数量大增，有了RN后稍加培训就可以转型App开发
  • 使用RN的过程中，人们开始了解React的一系列优点。
    • 比如虚拟DOM，虽然事实证明虚拟DOM不会带来性能的巨大优势，但保证了怎么写性能不会太差。
  • Reacti带来的一个影响：Babel webpack的壮大
    • React为了引入JSX，必须要引入编译，又简介促成了Babel和webpack的壮大，尤其是Babel
• Vue.js的诞生历史
  • 谷歌发布Angular2.0的前一年发布了一个叫Polymer的框架，这个框架主要想推广一种叫Web Components的浏览器自定义组件技术（其实是微软在IE5就玩剩的HTC技术的升级版）。
  • 虽然这个框架没有火起来，但它将Script Style Template三种内容混在一个文件的设计，启发了Vue的作者，再结合当时的Backbone.js Angular等设计，Vue.js横空出世。
• Angular2.0的诞生
  • 随着Web应用复杂性的增加，开发人员需要更高效，更现代的工具来构建应用。
  • Angular主要是为了解决AugularJS在性能、开发体验、语言现代化方面的不足。
• 当时国内的情况：国人也弄了好几套miniReact, miniVue框架。有点像jQuery时代，大家疯狂做 mini jQuery框架一样。
• 三大框架总的来说，最有创造力的是React团队。
  • 做出了状态管理器，CSS-in-JS, Flow静态类型检查、devTool，Fetch，前后端同构，Fiber, suspend, 并发渲染等新名词层出不穷。
  • 其中 状态管理器有上百套 CSS-in-JS有上百套，flow则让前端长线到接口编程的好处，间接推动了TS的发展。
• 目前三大框架无法分出上下，Vue.js主要有国人的拥趸，React Angular有大公司光环。
• 三大框架的缠斗从PC领域拓展到移动端，React有RN，Vue.js有Weex, Angular有ionic。
• 后端渲染SSR崛起，称之为前后同构，既有SEO的功效，又能复用大量业务逻辑。
• 后续，随着国内移动互联网的兴起，获客成本提高，各种商业模式都进入红海，但只有头部用户能赚到钱，马太效应越来越严重。纯粹的技术解决方案已经无法满足商业述求了。
• 周边大事
  • 2017年6月，《ECMAScript 2017 标准》发布，正式引入了 async 函数，使得异步操作的写法出现了根本的变化。
  • 2017年11月，所有主流浏览器全部支持 WebAssembly，这意味着任何语言都可以编译成 JavaScript，在浏览器运行。

小程序时代 2017-至今

• 时期与三大框架时代重合
• 诞生的原因
  • 国内外的技术代差让一些模仿者得以生存。
  • 一直以来前端技术都是国外开发者主导的，国内外的技术更新存在代差，国内通常延期两三年，这个时间差可以让一些模仿者得以生存（如SeaJS, FIS, avalon)。
  • 随着封闭的时间越来越长，国内肯定也会诞生自己的专有物种。小程序就是其中一个
• 小程序的出现有着明显的商业述求
  • 因为马太效应，一个超大流量的APP诞生。这个APP有很多功能，但是功能再多也无法满足所有用户，于是产生了小程序这种外包手段
• 使用的前端技术
  • 虚拟DOM
  • 内置组件 web component
  • api 来自于 Hybrid的bridge
  • 打包使用webpack
  • 调试工具是chrome console的简化版
  • 模块机制是Node.js 的 CommonJS
  • 最值得一提的是小程序开发工具，以后开发者工具也成了各种小程序、快应用的标配。
• 前期的缺点： 复用能力非常弱
  • 没有类继承，不能使用npm, 不支持 less sass。
• 为了解决这个问题，转译框架应运而生。
  • 第一代转移框架是wept WePY mpvue，无一例外是Vue风格，因为WXML模版指令与Vue非常相似，改一下就能兼容。
  • 第一代的缺点：都是基于Template标签实现组件机制，造成使用第一代转移框架编写的小程序很难升级
    • pic3.zhimg.com/80/v2-cb742…
  • 第二代转移框架是大公司主导的
    • 因为，需要兼容的小程序端越来越多（百度，支付宝，字节，小米，华为等），个人开发者很难凭借个人力量开发转移框架
    • 主要有京东的 Taro 滴滴的 Chameleon 网易的 Megalo 去哪儿的nanchi 百度的Okam等
• 小程序这种新的流量变现模式深刻第影响了国内的互联网布局。

未来展望

• 跨端
• serverless
• webassemblely
• WebXR
• IoT
• AI in FE

总结

总的来说，前端开发经历了从被动到主动，从依赖到自主的转变，技术不断进步，前端开发者的地位和薪资也随之提高总的来说，前端开发经历了从被动到主动，从依赖到自主的转变，技术不断进步，前端开发者的地位和薪资也随之提高

参考

• 前端开发 20 年变迁史
• Web Development History
• A short history of the web
• 万维网 WWW 的三十年
• JavaScript语言的历史
• 历史上第一个网页竟然长这样
• 浏览器发展历史
• 为什么中国没有搞出浏览器引擎
• 浏览器大战 - 维基百科
• 前端科普系列1：前端简史
• 前端科普系列2：Node.js换个角度看世界