前端简史(三)

前言

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容