十年WEB技术发展历程奥门永利误乐域

HTML5+CSS3

这是这几年被说烂了的一个词,人人都在说HTML5,问HTML5是什么,他们也说不清楚,就是酷,就是炫,就是酷炫。

在我看来,HTML5只是一个三人成虎的东西,它吸引的眼球远超过了它提供的功能,HTML5只是提供了一些新的API,就等于一个app从1.0升级到2.0增加了附近的人功能而已。而且其提供的API,也就是在移动端试一试水,在pc端因为兼容的问题,始终不能被明媒正娶。pc端的开发还是以HTML4.0+CSS2为基准渐进增强。至于css3,它最被人关注的动画,也是flash玩剩下的东西。

移动端的飞速发展催化了HTML5的发展,HTML5的发展也促使各浏览器趋于标准化。

这条标准化路上,微信功不可没,1024,围住神经猫,淘宝十年,LEXUS
NX这些融合了大量HTML5+CSS3元素的页面让人印象深刻。

此外,微软抛弃IE代号,开发edge,各大浏览器厂商的不断标准化,HTML5草案定稿,ES6草稿的不断实现与完善,前端之路看起来是一条京畿坦途,我充满期待。

jquery

然后一直到09年的时候,前端一直稳定发展,没有进行什么大的改变,这段时间市面上主要有两款浏览器,我们称之为IE浏览器和非ie浏览器,所谓神仙打架凡人遭殃,ie浏览器为了抢夺网景公司的市场,开发出了javascript的变种,jscript。虽然两个基本上完全一样,但是语法糖上可能还是有些许的差别,所以,那个时代的前端工程师他们的主要工作就是画页面和踩各种坑,那个时代一个阅历丰富的程序员的一个标志就是熟练掌握两种浏览器之间的差别,且能找到兼容的方法,
jquery的出现在一定程度上缓解了这个问题,正如jquery的logo显示的一样,他封装了write
less do more 他致力于用更少的代码实现更多的功能。
jquery其实是一个脚本库,jQuery抽象了复杂的代码和浏览器怪异模式,兼容不同的浏览器,用简短的代码实现动效,用链式语法风格减少了程序员的代码量。使我们有时间做重要的事情.虽然现在市面上的各种框架都能实现jquery的各种功能,但是他凭借较低的学习成本以及多少年来积攒的用户量,依然在现如今的前端圈中占有一席之地

JSON

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

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

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

html/css/js

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

十年WEB技术发展历程

2015/07/19 · HTML5 ·
WEB

原文出处: 红河小鱼   

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

1、前端的大爆炸时代

从99年到09年附近基本上没有什么大的变化,一直到谷歌发布了v8浏览器引擎,这个引擎极大的提升了浏览器的计算效率,然后同年ECMA组织标准又发布了第五版javascript标准,马上得益于v8引擎高速的计算效率,有人将vx引擎从客户端搬上了服务端,用于做服务器的软件。
Node.js是一个让JavaScript运行在服务器端的开发平台,它让JavaScript的触角伸到了服务器端,他的特点是单线程,非阻塞,事件驱动机制,由于单线程非阻塞的,所以在进行高并发处理的时候还是蛮有利的,node属于极客追求性能极致的产物,所以缺少服务器健壮性的考虑,就比如由于单线程,没有给每个客户分配线程所以一处崩溃全线崩溃,也就不适合银行这种安全要求比较高的企业。
也许他在服务端的作用并不是十分的完美,但是他的出现对前端的影响类似于蒸汽机对于人类的的影响。09年开始,前端进入工业时代。在这之前可能没有真正的前段工程师这个职位,只是个写页面的,切页面的。node的出现,标志这前端工程师职位的正式确立,为什么这么说呢?只有node之后,前端原来做不到的事情,我们可以做到了,就比如代码混淆合并压缩甚至包括css代码的预处理。也因为nodejs的出现,前段自动化测试工具才得以存在。这些我们在以前是做不到的,node出现以后,也出现了大量的基于node的工具,
如这张图所示,我们可依次了解一下
npm是一个模块管理器,在前端环境工程化开发的时候,用来添加一些依赖的组件。下头的这些工具,如果我们需要用的话,可将使用的文件配置好,然后当前目录下直接运行npm命令就可以安装上。
express是在进行nodejs开发时候的一个框架,应该是类似于jquery之于js吧,现阶段,我们的服务器开发都是java所以也用不到这个框架,有机会的话可以了解了解
grunt
是一个比较早的也比较成熟的对代码进行合并压缩混淆这样一个工具。js用grunt脚本做整个项目的编译,你把源代码的目录以及要压缩哪些文件,不压缩哪些文件,然后将生成的文件放在哪里在配置文件中配置好。然后编译就可以得到最终的代码,读取代码压缩解析编译输出的过程实际上就是在node上完成的,网银系统
的压缩就是用这个工具构建的,他可以将网银初次加载的一百多个文件能减少一半左右。而浏览器每次请求文件的并发量一般允许量是6个文件过多的时候必然会增大请求时间,至于为啥首次加载会有这么多的文件,待会讲后我会详细描述

