随着互联网产业的爆炸式增长，与之伴生的 Web 前端技术也在历经洗礼和蜕变。尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的 IT 产业注入了新的活力。尽管 Web 前端技术诞生至今时日并不长，但随着 Web 技术的逐渐深入，今后将会在以下几方面发力。
　　1.Web 移动终端开发。
　　2.JavaScript 的兄弟们。
　　3. 百花齐放的类库和框架。
　　4. 工程化的 Web 前端开发规范。
　　Web 移动终端开发
　　PhoneGap：一个开源的开发框架，使用 HTML、CSS 和 JavaScript 来构建跨平台的移动应用程序。它使开发者能够利用 iPhone、Android、Palm、Symbian、BlackBerry、WindowsPhone 和 Bada 等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用之外，还可以使用 PhoneGap 提供的云端 Build 工具进行应用编译。也就是说，只需要将用 HTML5 写好的应用上传到 PhoneGap 的云端服务器，PhoneGapBuild 即可将其编译成适合不同平台的应用。
　　前端知识图谱 
　　SenchaTouch：说到这里，就不得不提一些面向移动端的 WebUI 库，毕竟 PhoneGap 是一个工具，要想基于 Web 技术构建完整的 App，必须选择一些适用的移动 UI 库。而最值得一提的是 SenchaTouch，它可以让 WebApp 看起来像 NativeApp。美丽的用户界面组件和丰富的数据管理，全部基于最新的 HTML5 和 CSS3 的 Web 标准，全面兼容 Android 和 iOS 设备。PhoneGap 昭示着一种开发趋势，即 App 也可以使用 Web 前端技术来完成。而作为开发者最常用的 UI 工具箱，SenchaTouch 又进一步加速了这种趋势，目前在淘宝已有大量的项目采用这种思路来搭建，即在内置应用的外壳加上自定义的基于移动 Web 的 UI 库。相信在未来这种模式必会越来越流行。
　　MediaQueries：在 CSS2 时代，如果你曾经为网站设计过打印版 CSS，那么就会明白 CSS3MediaQueries 的作用。不过，CSS3 的 MediaQueries 比 CSS2 的 Media
　　Type 更实用，因为 CSS2 的 MediaType 并不曾被多少设备支持过。CSS3 的 Media
　　Queries 可以获取这些数据：浏览器窗口的宽和高、设备的宽和高、设备的手持方向（横向还是竖向）和分辨率等。也就是说，MediaQueries 提供了一种基于不同的平台写 CSS 的技术。这项技术在 2011 年初被推广开来，至今已非常火热，尤其是在 Web 页面仍占互联网流量大多数的今天，这种兼容技术能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。
　　Zepto.js：一个专为 MobileWebKit 浏览器（如 Safari 和 Chrome）而开发的 JavaScript 框架。它标榜自己简约的开发理念能够帮助开发人员简单、快速地完成开发交付任务。更重要的是这个 JavaScript 框架是超轻量级的，只有 5KB。Zepto.js 的语法借鉴且兼容 jQuery。目前已有不少网站开始基于 Zepto.js 做应用，因为在抛弃了 IE 浏览器的兼容性问题后，Web 开发会变得越来越纯粹，体积更轻巧，编码也更加愉悦。不可否认，随着移动终端开发越来越流行，Zepto.js 在未来将会有更加广阔的应用场景和空间。
　　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 的兄弟们
　　CoffeeScript 是一个借鉴 Ruby 编写的新编程语言，创建者 JeremyAshkenas 戏称它是 JavaScript 的低调的小兄弟，因为 CoffeeScript 会将 Ruby 编译成 JavaScript，而且大部分结构都相似。但不同的是，CoffeeScript 拥有更严格的语法。它的最大功绩就是将 JavaScript 硬绑的 C/Java 语法抛弃了，改为采用类似 Ruby/Python 的语法。Ruby/Python 本来就是深受 Lisp 影响的，与 JavaScript 算是同门师兄，它们的语法经过了实践考验，非常适合函数式编程。这种优雅的语言独具魅力，即将面世的 2013 版的淘宝首页即采用了 CoffeeScript 实现。
　　TypeScript 是微软开发的 JavaScript 的超集，TypeScript 兼容 JavaScript，可以载入 JavaScript 代码然后运行。与 JavaScript 相比，TypeScript 进步的地方在于：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更像是传统的面向对象语言。由于 JavaScript 只是一个脚本语言，并非用于开发大型 Web 应用，所以没有提供类和模块的概念。而 TypeScript 扩展了 JavaScript 实现了这些特性，能更好地支持大规模 JavaScript 应用开发，吸引了不开发者。但要注意，虽然 TypeScript 有微软做后盾看起来很有保证，但目前提供的只是早期的预览版本，TypeScript 并不像它的网站看起来那样精美，最终版本可能会在一年后 ECMAScript6 发布会确定，现在的版本只是个开发预览版。因此，TypeScript 今后发展如何，还需要进一步观察。
　　此外，在服务器端，Node.js 越来越流行。如今 Node.js 不仅作为处理高并发请求的中间层解决方案，还因其灵活的语法和丰富的底层 API，越来越多的人开始用它来写工具，尤其是之前基于 Ant 或者 Java 的一些工具如今都有了 Node.js 的版本。
　　如此看来，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 规范来开发项目了。
　　最近微软已经正式发布了 Windows8 操作系统，Windows 操作系统的风格已经完全变成了磁贴状的 MetroUI。对于微软来说，这是一个巨大的改变，而且所有微软的平台包括桌面、平板、移动端及其网站都使用这个 UI 风格。
　　MetroUICSS 是一个非常完整的创建 Metro 风格的网站框架。它自成体系，但也可以与其他框架一起使用。使用 LESS 创建，并且拥有网格系统、排版样式、表格、按钮和图片。同时也拥有内建的 JavaScript 组件，帮助你生成片状、菜单、边栏、进度条和提示等，是一个非常好用的框架。随着 Windows8 的进一步流行，这种风格的 CSS 类库一定会成为一种趋势。
　　Hype 是一个小巧的工具，是 MacAppStore 新上架的一个 HTML5 创作工具，其长处是可以在网页上做出悦目的动画效果，无须 Flash 插件。开发该应用的公司 Tumult 由两个前苹果工程师创建，并获得了 YCombinator 的投资。由于公司的联合创始人之一 JonathanDeutsch 曾担任 Mail.app 后端的技术主管，因此他在接受 PaulHontz 的 TheStartupFoundry 访谈时，谈到公司创始是为了解决 HTML5 创作工具缺乏的问题。可以说，Hype 是第一个可用的创作 HTML5 产品的可视化工具，具有里程碑式的意义。随着硬件性能提升，HTML5 的应用程序更加倾向于被工具生成，而不像传统意义上由工程师 " 切 " 出来。因此工具化是一个方向，不管 HTML5 是否真的能在移动终端扎下脚跟，这种方向是值得坚持的。毕竟，HTML5 的应用开发现在还处于原始社会。
　　iScroll.js 是使用原生 JavaScript 编写的一个模拟滚动效果的小类库，不依赖于任何 JavaScript 框架。旨在解决移动 WebKit 系浏览器的区域滚动问题，兼容 MobileSafari、Android 默认浏览器、Safari、Chrome、Firefox5+、Opera11+、IE9+ 及其他 WebKit 核心浏览器。最新版本为 iScroll4。这个小库一问世就备受关注，因为它不仅可以在 PC 端完美模拟滚动效果，在移动终端里对触屏事件的支持也堪称完美。
　　iScroll4 是 2011 年底问世的，2012 年在移动终端产品开发中大放异彩，在淘宝的诸多产品中都用到了这个 JavaScript 库。iScroll 是小而精的经典作品，名字也带着苹果范儿。但美中不足的是，只能使用 ID 调用。不过这个小特性不是什么大问题，可以通过二次封装来解决。期待 iScroll4 在移动终端里有更多精彩的表现。
　　前端 MVC 在 2011 年是比较火的话题，随着越来越多的人开始尝试使用诸如 JavaScriptMVC 和 Backbone.js 这些 MVC 类库，更多的产品也看起来更像 " 软件 " 而非 " 网页 "。但由于前端环境的复杂性，我们也渐渐发现 " 这种 "MVC 并非完美，只能应用于 " 基于数据驱动 " 的场景，而对 " 基于事件驱动 " 的场景却没有太好的解决办法。目前，淘宝有很多产品在尝试使用 " 有限自动机 " 来弥补 MVC 在这方面的不足。因此，新场景下的 MVC 还需要更深入的提炼。
　　工程化的 Web 前端开发规范 
　　2012 年，关于前端开发编码规范的讨论愈来愈多。国外和国内的顶尖开发者几乎同时对编码规范产生了很大兴趣，前 Yahoo! 首页首席前端工程师 N.C.Zakas 在他那本《高可维护的 JavaScript》书中也提到规范在团队协作过程中的重要性。而如下这两个方面，是值得我们探讨和深思的。
　　AMD 与 CMD 规范之争，随着 CommonJS 的进一步普及，CommonJS 规范在标准的模块开发领域发挥着越来越重要的作用，而 CommonJS 在浏览器端的难以实现却为这份规范增添了一丝变数。本质上讲，CommonJS 是一种用于同步加载 JavaScript 代码的 API 规范，非常简单优雅。为了在浏览器端实现这种机制，则不得不加入了一层异步回调，这便是 AMD（Modules/Asynchronous-Definition）。RequireJS 实现了这个规范，而 Dojo 也将马上完全支持（Dojo1.6）。规范本身非常简单，甚至只包含了一个 API。玉伯在开发 SeaJS 的过程中，更多地保持了 CommonJSModules 规范的风格，即 CMD（CommonModuleDefinition）。较之 AMD，CMD 没有采用单一的 API 来适用于多个功能，而是根据不同功能定义不同的 API。我认为，两者在完备性上是基本一致的，但在社区理念和编程风格上有所差异，开发者可以根据自己的偏好来选择使用 AMD 还是 CMD 编程风格。
　　Java 语言编码规范对于前端开发编程规范有非常大的影响。在 Zakas 的《高可维护性 JavaScript》一书中提到了五种 JavaScript 编程规范，都和 Java 语言编码规范有着类似的渊源：Crockford 编程规范、jQuery 核心风格指南、SproutCore 编程风格指南、Google 的 JavaScript 风格指南和 Dojo 编程风格指南。不管是哪种规范，都强调了编码风格一致的重要性，这也可看出，前端团队开发越来越看重规范，JavaScript 的灵活性需要某种程度的限制。
　　总之，通过上面的阐述，我们可以看到前端技术的不断进步和推陈出新，也能够体会到项目过程的工程化，解决方案的轻量化，库和框架的多元化，知识结构的体系化，这种趋势在今后会变得越来越明显，也昭示着前端技术的发展方向。
　　说到前端技术知识结构的体系化建设，这是我这些年来一直都在做的事情，在 2011 年也画了一张图来说明我的观点——前端技术体系的建设是一项长期的任务。毕竟前端新技术新知识层出不穷，对于经典的知识结构的整理也很有挑战性，但这项工作终究需要有人去做，为新入道的人指出一个大致的方向。对于前端工程师的成长问题，我也写过一篇长文 " 前端开发十日谈 "，帮助新人们解惑。
原文地址：http://iphone.myzaker.com/l.php?l=540813b91bc8e05d118b456a