2016 Web开发资源工具大搜罗

来源于：https://zhuanlan.zhihu.com/p/22730771

作者：余博伦
链接：https://zhuanlan.zhihu.com/p/22730771
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Web的迅猛发展对于开发者来说既是一件好事也是一件坏事。不断紧跟潮流学习新的技术、编程语言、适应变化听起来就很令人兴奋又紧张。你需要面对的挑战可能包括使用已有的框架适应新的业务需求，测试网站的兼容性，优化你的网站前端和后端更好地协同。今天在这里介绍给大家的这个收集列表也许能够帮助你完成类似的工作。

P.S. 顺序先后并不代表推荐排名。

JavaScript 库/框架

JavaScript是全世界最受欢迎的Web编程语言。人们为了快捷开发网站或应用预先编写一些JS类库。你可以通过一些公用CDN很方便地在自己的网站上引入这些库：

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

• jQuery: 方便快捷，功能强大全面，居家旅行必备，近乎JS的替代品，你可以不会js，但是不能不会jQuery。
• BackBoneJS: 模型、视图、集合、事件，让你的前端代码更有框架感。
• D3.js: 数据可视化必学必会，只有你想不出来的，没有D3画不出来的。
• React: 学会React，再学学React-native，你就能从一个前端化身Web app工程师、IOS/Andorid开发者、桌面应用工程师……
• jQuery UI: 几行代码就能写一个带动画带ajax的Web应用。
• jQuery Mobile: 移动端专用js开发框架，和上面的类似袄。
• Underscore.js: 非入侵式框架，提供了众多有用的函数方法，弥补jQuery的不足。
• Moment.js: 原生的JS显示输出日期时间真的很痛苦，Moment为你解决了一切啦～
• Lodash: 模块化且高效，lodash和underscore很相似。

前端框架

• Bootstrap: 全世界最流行的响应式前端框架。
• Foundation: 提供了很多模版，针对网站、移动端、邮件提供了很多好用的模块和样式。
• Semantic UI: 个人非常喜欢的一个前端框架，样式非常好看，更重要的是就像它语义UI的名称一样，类命名特别友好，写网页就像和人说话一样。
• uikit: 漂亮、可定制，即将发布uikit3版本，感兴趣可以试试看。

Web应用框架

• Ruby on Rails: Ruby on Rails 是一款用ruby语言编写Web应用的MVC框架，github就是用它写的袄！
• AngularJS: Google主导的Web开发框架，数据绑定、MVVM，很可惜被后来更灵活的React、Vue等框架抢去了风头。
• Ember.js: 用来开发单页Web应用的JS前端MVC框架。
• Express: Node.js上的Web框架，搭建网站或API服务只要一秒钟！
• Meteor: JS全端框架，是的，你只需要学习JavaScript一门语言，就可以完成Web应用前后端、数据库的开发。
• Django: Python的Web框架，人生苦短，请用Python.
• Flask: Python的Web框架，据说只要学好flask就能随意找到好工作？
• ASP.net: 老一辈人的最爱。
• Laravel: 最优雅性感的PHP Web框架，好用到不能再好用，优雅到不能再优雅，毕竟PHP是全世界最好的语言嘛。
• Phalcon: 用C语言扩展的，据说是最快的PHP框架。

自动化构建/包管理

• Grunt: JavaScript自动化工具。
• Gulp: 个人感觉是最好用的自动化构建工具。
• webpack：模块化加载构建一切，CSS/JS连图片都可以
• npm: NPM虽好，不要太依赖袄。
• Bower: 前端框架包管理工具，各类框架和库一键安装。

编程语言

• PHP: 全世界最好的语言不解释。
• NodeJS: 可以运行在服务器端的JS，只需学习一门语言即可全栈编程。
• Javascript: 日益强大的脚本语言，现如今学前端基本就是学JS编程。
• HTML5: 网页的标记语言。
• Python: 人生苦短，请用Python。比好用更好用。
• Ruby: 简洁高效，学Ruby基本就是为了学用rails
• Scala: 兼容函数式、面向对象、命令式编程，可以和JAVA互通。
• CSS3: 网页的样式。
• SQL: 操作数据库必学。
• Golang: Google出品，简单易用。
• Rust: 高效高性能，保证线程安全，防止声明错误。
• Elixir: 开发扩展可持续的应用的动态函数式语言。

数据库