gulp
然后这个可乐一样的logo叫做gulp他是在grunt问世不久之后出现的,grunt的基础上进行了一定的改进,在grunt如日中天的时候开出了一片天地,他和grunt最直观的差别就是grunt的配置化,在gunt中主要是修改配置文件就好,而gulp则是以代码的形式配置,据说相比较grunt的学习成本更低,还有一点是gulp的是以文件流的形式操作,相比较grunt是先读取文件,然后进行合并,合并之后再写成临时文件,然后读取临时文件,进行混淆再写,然后再把临时文件读取出来,写到你要输出的文件的地方,而gulp则是读取文件然后直接压缩合并再输出到目标文件上。

webpack 编译处理的,前边说过,我们的浏览器目前只支持html
css和js这些东西,但是有时候为了便于开发,我们会用新的语言就比如js的超类typescript进行处理,但是typescript的语法特性浏览器并不支持,所以在部署到浏览器之前需要先把ts也就是前边说的typescript解析成js语言,这样浏览器才能识别出来。他和上边两个工具听起来好像比较类似,其实是不一样的,上边主要是用来压缩混淆的,webpack则是用来将浏览器不能识别的抽象类语言编译成浏览器能识别的语言。

karam作为一个平台出现的,类似于tomecat和jsp的关系一样,他可以运行各种各样的测试案例,jasmine则是一种语法,方便测试,用来写断言式的测试。

看一下右边的这三个是css的预处理器
大家知道css是一种图灵不完备的语言,相当与只是把样式放到了对应的选择器下边,而预处理器定义了一种新的语言,他在css的基础上添加了变量
函数以及基本的逻辑判断,这样来处理样式,然后再编译成正常的css文件,供浏览器识别,还有一个好处是,不用太考虑浏览器之间的差别,就比如css这个样式火狐是这种写法,然后ie是另一种写法,这个他会自动生成,但是你用的是ie11的特性,在ie8上依然是没有效果的。目前市面上的css预处理器有很多,但是讨论最多的还是这三个,sass
less stylus
sass是最早最成熟的css预处理器语言,可用变量常量混入函数等语功能,能够更有效的写出这些语言来。
less的出现受sass的影响比较大,但是在语法上比较类似于css,所以对于设计人员和开发人员来说,开发相对比较容易。现阶段很多流行的框架中已经能看到他的影子了。
stylus出现的最晚,普及率不如前边两个高,但也是挺好用的,他的特点是能够高效动态使用表达式的方式生成css共浏览器使用

这就是node出现之后衍生出来的一系列产品,还有很多,他们不一定是前段开发所必须用到的,但却能使前段开发更加的系统便捷

nodejs

我纠结了一会node属不属于前端范畴的问题。我认为是属于的。

解决高并发一直是后台哥哥们乐于讨论的问题,比如咱们的好近实时监控系统,理论上每个连接都会生成一个新线程,每个新线程可能需要
2 MB 配套内存。在一个拥有 8 GB RAM 的系统上,理论上最大的并发连接数量是
4,000
个用户。随着用户的增长,咱们希望监控程序支持更多用户,这样,就必须添加更多服务器。当然,这会增加业务成本,尤其是服务器成本。除了成本上升外,还有一个技术问题:用户可能针对每个请求使用不同的服务器,因此,任何共享资源都必须在所有服务器之间共享,到这里,技术就到了瓶颈。node诞生的初衷,就是为了解决这个问题。node解决这个问题的方法是:更改连接到服务器的方式。每个连接发射一个在
Node 引擎的进程中运行的事件,而不是为每个连接生成一个新的 OS
线程,并为其分配一些配套内存。

nodejs属于服务器端语言,在前后端分离这场圈地运动中是前端的一个有利武器,同时在前端自动化上也提供了大量的可编程工具(grunt,bower,gulp等),淘宝百度对nodejs的热度一直很高,自然而然我认为这是一个趋势。去年美团成立了美团酒店的团队,选择了node作为后台语言,圈走了后台大部分的工作。我在想,前端js加上node再加上对UI的技能需求,以后是不是前端工程师是不是该叫全端工程师了。

