如果说我看得远，那是因为我站在巨人的肩膀上。 ——牛顿
摘要：了解一门技术的历史，可以帮助我们从历史的角度来看技术演进发展，理解前端技术为何会变成现在的模样，理解技术社会之间的联系，从历史的更大的视野的层面来理解技术。
什么是前端？简言之，浏览器呈现出来的页面，给用户看的、操作的就是前端（客户端）；你看不到的，类似一些游戏数据、应用数据之类的就是后端（服务端）。换句话说，前端指的就是浏览器端，后端指的就是为浏览器提供服务和数据的服务器端。这是比较准确的描述，如果往大了讲，你所有看到的一切，网页、移动端网页、小程序、甚至某些APP，都是属于前端的范畴。
1. 前端起源（洪荒时代（1990-1995年））
这个时代最重大的几件事有：WWW的诞生（1990）、浏览器的诞生（1992）、W3C理事会成立（1994）、JavaScript的诞生（1995）。
1990年，WWW（万维网）诞生。全称：World Wide Web。
1992年，NCSA研发了第一个浏览器：Mosaic，可以窗口浏览网页。随后新一代浏览器：Netscape Navigator（网景浏览器），于1994年诞生；隶属于Netscape（网景）公司，下文统称为网景公司。
1994年，Tim Berners - Lee创建了W3C理事会。蒂姆 · 伯纳斯 · 李被称为”万维网之父“，南安普顿大学、麻省理工大学教授。W3C理事会主要负责HTML的发展路径，其宗旨是通过促进通用协议的发展；成员机构：美国麻省理工大学、欧洲数学与信息学研究联盟、日本庆应大学、中国北京航空航天大学。
1995年，待这一切就绪后，JavaScript应运而生！发明者是Brendan Eich(布兰登 · 艾奇)。
JavaScript主要语言特征：借鉴了C语言的基本语法；借鉴了Java语言的数据类型和内存管理；借鉴了Scheme语言；借鉴了Self语言，使用基于原型的继承机制。
2. 前后端不分的时代
这个时代包含两个阶段：初期静态网站（HTML静态网页）、动态网站技术阶段（JSP 、PHP等运行在服务端的语言）。
2.1初期静态网站
互联网发展的早期，WWW（World Wide Web）、浏览器、JavaScript相继诞生，最开始大多是HTML静态网页。
那是1990年的12月25日，恰是西⽅的圣诞节，Tim Berners-Lee在他的NeXT电脑上部署了第⼀套“主机-网站-浏览器”构成的Web系统，这标志BS架构的⽹站应用软件的开端，也是前端工程的开端。1993年4月Mosaic浏览器作为第⼀款正式的浏览器发布。1994年11月，鼎鼎⼤名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着万维网进⼊了标准化发展的阶段。这个阶段的⽹页还非常的原始，主要以HTML为主，是纯静态的只读网页。
2.2动态网站技术阶段
Javascript的诞生之初，就给网页带来了⼀些跑马灯、浮动广告之类的特效和应用，让网页动了起来。但是网页真正开始向动态交互发展的开端，却是PHP、JSP和ASP为代表的后端动态页面技术的出现，它们都类似，是运行在服务端的语言。
这些服务器端的动态页面技术使得网页可以获取服务器的数据信息并保持更新，推动了Google为代表的搜索引擎和各种论坛的出现，万维网开始快速发展。那时候没有专业的前端，前后端开发是一体的，前端代码是后端代码的一部分，前端写静态模板，后端加数据套模板。
服务器端网页动态交互功能的不断丰富，伴随的是后端逻辑的复杂度快速上升，代码越来越复杂。为了更好的管理后端逻辑，出现了⼤量后端的MVC框架。
那时的网站开发，浏览器展现页面的流程采用的是后端 MVC 模式：
Model（模型层）：提供/保存数据
Controller（控制层）：数据处理，实现业务逻辑
View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V，那时候前端的 V 是在服务端渲染的。PHP，ASP，ASP.NET，JSP等都是典型的这样的模式，如下图所示。
3. AJAX诞生（Ajax技术促成了 Web 2.0 的诞生）
Web 1.0：静态网页，纯内容展示
Web 2.0：动态网页，富交互，前端数据处理
AJAX诞生是前端发展的一个里程碑，Ajax 技术诞生，改变了一切。2004年前的动态页面是由后端技术驱动的，虽然实现了动态交互和数据即时存取，但是每一次的数据交互都需要刷新一次浏览器。频繁的页面刷新非常影响用户的体验，这个问题直到谷歌在04年应用Ajax技术开发的Gmail和谷歌地图的发布，才得到了解决。这背后的秘密就是Ajax技术中实现的异步HTTP请求，这让页面无需刷新就可以发起HTTP请求，用户也不用专门等待请求的响应，而是可以继续网页的浏览或操作。
4. 前后端分离时代
4.1 jQuery 时代（开始注重前后端分离）
jQuery也打破了前端开发者的编程思维，之前是按照后端的开发思路来的：做一个业务就先封装一个类，有了这个类后，再想办法传入一个DOM，然后再通过类方法操作DOM。而jQuery是以DOM为中心，开发者可以选一个或多个DOM，变成jQuery对象，然后进行链式操作。当时为了改变用户的思维，国内的高手写了不少文章来引导大家。
jQuery的流行间接带来以下的发展：促使人们对CSS1~CSS3选择器的学习；促进了浏览器原生选择器应用；提高人们对domReady（DOMContentLoaded事件）的认识；促进了Promise与requestAnimateFrame 的诞生；最重要的是降低前端门槛，让更多人进入这行业，前端工程师的队伍越来越壮大。这样的话，不断涌现出优秀的工程师，他们创造了大量jQuery插件与UI库。为后jQuery时代，人们研发前端模块加载、统一异步机制、 打造大型MVC框架， 甚至伸向后端，为接管打包脚本而发明Node.js，来腾出大量时间。
这个时期涌现了大量jQuery-like的库，其中最著名的是Zepto.js。Zepto的出现也标志着我们进入移动互联网时代。那时配套出的著名库还有iScroll、fastclick、Lazy Load、Modernizr、fullPage。
4.2前端模块化阶段（后jQuery时代、node.js诞生）
jQuery的出现让前端工程师开发更加轻松，假如工程师想实现一个功能，搜索出一个jQuery插件来实现。那时候大家在前端网站就整天介绍jQuery插件，很少讨论一些底层的实现。
同时也冒出很多新的问题：前端工程师通常编写一个页面，会引入十多个乃至几十个jQuery插件，页面上塞满了Script标签。众所周知，浏览器是单线程，Script的加载，会影响到页面的解析与呈现，导致著名的白屏问题（当时前端用力过猛，body中的所有东西都是动态生成的）。jQuery另一个问题是全局污染，由于插件的质量问题，或者开发的素质问题，这已经是IIEF模块或命名空间等传统手段无法解决了。
于是一些优秀的前端工程师们决定向后端取经，引入模块机制。早期，这种模块机制在Dojo、EXT这些框架中都是内置的，但是显然说服不了另一个框架的用户用对方的模块机制，于是有人立志要统一这种模块定义方式，成立了CommonJS。CommonJS诞生很久一段时间后，在后端的Node.js出现时才有用武之地。
4.3 MVC, MVVM，SPA、微前端（前端工程化阶段）
4.3.1 前端MVC
前端MVC主要分为三部分：
View--传送指令到 Controller
Controller--完成业务逻辑后，要求 Model 改变状态
Model--将新的数据发送到 View，用户得到反馈
4.3.2 前端MVVM
MVVM是前端视图层的概念，主要关注于视图层的分离，也就是说，MVVM把前端的视图层，分为了三部分：Model、View、VM(ViewModel)。
4.3.3 单页面应用原理SPA
公司将后端开发经验挪用过来，用Node.js开发了一套CLI，里面包含了脚手架生成， 打包脚本、语法风格检测、环境变量插入，代码复杂度检测，代码提交时自动跑单元测试， 图片与JS压缩等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint等就是那时期出现的。
但CLI的出现导致了前端的分裂，以前大家都使用jQuery，但自CLI帮你建好项目的那一刻起，就将你划归某一子阵营，你是Angular？Ember.js？还是jQuery？对了，jQuery没有大公司支撑的阵营被快速边缘化。对于个人开发者，他们是没有能力开发这么功能完备的CLI，于是出现了Code Climate、Travis CI、CircleCI这样的平台。它们的出现标志着jQuery小作坊时代的终结了。
jQuery的时代一去不返了，再没有人关心拖了N年的Bootstrap 4终于发布了，没有人知道jQuery3.5的瘦身计划，也没有人问jQuery的源码，渐渐地，大家不关注jQuery的工具链了。
以React, Vue, Angular为代表的前端框架，造就了如今SPA（single page application）的大势所趋势。同时React - React Native, Vue - Weex，node.js，各种小程序等也正在拓展前端的边界。
单页Web应用（single page web application，SPA）是当今网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌现在人们的面前，如Gmail、Evernote、Trello等。如果你是一名Web开发人员，却还没开发过或者甚至是没有听说过单页应用，那你已经Out很久了。
单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。它有很多衍生物，其中一个就是微前端。
微前端有哪些优点？
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权
独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时
每个微应用之间状态隔离，运行时状态不共享
微前端能解决什么问题？
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
结语：在前后不分的时代，由于静态网页完全满足不了社会的发展对网页的需求，于是，由后端工程师主导的PHP,JSP,ASP的动态网页诞生了，但是服务端渲染有很多的弊端，服务器压力大，前后端代码耦合高，交互差，页面的交互需要刷新整个网页，2005年Ajax诞生，改变了一切，前端走上了第一个里程碑式的时代，前后的分离开始注重，jQuery风靡一时，它的成功是前端人的一代记忆，各种jQuery插件层出不穷，问题页诞生了，各种插件的全局变量污染，jQuery的链式操作的回调地狱，导致了模块化，延迟对象等新技术的提出，2009年node.js诞生，催生了前端工程化，react，vue，anguler等MVC,MVVM框架的流行让前端SPA成为大势所趋！
前端技术的发展，是在不断的解决问题，诞生新的技术，是社会在不断发展中催生了新技术，同时新技术又促进社会的前进，相互交织，螺旋前进！