• MySQL: 开源免费性能好，全世界都在用它。
• MariaDB: 日趋流行起来，同样由MySQL的开发者创造的数据库。
• MongoDB: 非关数据库，通常在MEAN/MERN架构中使用。
• Redis: 提升应用数据访问性能，内存读写并可持久化储存的数据库。
• PostgreSQL: 功能强大完整，兼容数据类型丰富，并且开源免费。

CSS预处理器

• Sass: CSS的扩展，可以声明变量，引入模块，嵌套属性等等。
• Less: 为CSS添加声明变量，样式模块，命名空间，继承等特性。
• Stylus: 写CSS再也不用写烦人的括号啦～

代码编辑器

• Atom: Github的发明，基于Web技术开发，漂亮又好用。
• Sublime Text: 最性感的代码编辑器，你会因为爱上一款编辑器而爱上写代码。
• Notepad++: Win平台下开源好用的代码编辑器，不需要装什么插件就已经很棒啦。
• Visual Studio Code: 很多人也推荐并且喜欢用VS Code这款微软出品的编辑器袄。
• TextMate: OSX上的一款比较火的编辑器。
• Coda 2: OSX平台，你可以在这款编辑器里写代码、连接远程FTP/SSH/数据库，还能查询手册，代码方法快捷查询等等，一款编辑器满足你写网站的所有需求。
• WebStorm: JS开发利器。
• Vim: Vim是编辑器里神一般的存在。
• Brackets: Adobe公司出品的一款编辑器，预览功能很不错。
• Emacs: 也有很多人喜欢支持Emacs啦。

Markdown编辑器

• StackEdit: 一款在线Markdown编辑器。
• Dillinger: 同上。
• Mou: Mac上一款非常棒的Markdown编辑器，不过据说作者重酬之后携款跑路了？
• ulysses: 很棒的一款Markdown写作软件，可以生成为任何格式。

图标库

• Font Awesome: 全世界最流行的图标库。
• IconMonster: 在线免费图标库。
• Icons8
• IconFinder
• Fontello

版本管理应用

• SourceTree: 最好用的Git图形化客户端。
• GitKraken (Beta): 一款免费好用的全平台Git客户端。
• Tower 2: 界面很好看。
• GitHub Client: Github官方桌面客户端。
• Gogs: Go语言开发的可以自主搭建的开源托管平台。
• GitLab: 免费的私有项目Git托管。

本地开发环境

• XAMPP: 免费的 MariaDB, PHP, and Perl软件集合安装包。
• MAMP: 提供Mac上PHP开发运行环境。
• WampServer: Windows 下最好用的包含 Apache2, PHP MySQL 的开发运行环境。
• Vagrant: 虚拟机软件。
• Laragon: 喜欢Laravel的话，用这个最棒咯。

代码差异检查

• Diffchecker: 一款在线的检查代码异同的小工具。
• Beyond Compare: 检查代码修改差异的软件。

在线编程

• JS Bin: 在线编写并运行HTML/CSS/JS网页代码。
• JSfiddle: 同上。
• codeshare: 实时和其他开发者共享你的代码。
• Dabblet: 交互测试HTML/CSS代码。
• Cloud9: 一键创建在线开发环境，完整的服务器操作命令行，代码在线编辑，项目在线运行，还可以分享链接给他人预览，最重要的当然还是免费不要钱啦。

协作工具

• Slack: 团队通信应用。
• Teambition: 号称最好用的团队协作工具。
• Worktile: 一站式企业协同管理平台.

交流社区

• CodePen: 在线分享编写你的前端代码，推荐袄！
• Dribble: 设计师分享社区，灵感的源泉。

Web性能测试

• Website Speed Test: 网站载入速度测试。
• Google PageSpeed Insights: PageSpeed 是谷歌的网页测试工具，通过检测评分给你优化建议。
• Google Chrome DevTools: 谷歌开发者工具。
• WebPageTest: 模拟从世界各地载入你网页的检测工具。
• Pingdom
• GTmetrix

Web开发社区

• 掘金： 高质量的技术社区，国内算是最好的了。
• Stack Overflow
• Front-end Front
• Hashnode
• Refind
• Google+ Web Developers Group
• Google+ Web Developers Group
• Facebook WordPress Front-end Developers Group
• LinkedIn Web Design and Development Professionals Group
• LinkedIn Web Site Development Group
• LinkedIn PHP Developer Group
• LinkedIn WordPress Developers Group
• Webdeveloper.com
• Sitepoint Forums
• /r/perfmatters
• /r/webdev

「好好学习，天天向上」