发新帖

Web前端技术盘点及发展方向

[复制链接]
96 0

  Web 发展了几十个春秋,风起云涌,千变万化。Web技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创造。这几年的前端,更为之甚!

  本文会盘点从 09 年开始到 15年间前端技术的革新,同时也会从多个角度,解读近几年前端技术发展的潜在因素,其中穿插了若干对前端演进的拙见,难免会有错误和疏漏,望读者可以补充和斧正。


  WEB那些年


  09年基础类库完善,寻求突破


  09 年之前,Java 还处于对自身语言的完善过程中,而到了 09年,Java 类库已经颇为成熟,jQuery/Prototype//Dojo等都已经发布了好几个stable版本,各大类库也是相互吸收优点,不断完善并提高自身 性能,然而功能上已经没有太多增加的势头。部分框架开始了思想上的转变,更加注重前端开发的组织和结构,条理性强了很多,如YUI 等。

  从 ECMA 规范的争执,开启了浏览器引擎大战,各大厂商也趁机瓜分 IE

  份额,Chrome和Firefox在这场战役中取得大胜,V8 也敲响了前端的大门。为了迎合市场的激烈竞争,IE 开始了升级之旅,09 年初发布

  IE8,全面兼容 CSS2.1。

  而此时,Node.js 和 3G Mobile 这两只巨兽开始浮出水面,Web 标准也开始向 HTML5、ECMA5.0 靠拢。


  10年看齐标准关注WEB性能


  毫无疑问,这一年,各大巨头都看清了 HTML5 是 web 发展的未来,在保留原来前端技术的状态下,都簇拥着拉扯 HTML5的裙摆。富客户端应用也在这一年蓬勃生长,ExtJS/Dojo 摇身变为企业级框架,各类组件化概念和产品如约而至。

  延续着 09 年的变化,10 年的前端显得颇为沉寂,然而在标准的运用和推动上,各大厂商也是十分卖力。IE 9 出来了预览第三版,iPhone 的

  Safari 已经能够支持众多 HTML5 内容:Canvas/Video/Audio/Geolocation/Storage/Application Cache/Web SQL Database 等。

  W3C 宣布成立 Web 性能工作组,Google 和 Mozilla纷纷推出应用商店,浏览器调试工具也丰富了起来,人们开始更多地关注开发体验和性能问题。


  11年HTML5 扛大旗,Flash 堪忧


  2011 年 HTML5 的技术发展和推广都向前迈进了一大步,语义明确的标签体系、简洁明了的富媒体支持、本地数据的储存技术、canvas等等各类技术被广泛应用。这一年,很 多 web 开发者也面临一项技术的抉择,HTML5 or Flash?从 Flash Player 11.1 开始,Adobe不再继续开发面向移动设备浏览器的 Flash 插件,积极投身于 HTML5,这意味着 Flash 技术的凋零。

  这一年,HTML5 游戏火爆到了一个高潮,移动端开发工具和调试工具也日益成熟。jQuery 已经成为大小公司日常开发的标配,成千上万的 JQ

  插件让网页开发变得尤为轻松,而随之而来的也是页面的臃肿和性能调优的深入探索。

  Node.js 已经悄然崛起,在 github 上的访问量已经超过了 Rails,国内的云应用开始尝试使用 Node.js,Node.js相关工具也纷纷出来。


  12年响应式开发,工程化推进


  随着硬件技术的发展,各手机厂商又开始骚动起来,为了占有更多的市场,不断提高产品的性价比,体验也得到了不断的优化。借着先前两年HTML5刮起的东 风,移动端上的 web 开发也颤抖了起来。移动端的开发挑战不亚于 PC 上对多个浏览器的支持,这一年,萌生了众多移动端框架,如Sencha Touch/Zepto.js/JQ Mobile等,相对 PC 端框架,它们更加轻便。

  而移动端的崛起,带来了许多终端开发难题:多终端适配,多分辨率适配,远程调试等等,而随着这些难题一个个被解决,移动端生长的势头变得更加强盛。此时

  Twitter也推出了 Bootstrap, 这个前端开发工具包不仅方便了前端,也方便了后端同学,它的出现让快速建站更加简单。

  编程思想的切换,迎来了 Coffee 和 Type,这两个预处理语言的出现又为

  Java引来了不少其他方向转型过来的开发者。Java的兄弟

  Node.js,也在命令行领域开拓了一片不小的疆域,甚至有动摇 Perl和Ruby地位的趋势。

  在前端工程化上,几个派系相互争斗,产出了 AMD、CMD、UMD 等规范,也衍生了 SeaJS、RequireJS等模块化工具。前端在这一年很有跳跃感。


  13年爆发式增长,百花齐放


  规范和标准上有不少产出。Web Components的出现给前端开发开辟了新思路;WebDriver规范的出来推动了自动化测试的进程,ECMA 6的规范草案落地,Webapp 工作小组在这一年也是相当活跃。

  Chrome 浏览器在这一年也有了很大的突破,开始支持 SPDY,使用 Blink 取代 webkit 作为

  Chromium的新渲染引擎,Chrome DevTools 的调试体验大幅度提升。这一年中,Chrome

  连同其他浏览器厂商快速推动了各项草案规范的实现。

  语言能力上依旧在增强,并且从 JS 开始扩散到 CSS,LESS、SASS 和 Stylus 等 CSS 预处理语言开始走俏,Web开发变得更加紧凑。

  而在无线端,应用不再局限于 Webapp,由于流畅度、性能等方面不能满足用户体验的需求,各大公司开始转向 Native 方向的研究,进而出现了Hybrid 和 PhoneGap 的繁荣,它们为 JS 调用了提供更多的设备 API。

  Node.js 大放异彩,很多公司在生产环境中使用 Node.js,同时也出现了诸如 Express、Meteor等小巧的快速搭建 Node.js

  Server 的应用框架。

  各浏览器的调试也是种类繁多、功能丰富,PhantomJS 在自动化测试上开始取代Selenium,出现了众多的远程调试方案和工具。

  前端工程化开始普及,各公司开始推出自己的前端集成开发解决方案。


  14年移动端的崛起,HTML5 和 ES6 落地


  HTML5 正式定稿,这意味着,web page 正式演变为 web application。ES6 华丽丽走进前端,走的很稳重,它的Module/Class 等特性已经完全让这门语言具备了开发大型应用的能力。

  大而厚的基础库难以满足灵活场景,Mobile 要求极致体验,MV* 库铺卷而来,如vue/angular/knockout等。

  Web Components 跨终端组件快速发展,移动端开发迎来一次升华。Node.js 前后端分离的流行,中间层的出现改变了前后端的合作模式。2014 是颠覆式的一年,前端发展在这一年开始形成了一个短暂的稳定格局。


  15年观念的转变,步入前端工业化生产


  今年格外引人注目的框架是,类 React。Facebook 在 React.js Conf 2015 大会上推出了基于 Java的开源框架 React Native,它结合了 Web 应用和 Native 应用的优势,可以使用 Java 来开发 iOS 和 Android原生应用。在 Java 中用 React 抽象操作系统原生的 UI 组件,代替 DOM元素来渲染等。敲一次代码,能够运行在多个平台上,其优势可见一斑。除了 React ,还有手机淘宝推出的 Weex 框架,它吸收了 vue.js的编程精华,编程风格更加简约。

  在众多构建工具中,如今潇洒存活的并不多。体验完 grunt 和 browserify 后,gulp 顺势而至,尔后又出现了 webpack、jspm等。而包管理工具,经历了 components、bower、spm 后,npm 开始主导整个市场。

  Node.js 的应用已经铺天盖地,各大公司前端都把

  Node.js作为分离前后端的主要手段,并且在测试、监控等方面沉淀了大量内容。不过,这个市场是很苛刻的,Node.js 的性能难以达到

  C/C++的水平,那么接下来要做的就是要提升性能,至少得接近 C/C++。


  Mobile 的发展驱动着战场的转移


  现如今,iPhone 都出到 6s 了,一个版本一个尺寸,而且尺寸越来越大,还有各种宽高不一的

  Android机器,种类繁多。以前的触屏是电阻式,只支持单点触碰;而现在电容式的触屏精度更高,还支持多指触控,这如丝般顺滑的体验在三四年前是完全

  体会不到的。曾经手机开一个程序久了就会卡,动不动还会自动重启;而现在的手机开一堆程序,完全无感知,这就是硬件发展前后的差异。

  手机已经成为了人们生活中不可或缺的一部分,甚至成为了一些人身体的一部分,淘宝今年双十一的数据显示,国内移动端的消费比例已经远远超过了 PC 端,占比68%。面对庞大的用户,我们的技术是否做好了充足的准备,这里还得打一个问号。

  PC 上那一套经验不是直接搬到移动端就可以使用了,在移动端还需要解决更多的问题:

  1.多分辨率问题,这里涉及到了响应式设计和前端响应式技术

  2.不同网络环境的网页加载优化问题,2g/3g/4g/wifi

  3.手指交互带来的一系列体验问题

  4.为了提升用户体验,将 Web Native 化 —— 类 React 技术带来的一系列问题

  5.远程调试问题

  6.移动安全问题等等

  上面提到的问题很多已经有了优秀的解决方案,当然也有很多未提及的。WebApp的性能、流畅度和稳定性远远不如原生应用,同时它也无法良好地运用设备提供的原生功能,这些都是大家转投 Native 的原因。

  2016年,我觉得技术上的新创造会稍微缓和些,这两年很多人已经被新技术冲击得有些找不着方向了,同一类东西,前者还没学完,后者就开始火爆了,紧接着又是一阵技术的凋零和新技术的出现,这样搞久了也会有一丝的疲倦。而更多的会关注,如何更好地服务多端,如何更大幅度地提升开发体验和用户体验,很多技术都会往性能、往极致这个方向上钻研。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

客服中心

400-058-0010 周一至周日9:00-21:00 仅收市话费
快速回复 返回顶部 返回列表