怎樣選擇前端框架

怎樣選擇前端框架

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

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

介紹

Hello，開發朋友們！

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

但不要懼怕！

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

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

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

我本身使用它嗎？

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

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

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

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

我應該怎樣開始?

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

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

   同時，考慮一些其餘的例子，好比 BOT 、 Elm Architecture 或者 re-frame 或者 CycleJS

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知道這些的，可是不論如何，它在過去確實是痛點。

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

   這些框架讓不少web開發者合做，它們會幫助你處理基本的佈局和樣式。

   儘管，你能夠考慮構建你本身的解決方案，若是你感受構建很厲害或者但願成爲前端專家，或者你須要爲你的公司構建基本的視覺元素。

   若是是這樣的話，建議你儘快使用方法論(BEM, OOCSS)，它們能夠幫助你節約時間。

   我我的比較喜歡 BEM 命名方式和基本工做流，你可以從 styleguide for Brainly.com找到一些能夠幫助你的靈感。

   若是你不構建基本的組成，建議看一看 HTML5 Boilerplate

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(babel兼容)

   這會讓你的生活簡單一些。

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

   考慮 typescript

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

   你能夠從簡單ES6庫開始，好比 lo-dash 或者 ramda。

   這裏有一些教程和書來幫助你開始美好的旅行。

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

   試試 elm ，很酷的！

5. 你是否可以全棧？

   試試 clojurescript，很酷很酷的

6. 你喜歡沙拉嗎？

   試試scalaJS

7. 你知道Haskell嗎?

   試試 purescript，真的很酷

8. 想要更多瘋狂的？

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

框架列表

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

   沒有時間作更復雜的工做？

   試試 angular. start looking for help imediately

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

   是否能在將來修復一些問題？

   試試 angular. 一些問題

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

   試試 angular. 尋找一些前端開發者

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

   試試 ampersand/backbone

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

   把 marionette/chaplin添加到你的backbone裏面去，另外能夠考慮 Reackjs

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

   試試mithril/knockout/aurelia+

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

   試試 ReactJS＋Redux＋ImmutableJS+

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

   使用 reactive streams(bacon, rxJS) 或者試試 Cycle.js(實驗性)

   注意1: add streams any會是很好的選擇，能夠推薦別人使用。

   注意2: 請不要拒絕使用 FRP的reactive streams

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

   你的應用會愈來愈大？

   你計劃擴充你的團隊？

   你有時間學習新東西？

   建議花時間學習 EmberJS，他將會是很好的投資!

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

    你的應用有表格，圖例，或者其餘分析功能？你在構建企業應用？

    試試 ExtJS

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

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

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

    適應他們的選擇。

    嘗試angular，這將不會形成多大麻煩，讓其餘人獲得他們想要的。

    注意：若是別人付費，請不要改變客戶的需求

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

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

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

    花兩週時間來試驗特定的需求（ionic, famous, Sencha 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，謝謝！
原文連接地址：怎樣選擇前端框架