一下是關於每個工具上榜的理由，一些眾所周知的理由這里就不重復了。
基礎庫：React
- 組件化的UI方便開發，測試以及管理
- JSX的語法能夠在寫html的時候最大程度上利用JS的優勢
- 強大的開發community
- 擺脫了繁瑣的two-way-binding
- 方便的server side rendering
架構：Redux
- 目前為止公認最好的flux implementation
- 語法簡潔
- 豐富的文章，教程以及第三方工具(thunk, logger, dev-tool等等)
- Middleware大贊
語言：ES6/Babel
- ES6的時代正在來臨，跟上節奏
- 前端的職位基本都已經把ES6放在了基本要求里
- 跟ES5相比有很多好用的新東西
格式：ESLint/AirBnb
半強制的讓你寫出所謂優雅的代碼哈哈，沒什么好說的，硅谷各大小公司前端通用規范
包管理：npm
沒什么好說的，基本沒有競爭者。這里有一點要強調下：請好好利用npm script
打包：webpack
- 組件化的管理
- 基本上可以load所有東西
- 只load你需要的東西
- 大規模項目必備，誰用誰知道
關於組件化管理：比如一個button組件，文件結構如下：
-- src
-- components
-- Button
-- index.js
-- index.css
index.js和index.css只包含關於這個button的東西.
index.js
import './index.css';
...
...
render() {
return (
<button className='app-button'>Click me</button>
);
}
index.css
.app-button {
color: black;
}
測試：Mocha + Chai + Sinon
沒什么好說的，基本已成為行業標准
服務器：Sails.js
- MVC + Realtime
- 強大的預設和擴展性
- REST API自動生成
- 任務流水線
注意：Sail.js自帶的ORM是waterline，自帶的任務運行和打包工具是grunt。如果有需求的話自己花一兩天研究下可以改成bookshelf和webpack.
http/https請求: fetch
- Firefox和chrome原生API，現在請用isomorphic-fetch來獲得所有瀏覽器的支持
- 前后端通用
- Promise
ORM：bookshelf
后台與數據庫交互的必備神器
Promise：Bluebird
如果你不想被callback搞得生活不能自理：
function isUserTooYoung(id, callback) {
openDatabase(function(db) {
getCollection(db, 'users', function(col) {
find(col, {'id': id},function(result) {
result.filter(function(user) {
callback(user.age < cutoffAge)
})
})
})
})
}
請用promise:
function isUserTooYoung(id) {
return openDatabase(db)
.then(getCollection)
.then(find.bind(null, {'id': id}))
.then(function(user) {
return user.age < cutoffAge;
});
}
桌面應用：Electron
沒什么好說的，這些軟件都是用前端的技術和Electron寫出來的:
其他: Lodash
（此處我在英文版里寫的是utilities, 不知道中文到底應該翻成什么。。）
必備Lodash，除此之外貌似沒有這么剛需的
最后想講的是，需求驅使技術，技術提升需求。可以為了練習用這個東西來用這個東西，但是絕對不要為了用這個東西而用這個東西。永遠把你的需求擺在第一位。對於連需求都沒有的朋友們，希望先找到你們的需求。
- 我是新手，我現在的目標是學習javascript - 那就先別考慮什么react/meteor/vue
- 我需要做一個單頁面應用 - 那就別把時間花在redux上，react自帶的state可以滿足你的所有需求
- 我的web app需要一個數據庫，但是我從來沒用過也不了解數據庫 - 那就網上花半小時看看mongoose，別糾結那些mysql語法什么的
來源：
http://zhuanlan.zhihu.com/haochuan/20639855