前端简史（三）

前言

　　上一篇介绍了前端诞生初期的春秋战国时代，在经过百家争鸣、第一次浏览器之战之后，Web2.0拉开帷幕。

进化

人类的演进，很大程度上是随着资源的变化而进行演进，Web技术进化，也是如此。

Web技术进化时间线.png

2 互联网时代（2000-2008）

　　进入21世纪后，计算机硬件进入一个飞速发展的阶段，价格也越来越亲民，因此个人计算机越来越普及，与此同时，互联网的网速也跟着快速发展，国内开始告别窄带(56K调制解码器拨号上线的时代)，慢慢普及2M的ADSL宽带。那时的人们，开始享受着在互联网冲浪，有需求就有市场，随着互联网的发展，一大堆的互联网公司如雨后春笋。那时Web技术还是以后端为主导。

2.1 后端时代

　　在经过春秋战国时代之后，各种动态Web技术，基本上都是把Web脚本及后台的动态语言放在同一份文件中，这样子简洁明了，执行效率也高，适合做简单功能及小团队的开发。基本上那时侯的页面开发，都由后端的开发人员一手包办，那时压根就没有前端这个概念。

Web1.0

　　随着Web应用越来越丰富，后台的服务越来越多，调用关系也将越来越复杂，由于PHP、ASP及JSP的可维护性较差，随着ASP.net及Servlet1.2的发布，基于MVC模式将页面与逻辑解耦，降低调用复杂度，解决可维性差的问题，那时JavaWeb技术框架中最著名的就是Struts及Webwork，特别是Struts发展势头强劲，出现了很多Struts+Spring+Hibernate这种SSH的组合、Struts+Spring+myBatis的SSM组合。

Web1.0(MVC)

2.2 前端萌芽时代

　　随着硬件资源的高速发展及普及，用户使用的硬件资源也开始丰余了起来，PC浏览器有更多的资源来执行任务，此时，Web技术开始往前端迁移，将更多的事情交给前端技术来实现。这个阶段，前端技术进入高速发展的时代，前端技术方面也诞生了很多优秀的前端技术及框架，例如Ajax技术、Flash网页技术、jQuery及JQuery相关的插件体系、Dojo、Prototype、YUI、ExtJS等，甚至还诞生了GWT、GXT这样的框架。这时的前端页面，不再只是进行界面展示及普通的运算，而是增加了越来越多计算、动效、交互。
　　Ajax技术最早的诞生是在1999年，由微软推出异步传输数据技术而来的，但它是在2005年才开始真正的进入人们的视野，最后由Google公司大量推广使用，逐渐成为主流技术。1999年，微软在IE浏览器上推出一项用于异步传输数据的ActiveX组件对象XMLHttpRequest(Ajax在IE浏览器上的实现)，同期的Google则采用iframe来进行异步传输数据的解决方案，两者的目的都很明确，就是要减少数据传输量的问题。因为那个时代，宽带网络还未发展起来，不支持异步数据传输数据的情况下，每一个交互的页面都必须由服务端生成传递到浏览器进行渲染，造成带宽的浪费，同时，在页面传递的过程中，浏览器呈现一整块不可操作的白屏给用户，体验性也很差。iframe异步刷新机制由于存在很多限制，同时对于开发运维也十分不友好，因此，慢慢的大家都选用基于XMLHttpRequest实现的Ajax技术，开始才将页面逻辑及结构放到浏览器中执行，通过JavaScript脚本进行动态调整页面结构，结合Ajax技术进行异步刷新数据。
　　jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库，设计的宗旨是“Write Less，Do More”。jQuery封装JavaScript常用的功能代码，通过提供丰富的选择器，包括CSS选择器，优化HTML文档操作、事件处理、动画设计和Ajax交互，极大的提升了Web前端的能力，让越来越多的开发人员将部份的业务逻辑放到Web页面来实现，前端页面不再是简单的渲染展示，不再是只能进行简单的表单校验及提交，而是可以更加简洁的实现更多的事件处理、HTML文档操作、动画设计等功能。jQuery在前端发展史上的另外一个重要的作用，是在2007年9月，发布了jQuery1.2版本，新引入了命名空间机制后，解决了大规模前端开发时容易出现的变量冲突的问题（这个是由于JavaScript的上下文机制导致的问题），同时也建立起一整套完整的插件体系，虽然这套插件体系由于兼容性、易冲突（不同的团队、人进行开发，命名空间容易产生冲突），但是，我们要看到的是jQuery的诞生及发展，让前端脚本与页面结构开始进行了分离，同时，前端也形成了工程化、体系化、部件化的概念，后续的前端技术发展很多是在这些基础上进行优化改良。
　　在这个阶段，前端技术除了在丰富基础的JavaScript框架之外，例如：Prototype、jQuery这些基础技术框架，在UI交互这一块，也诞生了很多优秀的框架，例如YUI、Dojo、ExtJS等，发展得比较好的当数ExtJS了，直至目前，还有很多信息管理系统都还在使用ExtJS。ExtJS是由YUI发展而来的，也是将脚本与页面进行分离，自带UI组件及主题，在2007年4月正式发布1.0版本。ExtJS当时在信息管理系统发展得如日中天，特别是"西-菜单栏、南-页面底部Footer条，北-主题操作区，中-信息内容操作区"的经典布局很有ExtJS的招牌特点。如下图。

经典的ExtJS界面图

　　ExtJS还在官方的Demo中，展示了用前端模拟操作系统Window界面，功能十分强大，如下图。

基于ExtJS实现的桌面

　　在众多的前端技术发展期间，还诞生了一些另类的技术框架，例如通过Java编码，通过编译器生成对应的HTML页面，这就是由Google推出的GWT框架，目的是为了让Java的开发者，在这个平台上可以轻松开发出HTML页面。后续还有几个基于GWT框架进行扩展的框架，例如专门针对报表应用类的框架SmartGWT，以及ExtJS组织结合GWT改造的框架GXT。GWT是编码的风格与Swing和SWT类似，不同的是最后将由GWT的编译器编译生成对应的html页面。虽然，GWT最后没有得到普及，但是至少打开了一个影响后面技术发展的思路，就是使用一种通用的开发语言，通过自身平台去适配其他平台的技术，例如现在的ReactNative，Flutter等。同时，GWT通过自带Jetty容器，在开发的过程中，不需要去另外准备类似Tomcat的中间件，方便开发调试，现在的微服务自带容器的做法应该是从这个技术得到一些启发。
　　在前端萌芽的时代，由于主战场是PC机，因此，此时的前端技术都是针对于PC端的应用，HTML4.0.1的标准在各浏览器上的运行已经十分稳定，这段时间智能手机也随着移动网络的发展开始慢慢普及，例如2000年，全球第一款基于Symbian操作系统的手机，采用Symbian5.0的爱立信R380 Smartphone正式向公众出售。这款手机被称为智能手机的鼻祖。随着2007年的iPhone的诞生、2008年第一台android设备的诞生以及2008年HTML5草案的正式发布，前端技术的主战场慢慢的开辟了移动端战场。