十年WEB技术发展历程

2015/07/19 · HTML5 ·
WEB

原文出处: 红河小鱼   

一个小分享,知识有限,抛砖引玉。

这是一个演讲稿,mark一下

ajax

03年的时候我上六年级,那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,册,账,号。

彼时网吧用的512k的带宽,注册的时候,填了一堆信息,提交,页面跳转,嘣,”您填写的信息有误,请重填”。然后跳转回注册页面,以此循环。我现在时常想,如果当时ajax能普及开来,我就可以省2块钱了。

那么ajax是什么?

首先ajax是一种技术。以往的网页交互方式,用户在点击一个按钮后,比如提交按钮,用户就要等待漫长的数据和服务器的交互,期间用户无法进行任何操作,只能点根烟。而ajax所做的,就是在向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事

其实ajax技术早在1998年的时候就已经由微软实现了,然而直到2005年2月,Adaptive
Path公司的Jesse James Garrett发表文章“Ajax: A New Approach to Web
Applications”,人们读了后觉得哎哟不错哦这个屌,这之后ajax才大规模普及开来。

ajax的出现,极大了提高了web的用户体验。时至今日,即使国内IT发展再怎么落后,所有网站的登录注册也已经实现了ajax交互。用户点填写完信息后,页面不用刷新就可以知道信息提交成功与否,哪错改哪。

另外ajax作为一种前后端分离的解决方案,也已经被国内大多数不很low的公司所采用,也间接导致了php等网页脚本语言的衰落。(来辩)

 

1、前端的发展史

JQUERY

早年的js编程,代码的效率是极其低下的,这点尤其体现在操作dom上,开发者想要给一个按钮添加事件,要写长长一大段重复的代码去获取到这个按钮,再写长长一大段重复的代码去添加事件。尽管老油条会将常用的操作封装起来,但是对于不会封装的新手,这无疑是很痛苦的一件事,尤其再加上各种各样的兼容。

2006年,本着拯救菜鸟,让他们do
more的宗旨,jquery诞生。jQuery诞生的意义,一是对ie6 7 8
及各种割据一方的浏览器做好了兼容,二是极大简化了dom操作,使开发效率大大提升。jquery很火爆,火爆的有些前端只会写jquery而不会写原生js的程度。时至今日,说jquery
write once,see everywhere已经不为过了。

jquery的另一个意义(我认为)在于,它催化了人们对前端的兴趣与探索,相比linux,你用很低的成本,就可以写出一个让不懂编程的妹子说欧巴你碉堡了的效果,让人们觉得哎哟(又)不错哦这个屌。此后大量的类库和基于jquey的插件雨后春笋般诞生,前端行业歌舞升平欣欣向荣,网页开发进入一个新时代。

 

1、前端

这是从维基百科上找到的关于前端的定义,一般来说,计算机程序的界面样式,视觉呈现属于前端。
也就是网站mvc结构中的view部分,但是现在说的view层和原来的view层含义已经不一样了,这个待会我们在介绍angular的时候说。

CHROME

天下武功出谷歌。在ie6,7,8的时代里面,尽管Firefox也缓慢的挑战ie的地位。但和2009年开始Google开始推广的chrome浏览器产生的颠覆性影响比起来,逊色很多。Chrome使用Apple的开源内核webkit,良好的设计标准和市场反应;促进浏览器快速迭代,让IE在windows10中彻底消失。

chrome浏览器的推出,将简化前端的入门程度又推进了一步,其自带的调试工具好用又无脑,我们可以利用其轻松的查看网络状态,加载顺序,进行断点调试等,同时谷歌的插件功能,又给开发者提供了极大便利。

目前chrome最新版开始采用blink内核,测试版本中,已经可以对css3动画进行追踪和调试。在我还没有想象到的时候,chrome已经实现了它。

一句话,没有chrome,就没有新中国,就只能用firefox了。

2、前端/互联网的上古时代

前段时间找到了世界上的第一张网页,现在还可以访问,他
http://info.cern.ch/
,可以看到,所谓网站就和现在的world类似,只有标记语言和超链接,完全没有动效和样式可言。更不用说代码的复用性,以及局部加载。
这是一个伟大的时刻,标志着万维网的诞生,不过站在历史中往前看,就会觉得那个时代简直是洪荒时期,只是把简单的信息传达出去,连刀耕火种的能力都没有达到,。