P:我我对node只有粗浅的了解,也是以后希望学习的方向,不辩。

2、大前端与Anaular

CHROME

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

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

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

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

SPA的意义

spa也就是single page application 单页程序
在我们大部分人的印象中,前段只是mvc的view部分,对不对,浏览器发送请求的时候,服务端进行mvc处理,利用jsp/php之类,动态生成html语言,然后在浏览器上渲染出来。这样有个不好的地方就是基本上服务端把所有的东西都给做完了,1、服务器的压力过大,2、前后端分工并不明确,3、每次加载渲染时间相对较长。尤其是手机端,在4g出现以前加载一个页面是一件十分感人的事情,用户体验特别差。angularJs等框架出现后解决了这个问题,他会在首次加载的时候加载大部分依赖的js然后我们就可以在前段实现控制,类似于mca和核心沟通一样,浏览器和服务端的的沟通也只是报文的处理,这样服务端和前段的开发就不再形成阻塞,约定好接口形式,然后同时开发,都开发好都在进行接口调试,这样也提升了效率,
这是一个余额查询的调用形式,

操作交易其实也类似,我向特定的接口发送json串,然后后台返回操作成功与否,我们根据返回报文的情况做不同的处理或弹出错误信息或跳转到对应界面,或者是跳转到错误界面上。这样前端就负责了网站的页面域用户的一切交互,而后台负责对数据进行安全处理,把视图与视图的控制交由前端管理,同时当我们跳转页面的时候也不是重新加载一个新的界面,而是加载一个页面片段,然后将其嵌套进当前界面中,这个过程中避免了页面的重新加载与渲染,js的那些全局变量也不需要重新赋值

DJANGO&RAILS

敏捷开发打破了项目研发模式。在2010之后的WEB2.0时代,Html5盛行,前端工作被分离出去,PHP那种网页脚本的优势没那么明显,虽然在CMS和论坛模板上依然有优势。Django和Rails的最大优势在于,他让个人或两三个的小团队,实现整套产品成为可能。以Instagram为例,最初两个python工程师用django快速实现了服务端的所有功能,在用户增长时,再将大访问量和大数据量的服务独立出去。

尽管现实残酷,rails每况日下,IE8和rails谁先消失只是先后问题,但其提供的解决方案还是被很多后生所效仿。人们都会记得这朵昙花。

3、前端的统一与分割

IOS & ANDROID系统的普及

2009年之后IOS和Android的快速发展,导致WEB开发发生以下改变:
1.
html5在移动浏览器上优先实现,Android和IOS设备全面支持html5、CSS3,加速了IE消失
2.
上网随时随地发生。鼠标点击、内容繁复的网页越来越简洁,响应式设计快速流行。

  1. APP和服务器交互大部分和网页一样基于HTTP协议,webapp,hybrid
    app的概念被提出。

关于webapp,这里简单说下web相比原生的优势

  • 跨平台:常说的一次编译,到处运行
  • 免安装:打开浏览器,就能使用
  • 快速部署:升级只需在服务器更新代码,而不像客户端需要更新版本
  • 超链接:可以与其他网站互连,可以被搜索引擎检索

听起来刁刁的,这些优势却经不住推敲。首先,不同系统的用户使用习惯是不同的,ios用户返回按钮习惯在左上角,而安卓用户却习惯在屏幕最下方的位置,产品经理问,那放在哪儿。呵呵哒不知道。其次,曾经看过一个调查报告,问用户更喜欢用客户端还是web端。

喜欢客户端的用户远远超过了web端。你问我喜欢什么,我也是喜欢客户端。你问我为什么,我觉得比较有安全感吧,而且更新版本让我觉得很爽,很有存在感,让我知道我并没有被世界遗忘,让我知道你们产品在更新,在为我操心。另外超链接..我一个客户端要你seo干什么。这还没完,webapp的缺点还有一大把,最大的缺点莫过于没有GPU加速,想要实现一个复杂一些动画,真是要了浏览器亲命了。其次网页是单线程的,加载dom时会阻塞js,导致的结果就是,卡。一卡就烦了,烦了就关了,用户减一。

而hybrid就不同了,hybrid
app的意思是混合原生应用,将需要频繁更新的页面作为web放在远程更新。这是一个靠谱的解决方案,BAT有很多案例,如微信发布的JS
SDK,掌上百度和淘宝客户端Android版;

当然这里边的坑有很多,有机会,我把我踩过的坑讲给你们听。

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注