1.Web移动终端开发。

3.百花齐放的类库和框架。

Web移动终端开发

前端知识图谱

MediaQueries：在CSS2时代，如果你曾经为网站设计过打印版CSS，那么就会明白CSS3MediaQueries的作用。不过，CSS3的MediaQueries比CSS2的Media

Queries可以获取这些数据：浏览器窗口的宽和高、设备的宽和高、设备的手持方向（横向还是竖向）和分辨率等。也就是说，MediaQueries提供了一种基于不同的平台写CSS的技术。这项技术在2011年初被推广开来，至今已非常火热，尤其是在Web页面仍占互联网流量大多数的今天，这种兼容技术能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。

Bootstrap:Twitter推出的一个开源的用于前端开发的工具包。它由MarkOtto和JacobThornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言LESS写成，与CSS框架Blueprint存在很多相似之处。Bootstrap一经推出便颇受欢迎，一直是GitHub上的热门开源项目，NASA和MSNBC的BreakingNews都使用了该项目。2012年第二季度，Bootstrap发布了2.0版，Bootstrap2.0的一个重大改进是添加了响应设计特性，在1.0中，这是让很多开发人员抱怨的地方。而且为了提供更好的针对移动设备的响应式设计方案，Bootstrap2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个非常轻量级的框架，2.0在压缩后只有10KB。Bootstrap为我们的网站快速搭建提供了不错的工具和思路，这个工具集将拥有更旺盛的生命力。

Javascript的兄弟们

Typescript是微软开发的Javascript的超集，Typescript兼容Javascript，可以载入Javascript代码然后运行。与Javascript相比，Typescript进步的地方在于：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更像是传统的面向对象语言。由于Javascript只是一个脚本语言，并非用于开发大型Web应用，所以没有提供类和模块的概念。而Typescript扩展了Javascript实现了这些特性，能更好地支持大规模Javascript应用开发，吸引了不开发者。但要注意，虽然Typescript有微软做后盾看起来很有保证，但目前提供的只是早期的预览版本，Typescript并不像它的网站看起来那样精美，最终版本可能会在一年后ECMAscript6发布会确定，现在的版本只是个开发预览版。因此，Typescript今后发展如何，还需要进一步观察。

如此看来，Node.js在命令行工具领域有着更加广阔的应用场景，甚至可以代替Perl或者Ruby这些传统的动态语言。在淘宝Node.js已有非常多的应用场景，例如在数据部门，Node.js被用作处理高并发场景下的容池，专门吸收高并发的请求，甚至能够保持和客户端的长链接，而这在之前则需要花费很高昂的成本，例如Comet技术等。此外，淘宝的开源前端类库KISSY也可以直接运行于Node.js环境，这样就可以在命令行运行KISSY代码，很多前端代码就有机会采用自动化测试等，提高生产效率。再者，淘宝内部的开发工具链也已大部分采用Node.js来构建了。

SeaJS是由支付宝前端高级技术专家王保平（玉伯）开发的一个遵循CMD规范的模块加载框架，可用来轻松愉悦地加载任意Javascript模块和CSS模块。SeaJS非常小巧，小巧在于其压缩后体积只有4KB，而且接口和方法也非常少。SeaJS有两个核心：模块的定义和模块的加载。SeaJS可以加载任意Javascript模块和CSS模块，能保证你在使用一个模块时，已将所依赖的其他模块载入脚本运行环境中。SeaJS可以让你享受写代码的乐趣，不用去管那些加载的问题。毕竟现在网页的可维护性和性能问题一样严峻，体现在：文件太多，不利于维护，前端后端都一样；HTTP请求过多，当然这个可以通过合并解决，但如果没有后端直接合并，那么人工成本会非常大。用SeaJS就能非常好地解决这些问题。SeaJS遵循CMD规范，因此可以很方便地书写模块。目前已经有越来越多的人采用CMD规范来开发项目了。

MetroUICSS是一个非常完整的创建Metro风格的网站框架。它自成体系，但也可以与其他框架一起使用。使用LESS创建，并且拥有网格系统、排版样式、表格、按钮和图片。同时也拥有内建的Javascript组件，帮助你生成片状、菜单、边栏、进度条和提示等，是一个非常好用的框架。随着Windows8的进一步流行，这种风格的CSS类库一定会成为一种趋势。

iScroll.js是使用原生Javascript编写的一个模拟滚动效果的小类库，不依赖于任何Javascript框架。旨在解决移动WebKit系浏览器的区域滚动问题，兼容MobileSafari、Android默认浏览器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心浏览器。最新版本为iScroll4。这个小库一问世就备受关注，因为它不仅可以在PC端完美模拟滚动效果，在移动终端里对触屏事件的支持也堪称完美。

前端MVC在2011年是比较火的话题，随着越来越多的人开始尝试使用诸如JavascriptMVC和Backbone.js这些MVC类库，更多的产品也看起来更像“软件”而非“网页”。但由于前端环境的复杂性，我们也渐渐发现“这种”MVC并非完美，只能应用于“基于数据驱动”的场景，而对“基于事件驱动”的场景却没有太好的解决办法。目前，淘宝有很多产品在尝试使用“有限自动机”来弥补MVC在这方面的不足。因此，新场景下的MVC还需要更深入的提炼。

2012年，关于前端开发编码规范的讨论愈来愈多。国外和国内的顶尖开发者几乎同时对编码规范产生了很大兴趣，前Yahoo!首页首席前端工程师N.C.Zakas在他那本《高可维护的Javascript》书中也提到规范在团队协作过程中的重要性。而如下这两个方面，是值得我们探讨和深思的。

Java语言编码规范对于前端开发编程规范有非常大的影响。在Zakas的《高可维护性Javascript》一书中提到了五种Javascript编程规范，都和Java语言编码规范有着类似的渊源：Crockford编程规范、jQuery核心风格指南、SproutCore编程风格指南、Google的Javascript风格指南和Dojo编程风格指南。不管是哪种规范，都强调了编码风格一致的重要性，这也可看出，前端团队开发越来越看重规范，Javascript的灵活性需要某种程度的限制。

说到前端技术知识结构的体系化建设，这是我这些年来一直都在做的事情，在2011年也画了一张图来说明我的观点——前端技术体系的建设是一项长期的任务。毕竟前端新技术新知识层出不穷，对于经典的知识结构的整理也很有挑战性，但这项工作终究需要有人去做，为新入道的人指出一个大致的方向。对于前端工程师的成长问题，我也写过一篇长文“前端开发十日谈”，帮助新人们解惑。