2012年度最佳Web前端开发工具和框架

2012年，Web 开发领域继续在快速的发展，HTML5 仍然在展示其跨平台的优越性，CSS3 被人们更多的应用到实际项目中，响应式设计（Responsive Design）技巧也被人越来越多的人熟知和使用。

这篇文章收集了2012年度新发布的最具有代表性 Web 前端开发工具和框架，这是一个非常值得收藏的工具列表，从功能全面的 IDE 到美观、充满异国情调的小框架，小工具等等。他们能够帮助你降低 Web 开发过程中的复杂度，节省时间和精力。

01.Foundation 3

响应式设计（Responsive Design）似乎瞬间就发展起来了，各个网页设计的论坛或者社区都会讨论这个话题，大家都想知道如何实现响应式设计，有什么框架或好的解决方案。

Foundation 3，由 ZURB 公司开发，号称世界上最先进的响应式前端框架。利用灵活的网格系统可以快速设计出页面布局。更妙的是，网格可以是你所需要的任何尺寸，它很容易适应各种尺寸的屏幕。

02.Proto.io

Proto.io是一个新的界面原型设计工具，专门针对移动应用程序。基于 Web 的在线环境，可以让你制作流行的 iPhone，iPad，Android 手机或平板电脑，以及任何带有屏幕界面的设备的原型项目。

在设计了一些界面后，你通常会期望能够把页面交互性的链接起来，Proto.io 做到了这一点。它也支持所有你可能想到的触摸手势，以及幻灯片、翻转和淡入淡出动画，使用简单，而且可以免费使用。

03.Fontello

为什么这么难找到一组涵盖所有的基础功能的外观一致的图标？

不用再困惑了，Fontello不仅拥有所有你需要的图标，而且你可以挑选并选择你所需要的字形，并编译成自己需要的一套。 当然，您也可以从GitHub下载整个的图标集。该项目是开源的，糕富帅们捐几刀吧，不胜感激。

04.Bugherd

与普遍的看法相反，推出一个新的网站对于开发团队来说工作还远远没有结束。

BugHerd提供了一个整洁，组织良好的方式来处理反馈，Bug 修复和功能要求。不需要繁杂的电子邮件反馈方式，只需要在网站中包含一个简单的 JavaScript 文件，该网站的访问者就可以通过反馈按钮提交意见和建议。BugHerd 提供了一个友好，直观的界面来管理整个事情。

05.Sencha Touch 2

毫无疑问，移动触屏设备的流行给Web开发带来了巨大的影响。

Sencha Touch是一个基于 HTML5 的移动应用开发框架，致力于吸引HTML5开发者使用Sencha Touch构建在iPhone、Android和BlackBerry等设备上运行的移动Web应用，这些应用效果看起来如同本地应用。改进的API，完善的文档和教程资料以及可靠的本地集成让 Sencha Touch 2成为强有力的移动框架竞争者。

06.Dreamweaver CS6

Dreamweaver是经典的网页制作软件，最新发布的Dreamweaver CS6新增了HTML5和CSS3编码支持；jQuery移动和Adobe PhoneGap框架的扩展支持可协助您为各种屏幕、手机和平板电脑建立项目；集成了Adobe Business Catalyst、FTPS、FTPeS 支持、Adobe Creative Suite、Adobe BrowserLab等众多功能。

07. Cloud9 IDE

Cloud 9是基于NodeJS构建的在线集成开发环境，语法高亮支持 C#, C++, Python, Perl, Ruby, Scala 等等众多常用开发语言。

内置的Vim模式非常好用，支持流行的版本控制系统，像Git，Mercurial和SVN，另外它还有非常强大的插件系统，可以拓展其功能，例如借助CSSLint和JSBeautify，Cloud9就可以变成一款非常实用的代码美化工具。

08.Adobe Edge Inspect

Edge Inspect是一款对移动开发者非常有用的工具，其前身是Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。

只需要把你的设备（Android和iOS）和你的电脑连接起来，这时候你的网站就会在各个设备上同步显示，让检查和调试变得更有效，并可以让设计师同时看到每个版本在所有目标设备上的显示情况。

09.Adobe Brackets

你可能会觉得现在代码编辑器已经是琳琅满目了，而且这些编辑器都很相似，没有什么可创新的了。Brackets让我们知道，其实在编辑器领域还是有很多功能可以去探索的。Brackets是Adobe的开源HTML、CSS和JavaScript集成开发环境。Brackets提供Windows和OS X平台支持。

Brackets的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等，Brackets值得你试试。

10.Modernizr 2.6

Modernizr是一个开源的JavaScript库，用于检测用户浏览器的HTML5和CSS3特性。它使得那些基于用户浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单，让Web开发人员可以在现代浏览器中充分利用HTML5和CSS3的那些先进的特性进行开发，同时又不会牺牲其它不支持这些新技术的浏览器的控制。

11.Sublime Text 2

如果你想体验流畅编写代码的快感，赶紧试试Sublime Text 2 吧！

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，多重选择，快捷命令等。还可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

Sublime Text是一款跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。Sublime Text 2是收费软件，但目前可以无限期试用。 

12.PhoneGap 2.0

PhoneGap是一个免费开源的开发框架，让Web开发人员能够使用熟悉的HTML，CSS和JavaScript构建跨平台的移动本地应用。

通过PhoneGap框架提供的JavaScript API能够以非常简单的方式调用移动设备的核心功能，包括地理位置，摄像头，加速器，通讯录，多媒体，文件和网络等功能。

