前端简史(三)

作者: 飙猪狂 | 来源:发表于2020-04-27 00:01 被阅读0次

    前言

      上一篇介绍了前端诞生初期的春秋战国时代,在经过百家争鸣、第一次浏览器之战之后,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草案的正式发布,前端技术的主战场慢慢的开辟了移动端战场。

    相关文章

      网友评论

        本文标题:前端简史(三)

        本文链接:https://www.haomeiwen.com/subject/rpnddqtx.html