前端发展史美高梅59599:

前端发展史美高梅59599:

未来

3D页游?WebOS? 虚拟现实?

最后,随着用户硬件性能的提升,网络带宽的越来越粗,传感系统,Retina,WebGL技术的日渐成熟,再加上O2O的蓬勃发展,上边这些会成为现实么?

1 赞 3 收藏
评论

美高梅59599 1

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出现之后衍生出来的一系列产品,还有很多,他们不一定是前段开发所必须用到的,但却能使前段开发更加的系统便捷

十年WEB技术发展历程

2015/07/19 · HTML5 ·
WEB

原文出处: 红河小鱼   

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

这是一个演讲稿,mark一下

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草稿的不断实现与完善,前端之路看起来是一条京畿坦途,我充满期待。

2、大前端与Anaular

JQUERY

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

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

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

 

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

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

Bootstrap

2011年Twitter开源的网页端GUI框架。jquery兼容了不同浏览器的js部分,bootstrap则兼容了不同浏览器的css部分。甚至于说,作为一个后端开发,你无需了解css,无需前端,无需设计师,只要看一看bootstrap的文档,就可以搭起一个美观大方的后台管理系统。常见类似的GUI框架还有zurb的foundation,google的materialize,百度也曾出过一个名为GMU的移动端框架。

就我个人来说,我并不喜欢这些gui框架,尽管他们简化了css,实现了一些很炫酷的效果,尽管我在项目中也用到过这些,尽管我不想承认我是绿茶。这些框架最大的缺点就是,千篇一律,所有的页面都是一个样子,一样的nav,一样的sidebar,一样的表单,连鼠标点上去放个光都一模一样。就像我如果长了三条腿(虽然确实长了三条腿)别人会说我很别致让他们眼前一亮,但如果所有人都长了三条腿,web也就失去其魅力了。另一个缺点是臃肿,一个css就走100多k的流量,其js插件又大都依赖jquery,忍心么。

当然,其为了解决响应式提出的栅格化html的思想还是很值得借鉴的。

3、前端的统一与分割

DJANGO&RAILS

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

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

jquery

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

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等网页脚本语言的衰落。(来辩)

 

ajax

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

admin

网站地图xml地图