2013前端技术盘点

  本文曾发表于2013年12月《程序员》,个人收集和一些拙见,难免有错误和疏漏,请各位补充。文中加粗的关键字不少,没有一一添加链接,Google一下即可找到相关资料

  2013年,尽管前端技术在无线领域受到了挫折,但这无法减缓其发展势头。在基础技术方面,规范和标准的发展、浏览器的快速演进为将来的Web应用打好了根基;随着网站规模的进一步变大,交互变得更复杂,大家更关注用新的开发模式来解决问题;更重要的是,经过多年积累,在前端工程实践上我们有了丰富的成果。本文将从多个角度介绍今年前端技术的发展,其中会穿插若干对前端发展的思考。

jzcoder的PHP学习笔记

 方兴未艾的规范和标准

  自从HTML5推出后,W3C和各大浏览器厂商都在加紧推动规范发展和实现,尤其是手机浏览器对规范的支持程度,已成为国内浏览器宣传的卖点。对于W3C的正式规范,大多数都已经被现代浏览器实现,而我们更应关注快速发展中的Working Draft规范。它们不仅对实际开发有帮助,更重要的是它们代表了Web未来的发展方向。

  Web Components规范定义了未来的HTML组件,其中最重要的部分是Shadow DOM和Custom Element,除此之外还包括HTML模板、HTML imports和Decorators。Shadow DOM能将组件的代码和使用者的代码彻底分离,通过在文档渲染时插入一颗DOM子树,但这子树并不在主DOM树中,因而外部的CSS无法直接影响Shadow DOM中的元素;当然,Shadow DOM能提供事件API、Javascript API、CSS API供外部控制。Custom Element则允许开发者自定义HTML标签,让页面更语义化的同时,还能为元素加入属性和方法,以提供特定的功能供外部调用。

  WebDriver规范和 Selenium 2 WebDriver 自动化测试框架 API 十分类似,它取代了嵌入到被测Web应用中的Javascript,由浏览器直接支持的WebDriver,避免了Javascript安全模型的限制,还能利用操作系统级的调用来模拟用户输入。Firefox、IE、Opera 和 Chrome 都对其有一定支持,也能通过 WebDriver 完成 Android 和 iPhone 的移动web应用测试。

  Webapp Working Group今年很活跃,前文提到的 Web Components 规范就是来自这个小组。它们今年的进展还包括 Push API、Streams API、UI Events 等规范。

  W3C去年还成立了System Applications Working Group,目标是定义运行环境、安全模型和相关的API用来构建能与原生应用匹敌的web应用。他们在今年提出了一系列规范,其中比较重要的有:用来定义和引用Webapp的App URI规范;能定期唤醒应用的Web Alarms API;和系统短信服务通讯的Messaging API。

  W3C所有规范都会公开发布,在 http://w3.org 上可以找到各个工作组的当前进展,你也可以订阅他们的邮件组。

  除了W3C规范,另一个重点是 ECMAScript 6 的规范草案。今年草案更新了9个版本,按计划,正式版本将在年底发布,我们每天都在编写的Javascript代码即将发生巨大的变化。ECMAScript 6 在保证向下兼容的前提下,提供大量新特性,使 JavaScript 能用来编写更复杂的应用,今年重大的更新包括箭头函数、对象代理、Symbol对象,还对之前提出的Class、Modules等特性做了一些调整。部分特性在Firefox和Chrome的较新版本中都获得了支持,Google也推出了一个traceur-compiler,能将ECMAScript 6的代码编译成ECMAScript 5在普通浏览器中运行,你可以自行尝试。

 浏览器与协议

  SPDY,这个四年前Google提出的协议,希望能让网络传输更加快速,迄今已经获得了Chrome、Opera(>=12)、Firefox(>=11)、IE(>=11)的支持,当前正在制定的Http/2草案也采用了SPDY协议做为其规范的基础,SPDY通过压缩、多路复用和优先级来缩短加载时间,只需要建立一个TCP连接即可传送网页内容及图片等资源,SPDY的网页服务器还可以主动推送内容。根据Google的测试,SPDY协议比传统的Https协议快30%-40%。

  PNaCl(Portable Native Client) 这个开源项目允许开发者在浏览器内编译C或者C++代码,一次编译就能在各种桌面 Chrome 或 Chrome OS 中运行,无需用户安装,性能和本地原生代码相近。从今年的Chrome 25开始,PNaCl 做到了架构独立,一次编译就能在不同的平台上运行,包括ARM平台。这让web应用程序拥有更多发挥空间。

  Blink已经取代Webkit成为Chromium的新渲染引擎,这是一个Webkit的独立分支。Chromium之前是使用 Webkit 做为其渲染引擎,但由于Chromium在最初就实现了沙盒技术,而Webkit 2之后又开发了一套与Chromium不同的沙盒技术,这样导致了两者的代码复杂度上升,Blink分支可以让 Google 不再顾及对 Webkit 2 的兼容,加快改进速度。与此同时,Google 希望在内核性能上有更大突破,以及快速实现一些W3C的草案,独立的分支会带来更多自由度。对开发者来说,这并不是什么坏事,在 HTML5 规范下,以及标准化组织的推动,两个浏览器不会分裂,只会互相促进。

  各家浏览器都在快速推进草案规范的实现。你可以去 http://caniuse.com/ 详细查询浏览器对各种规范的支持情况。

 语言能力增强仍在继续

  除了规范和标准组织对基础技术的推进,我们还能经由预处理手段对语言能力进行增强。这些增强无需浏览器支持,因而开发者能快速使用这些新特性,更新速度也够快。不过,相对去年来看,今年的势头弱了很多。

  现在流行的CSS预处理语言包括LESS、SASS和StylusLess基于Javascript实现,安装和使用都很简单,从去年开始流行,著名的Bootstrap也是基于Less语法构建的;而SASS最初的设计比较难以理解和使用,直到它的语法升级成SCSS后才逐步被广泛接受,它相对Less能力稍强,如循环、变量等,但这也可能带来滥用,基于SASS的CSS框架有 Compass 和 Bourbon;Stylus和LESS很像,但语法更简洁。由于CSS语法的能力限制,这些预处理器能让开发CSS代码变得更简单,而基于它们的CSS框架更是让开发者低成本地搭建页面。

  CoffeeScript和TypeScript这类去年被热捧的 Javascript 预处理语言,今年变得比较冷却,前者的最近更新是六月份的1.6.3版本,相对年初发布的1.5进展不大;后者也迟迟没有推出1.0版。在我看来,这些语言在简化 Javascript 语言的同时,并没有带来更多的便利性,反而他掩盖了语言内部的某些实现,增加了学习和排错成本。

  反倒是Dart在默默地成长。这个以取代 Javascript 为目标,也支持编译成 Javascript 使用的语言,最近刚发布了其1.0版的SDK,这标志着它已具备投入生产的条件。Dart SDK中,除了编程语言,还包括很多工具和核心资源库,以及一个Dart Editor。在最近的压力测试中,不仅是Dart本身的性能高出 Javascript 许多,就连通过它编译成的 Javascript 代码的性能都略微超过原生 Javascript 代码。

  语言的改进并非短短数年就能完成的工作,我们要留有足够的耐心。

分享到:更多 ()

抢沙发

评论前必须登录!