怎樣選擇前端框架

怎樣選擇前端框架

怎樣選擇適合本身的前端框架，並在高產但參差不齊的前端社區中保持理性

翻譯自：http://fse.guru/

介紹

Hello，開發朋友們！

下面你將看到一些比較主觀的工具和框架。

但不要懼怕！

你能夠選擇任何你所熟悉的，或者忽略他們直接用你本身喜歡的就行了。

本文但願幫助你瞭解前端社區中海量的工具。

固然，這些只是一些可選的列表，當你須要作出選擇的時候幫助你抉擇。

我本身使用它嗎？

是的，當我須要開始項目的時候，我用它來做爲提醒。

同時，每當有人問「我該使用什麼框架呢？」的時候，我就會把這篇文章給他看。

由於，正如你明白的，事情沒有絕對的對與錯，可是有一些優質的框架可以幫助作出咱們更好的選擇。

另外，我也會不時的更新本文，由於有時候當我學習更多後也會改變當初的想法。

我應該怎樣開始?

若是你的項目不是很小，你應該須要下面幾件事：

1. 項目模塊化 我我的比較喜歡 Component-based architecture，由於他適用於 various-frameworks

   同時，考慮一些其餘的例子，好比 [BOT](http://www.chris-granger.com/2013/01/24/the-ide-as-data/) 、 [Elm Architecture](https://github.com/evancz/elm-architecture-tutorial/) 或者 [re-frame](https://github.com/Day8/re-frame) 或者 [CycleJS](http://cycle.js.org/)

2. 模塊加載器(RequireJS，Browserify, Webpack, ComponentJS, SystemJS)

   這些東西可以幫助咱們保持Javascript(或者components)彼此獨立和可維護。

3. 包管理器(npm, jspm, bower)

   我我的一直比較喜歡 npm ，彷佛他是javascript和nodejs真正的標準。另外我會考慮bower來作補足，由於他是一個很好的下載靜態資源的工具，但它在管理組件和依賴又不如npm強大。

4. 自動部署/編譯/構建流水線(grunt/gulp/brunch/broccoli)

   由於，若是一直作重複的事情的話生命是很短暫的。

5. CSS預處理(jss/stylus/sass/css-modules)和 postprocessors(css0, autoprefixer, postcss)

   這些工具使css更美好，去除了一些瀏覽器兼容的問題。是的，我是從2015知道這些的，可是不論如何，它在過去[確實是痛點](http://caniuse.com/#search=svg)。

6. 構建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

   這些框架讓不少web開發者合做，它們會幫助你處理基本的佈局和樣式。
   
   儘管，你能夠考慮構建你本身的[解決方案](http://styleguides.io/)，若是你感受構建很厲害或者但願成爲前端專家，或者你須要爲你的公司構建基本的[視覺元素](https://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide)。
   
   若是是這樣的話，建議你儘快使用方法論([BEM](https://en.bem.info/), [OOCSS](http://oocss.org/))，它們能夠幫助你節約時間。
   
   我我的比較喜歡 BEM 命名方式和基本工做流，你可以從 [styleguide for Brainly.com](https://github.com/brainly/style-guide#methodology)找到一些能夠幫助你的靈感。
   
   若是你不構建基本的組成，建議看一看 [HTML5 Boilerplate](https://html5boilerplate.com/)

7. 測試工具(jasmine, karma, mocha, tape, itern)

   任何人都須要測試，沒有例外的。

8. 代碼質量監控工具(eslint, husky, editorconfig)

9. 能夠獲取幫助的社區(chats, IRC, meetups, twitter)

好了，下一步呢？

在選擇你的工具前有一些值得思考的問題須要解決。

準備好了嗎？

1. 我須要和其餘人合做嗎？他們是誰？他們想要什麼？

   這個問題會幫助你選擇語言和工做流，這對你和你的夥伴都有幫助。

2. 我最關注什麼？質量，開發速度，仍是可維護性？

   這樣你能夠決定是否試驗一些新工具，以及是否能承擔失敗的風險。

3. 是否須要開放給第三方？

   面向的團隊不一樣可能會限制咱們語言的選擇。

4. 我是否在處理核心的項目

   若是你處理核心項目，請最好選擇高穩定性的語言和框架，這更安全，讓你睡得更好。

5. 是一個可交互的app仍是基本的文檔頁面。

   結果極可能是你僅僅須要基本的HTML ＋CSS ＋ tools，或者靜態網站生成器或者CMS。

6. 這是一個單一的項目仍是其餘項目的相關項目？

   即便你有一系列項目，你也應該用一些組件和樣式引導，這些有不錯的文檔。

直接減小代碼重用，保持一致性。

另外，考慮SEO，和服務端渲染。

語言列表

當你回答完上面這些問題後，就能夠和你的隊友聊聊，而後選擇一個語言了。

由於這裏有不少的東西，而不是糟糕的Javascript，你能夠選擇

1. 是否有js開發團隊

   考慮[ES6](https://gist.github.com/getify/7ae82fdc2e86bf66bcba#file-gistfile1-md)([babel](https://babeljs.io/)兼容)
   
   這會讓你的生活簡單一些。

2. 你是否偏心typed語言？開發typed是否能夠？

   考慮 [typescript](http://www.typescriptlang.org/)

3. 函數式編程是否接受？

   你能夠從簡單ES6庫開始，好比 [lo-dash](https://lodash.com/) 或者 [ramda](http://ramdajs.com/docs/)。
   
   這裏有一些[教程](http://reactivex.io/learnrx/)和[書](https://leanpub.com/javascript-allonge)來[幫助你](https://github.com/MostlyAdequate/mostly-adequate-guide)開始美好的旅行。

4. 你是否嘗試過函數式編程，想要更好的東西？

   試試 [elm](http://elm-lang.org/) ，很酷的！

5. 你是否可以全棧？

   試試 [clojurescript](https://github.com/clojure/clojurescript)，很酷很酷的

6. 你喜歡沙拉嗎？

   試試[scalaJS](http://www.scala-js.org/)

7. 你知道Haskell嗎?

   試試 [purescript](http://www.purescript.org/)，真的很酷

8. 想要更多瘋狂的？

   這裏有一個能夠編譯成javascript的語言列表，選一個而後享受吧。

框架列表

1. 你僅僅須要基本的可運行的app？

   沒有時間作更復雜的工做？
   
   試試 [angular](https://angularjs.org/). [start looking for help imediately](http://www.fse.guru/2-years-with-angular)

2. 你是否常常須要快速的原型開發？

   是否能在將來修復一些問題？
    
    試試 [angular](https://angularjs.org/). 一些[問題](http://www.fse.guru/2-years-with-angular)

3. 你是嘗試前端開發的後端？

   試試 [angular](https://angularjs.org/). 尋找一些[前端開發者](http://www.fse.guru/2-years-with-angular)

4. 你是否須要很快的進行開發和構建，可是同時會丟失一些特色？

   試試  [ampersand](http://ampersandjs.com/)/[backbone](http://backbonejs.org/+)

5. 一樣的技術選型，怎樣從中型到大型？

   把 [marionette](http://marionettejs.com/)/[chaplin](http://chaplinjs.org/)添加到你的backbone裏面去，另外能夠考慮 [Reackjs](https://facebook.github.io/react/)

6. 你是否有一些時間來實驗，同時獲得很大的性能提高？

   試試[mithril](http://mithril.js.org/)/[knockout](http://knockoutjs.com/)/[aurelia](http://aurelia.io/)+

7. 你是否有不錯的前端實驗精神，對函數式編程熟悉？

   試試 [ReactJS](https://facebook.github.io/react/)＋[Redux](https://github.com/rackt/redux)＋[ImmutableJS](https://facebook.github.io/immutable-js/)+

8. 更多函數式編程技巧？或者偏好交互性強的應用？

   使用 reactive streams([bacon](https://baconjs.github.io/), [rxJS](http://reactivex.io/)) 或者試試 [Cycle.js](http://cycle.js.org/)(實驗性) 
   
   注意1:  [add streams](http://www.felienne.com/archives/3724) any會是很好的選擇，能夠推薦別人使用。
   
   注意2: 請不要[拒絕使用 FRP的reactive streams ](https://youtu.be/Agu6jipKfYw?list=PLZlJZzHmx31XvgT96DfbXQ4IMb1ryztbp)

9. 你想要使用嚴格的驗證和通用處理方式？

   你的應用會愈來愈大？
   
   你計劃擴充你的團隊？
   
   你有時間學習新東西？
   
   建議花時間學習 [EmberJS](http://emberjs.com/)，他將會是很好的投資!

10. 你是否須要「類桌面應用」？

你的應用有表格，圖例，或者其餘分析功能？你在構建企業應用？
 
 試試 [ExtJS](http://emberjs.com/)

11. 大家是一個爲其餘開發者提供服務的工做室？

你最好有一個不錯的工具集，另外，同事之間最好有一些公共用例。

12. 你是一個爲他人提供工具的自由開發者？

適應他們的選擇。

 嘗試angular，這將不會形成多大麻煩，讓其餘人獲得他們想要的。
 
 注意：若是別人付費，請不要改變客戶的需求

13. 你正在構建一個有吸引力的產品，它將會不少人使用？

有了明確的需求後咱們就從上面的列表中選擇一個合適的框架。

14. 關於開發什麼樣的應用你有明確的需求（好比10屏的移動應用)

花兩週時間來試驗特定的需求（[ionic](http://ionicframework.com/), [famous](http://famous.org/), [Sencha Touch](https://www.sencha.com/products/touch/))

怎樣開始編碼？

1. 花一些時間閱讀你所選擇框架或者工具的文檔。

2. 在社區裏面詢問一些經驗開發者怎樣算是優秀項目的開端。

3. 準備全部的工具。

4. 極客精神。可是我建議更加工程化一點。

5. ...

6. 成功。

不知道怎麼用我介紹的一些不常見框架？

看看 TodoMVC Examples，找到你選擇的框架。

可是記住，這些項目只是示例，大多數狀況下他們不適合大中型項目。

我不想作決定，告訴我怎麼辦？

好，好，冷靜下來。

若是你不想作決定，你能夠選擇 EmberJS。或者你膽大，能夠嘗試 ReactJS + Redux + ES6 + webpack + npm + jss + autoprefixer + eslint + Elemental UI + karma，讀這篇文章。

我看到了不少關於ReactJS的討論，爲何？

這是web開發的將來。

這裏有一片很好的文章，來解釋這個現象。

同時，不少優秀的開發者在使用它，你能夠找出一些好的項目，這必定很棒，我保證！

若是不是，你能夠任什麼時候候回到這篇文章，在評論裏面留下你的話。

若是你對怎樣成爲一名前端開發師感興趣，能夠看看這裏

原創文章，歡迎轉載。轉載請註明：轉載自Fs21 ' s Home，謝謝！
原文連接地址：怎樣選擇前端框架