GITHUB

威尼斯人线上娱乐,随着软件项目的迭代加快,项目版本工具也不断的演进,经历CVS,
SVN,GIT。到目前为止CVS差不多已经从互联网行业慢慢消失,SVN作为文件和文档存储存在,由linux内核发明人Linus创建的版本工具GIT现在作为代码版本标准。Github依赖于git成为开发人员团队协作的社区!到2015年1月github上已注册的开发人员超过一千万,开源项目几千万。其中2014中国研发者在github上增⻓长最快。你几乎可以在上面找到一切你想要的代码…比如username..password..

 

3、前端的统一与分割

OAUTH

OAuth1或OAuth2与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码)。
产生背景:最常见的服务场景,用户需要使用两个不同企业的服务,登录验证A企业,下载内容;然后登录验证B企业,上传内容到B企业服务,复杂又耗时。无论是用户,还是A、B都会想要互通服务。这就产生了核实身份的需求。旧的用户名、密码机制会造成A/B企业有权限查看甚至修改对方的用户资源。为了达到确认身份、服务互通,Google、Yahoo、Microsoft牵头促使OAuth1.0产生。之后的OAuth2.0是各大互联网企业基于https安全的一次新规划。

目前最常见的应用场景主要在授权登录上,如微信,qq,微博等等

html/css/js

刀和火什么时候才到的呢?一直到96年,css的出现,同年,网景公司推出了javascript
之后微软也推出了vbscript
前端届的刀和火出现了,同时意味着正式开始出现前段,这个时候前端的html负责页面结构,决定着网页的结构和内容,是整个网页的躯壳,css负责样式部分,他决定了网站看起来是什么样子,属于前段的皮肤吧,js控制网页的行为,决定做什么一般来说,js负责调用一些前端计算与动态加载,应该属于整个网页的灵魂。只有这三个同时具备的,才能算是一个真正的网站前端。
但是这个时后的网页还有些许的缺陷,不能局部加载,复用性比较差。就拿我们的网银举例子:可看到,基本上所有的界面的头部,底部还有菜单部分,都基本上是一样的,我没道理同样的代码在每个页面上都要写一遍,所以不久,微软就推出了ifram标签,实现了异步的局部加载,就是相当于在网页中嵌套一个网页,切换目录只是切换ifram中的网页,像我们的验印系统和CRM中的局部加载就是这样实现的。

JSON

Json虽然是2001年就产生的标准,但被广泛应用是在2008年之后各种Ajax应用、iPhone、Android设备流行之后。旧的服务体系多是企业级,所以XML对java型的企业级服务定位有益。但对于流量限制,语义简单的API服务来说,XML庞大、冗余、不易学又占带宽。

去年我刚工作的时候,后台给我返回一个数组,没有发言权的我在是要遍历这个数组还是转化为json格式之间纠结了很久。

Json的普及,从另一个角度体现了web开发的一个优势,不管你后台是java ruby
php还是python,你只要给我一个json格式的接口,我就能撑起整个地球。

ajax

再之后99年W3C发布了第四代HTML标准,同年微软推出用于异步数据传输的ActiveX,意味着ajax的诞生,这在前端史上同样是个里程碑的事件,之前的iframe中部分加载,其实还是直接加载某个完整的html界面。但是如果这个界面中,如果之前的交易想实现这个功能,需要两个页面,第一个页面输入我们需要添加的查询字段,然后点击查询,进行form表单提交,然后我们就跳转到
form表单返回结果页面,从头开始渲染这个页面。如果网速很慢的话,这中间会出现点击搜索,然后一个白屏,之后才出现结果页面。而ajax则可以让我们如网银这般实现真正意义上的局部加载,点击查询的时候,只对下半部分进行刷新,而不用对整个界面重新进行渲染,极大的优化了用户体验。再一点
之前的方法从数据库查回列表数据,需要在服务端重新将数据拼装到页面上,使用ajax技术,这部分的操作被挪到了客户端浏览器上,所以ajax的出现,并不仅仅优化了用户体验,他将很大一部分计算从服务器挪到了前端,使前端能够完成了更多的工作。为日后的前后端分离提供了技术支持。