前端的一大特點(diǎn)和一大難點(diǎn)，就是跟上時(shí)俱進(jìn)的各種技術(shù)和庫的發(fā)展。無論你是不知道到底學(xué)React好還是Angular好的初學(xué)者，還是總是在糾結(jié)Grunt還是Gulp的老鳥，總是會(huì)面臨這樣那樣的各種在前端領(lǐng)域中的選擇。以下文字是本人關(guān)于現(xiàn)在在工作以及自己項(xiàng)目中最喜歡用的最順手也覺得是目前來說最有前途的前端開發(fā)工具，希望能對(duì)相關(guān)的朋友們有所幫助。
您還可以在這些地方找到我：
一下是關(guān)于每個(gè)工具上榜的理由，一些眾所周知的理由這里就不重復(fù)了。
基礎(chǔ)庫：React
- 組件化的UI方便開發(fā)，測試以及管理
- JSX的語法能夠在寫html的時(shí)候最大程度上利用JS的優(yōu)勢
- 強(qiáng)大的開發(fā)comminity
- 擺脫了繁瑣的two-way-binding
- 方便的server side rendering
架構(gòu)：Redux
- 目前為止公認(rèn)最好的flux implementation
- 語法簡潔
- 豐富的文章，教程以及第三方工具(thunk, logger, dev-tool等等)
- Middleware大贊
語言：ES6/Babel
- ES6的時(shí)代正在來臨，跟上節(jié)奏
- 前端的職位基本都已經(jīng)把ES6放在了基本要求里
- 跟ES5相比有很多好用的新東西
格式：ESLint/AirBnb
半強(qiáng)制的讓你寫出所謂優(yōu)雅的代碼哈哈，沒什么好說的，硅谷各大小公司前端通用規(guī)范
包管理：npm
沒什么好說的，基本沒有競爭者。這里有一點(diǎn)要強(qiáng)調(diào)下：請(qǐng)好好利用npm script
打包：webpack
- 組件化的管理
- 基本上可以load所有東西
- 只load你需要的東西
- 大規(guī)模項(xiàng)目必備，誰用誰知道
關(guān)于組件化管理：比如一個(gè)button組件，文件結(jié)構(gòu)如下：
index.js和index.css只包含關(guān)于這個(gè)button的東西.
index.js
import './index.css';
...
...
render() {
return (
<button className='app-button'>Click me</button>
);
}
index.css
.app-button {
color: black;
}
測試：Mocha + Chai + Sinon
沒什么好說的，基本已成為行業(yè)標(biāo)準(zhǔn)
服務(wù)器：Sails.js
- MVC + Realtime
- 強(qiáng)大的預(yù)設(shè)和擴(kuò)展性
- REST API自動(dòng)生成
- 任務(wù)流水線
注意：Sail.js自帶的ORM是waterline，自帶的任務(wù)運(yùn)行和打包工具是grunt。如果有需求的話自己花一兩天研究下可以改成bookshelf和webpack
http/https請(qǐng)求: fetch
- Firefox和chrome原生API，現(xiàn)在請(qǐng)用isomorphic-fetch來獲得所有瀏覽器的支持
- 前后端通用
- Promise
ORM：bookshelf
后臺(tái)與數(shù)據(jù)庫交互的必備神器
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)
})
})
})
})
}
請(qǐng)用promise
function isUserTooYoung(id) {
return openDatabase(db)
.then(getCollection)
.then(find.bind(null, {'id': id}))
.then(function(user) {
return user.age < cutoffAge;
});
}
桌面應(yīng)用：Electron
沒什么好說的，這些軟件都是用前端的技術(shù)和Electron寫出來的
其他（此處我在英文版里寫的是utilities, 不知道中文到底應(yīng)該翻成什么。。）
必備Lodash，除此之外貌似沒有這么剛需的
最后想講的是，需求驅(qū)使技術(shù)，技術(shù)提升需求?？梢詾榱司毩?xí)用這個(gè)東西來用這個(gè)東西，但是絕對(duì)不要為了用這個(gè)東西而用這個(gè)東西。永遠(yuǎn)把你的需求擺在第一位。對(duì)于連需求都沒有的朋友們，希望先找到你們的需求。
我是新手，我現(xiàn)在的目標(biāo)是學(xué)習(xí)javascript - 那就先別考慮什么react/meteor/vue
我需要做一個(gè)單頁面應(yīng)用 - 那就別把時(shí)間花在redux上，react自帶的state可以滿足你的所有需求
我的web app需要一個(gè)數(shù)據(jù)庫，但是我從來沒用過也不了解數(shù)據(jù)庫 - 那就網(wǎng)上花半小時(shí)看看mongoose，別糾結(jié)那些mysql語法什么的