借助PhoneGap，你完全可以使用熟悉的Web开发技术写出移动Native App，并发布到Apple Store，Google Play等各平台应用商店中。编写好的代码可以上传到云端服务器，使用云端编译功能编译成各种平台下的应用，支持iOS，Android，Palm WebOS，Symbian，Blackberry，Windows Phone和Bada七大平台。

13.Emmet

Emmet项目的前身是前端开发人员熟知的Zen Coding，一种提供快速编写HTML/CSS代码的方法。和一般的编辑器中使用的“代码片段”概念不同，Emmet使用动态的类似CSS表达式的语法来生成代码，这意味着你不需要自己去编辑并创建固定的代码片段，大大的提高了代码编写效率。

Emmet结合优秀的编辑器使用，可以让你代码飞起来！支持的编辑器包括：

• Sublime Text 2
• Eclipse/Aptana
• TextMate 1.x
• Coda 1.6 and 2.x
• Espresso
• Chocolat
• Komodo Edit/IDE
• Notepad++
• PSPad
• <textarea>
• CodeMirror2/3
• Brackets

14.Yeoman

Yeoman提供了一套强大的工具、库和工作流，可以帮助开发人员快速构建出漂亮的、引人注目的Web应用。Yeoman的主要特色：

• 闪电般搭建出框架（使用能够自定义的模板（例如：HTML5 Boilerplate、Twitter Bootstrap 等）、AMD（通过 RequireJS）以及其他工具轻松地创建新项目的框架。）；
• 自动编译 CoffeeScrip & Compass——在代码改动的时候，Yeoman 的 LiveReload 监视进程会自动编译源文件并刷新浏览器，而不需要你手动执行；
• 自动校验脚本——脚本会自动运行 jshint 校验，以确保他们遵循语言的最佳实践；
• 内建预览服务器——不需要启动自己的 HTTP 服务器，内置的服务器用一条命令就可以启动；
• 高效的图像优化——Yeoman 使用 OptPNG 和 JPEGTran 对所有图像做了优化，提供页面加载速度；
• 生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单，你只需要构建项目就好；
• 杀手级的构建过程——Yeoman 为你自动化完成了大部分的工作，帮助你节省大量时间和精力；
• 集成包管理——你可以通过命令行轻松地查找新的包，安装并保持更新，而不需要你打开浏览器；
• 支持ES6模块语法——可以使用最新的ECMAScript 6模块语法来编写模块，不过还是一种实验性的特性，它会被转换成ES5；
• PhantomJS单元测试——使用PhantomJS轻松运行单元测试。创建新的应用程序的时候，它还会为你自动创建测试框架；

 

15.TypeCast

TypeCast让你可以从Fonts.com、TypeKit、FontDeck和Google这些字体供应和商选择字体，而且能非常方便的比较这些字体使用效果。如果你想获得用户对这些字体效果的反馈，只需要发布一个URL就可以了。这样，无需实际购买的字体，直到你已经决定在最终的解决方案。

由于网页字体的巨大飞跃，排版正在成为网页设计师工作中一项越来越重要的内容。但是，实际的情况是数以千计的字体让设计师需要花大量的时间和精力去选择，而 TypeCast 正是为了解决这个问题的。

16.Gridset

Gridset让你可以非常轻松的添加列，定义比例和设置间隔，而不用考虑背后的数学计算。

网格系统正逐渐成为网页设计的焦点，和印刷排版有点类似，但是要复杂很多。网页的网格系统需要更加灵活，更加响应性。但是网格系统的计划和规划是件困难的事情，Gridset可以让你轻松的使用网格系统。

17.Microsoft WebMatrix 2

WebMatrix是一个全新的Web开发平台，区别于现有的开发平台，WebMatrix的特点是一站式和简化的开发过程，提供一种简单、一体化的建站方案。

它提供了网站所需的所有工具：Web Server、数据库、Web框架和开发环境。其主要组件包括了轻量级Web serve IIS Developer Express；轻量级基于文件的数据库SQL Server Compact Edition；轻量级开发环境ASP.NET “Razor”。

18.Trello

Trello是由著名的软件工程师Joel Spolsky开发的一个团队协作平台，在今年的TechCrunch Disrupt大会上正式发布。运行和管理一家公司，最困难的事情莫过于追踪大家的工作状况，因此他开发了Trello 来解决这个难题。任何行业中的任何人都可以使用Trello团队工作系统。

其他的项目管理系统都是以开发者为中心的，过于复杂，对普通用户缺乏吸引力，Trello则为各种流程设计，既可以当做公司的协作工具，也可以当做个人的列表管理工具。

19.Firefox 18

Firefox拥有众多强大的开发工具插件，成为Web开发人员必备可少的调试工具，从Firefox 18开始，Mozilla将正式开启开发长达1年之久的的新一代JavaScript引擎——IonMonkey，不仅能大幅提高Firefox的JavaScript性能，还能提高浏览器的安全性及其他性能。

最新版本增加对于OSX 10.7+ 超高分屏和和WebRTC的支持；使用了新的HTML拉伸算法，提高了图片质量；实现了CSS3 Flexbox；实现 W3C 标准的触摸实现，替代了MozTouch实现；实现新的DOM属性Window.devicePixelRatio；通过智能化处理签名扩展的认证来提高启动速度。

20.Photon

Photon是一个非常有趣的项目，为立体空间中的DOM元素添加光照效果的JavaScript库，结和CSS3变换（Transform）实现。

作者Tom Giannattasio提供了三个例子，包括一个非常好的纸鹤的效果展示，你可以移动鼠标进行旋转，下面提供的Photon效果切换按钮可以让你体验两种状态下的差异。