前端架構技術選型？

01-15

跪求大牛指導，最近公司在做前端技術選型。
我們做的是一個軟體平台，平台上有一堆的系統，用戶可以根據這些系統來開發他們的自己的系統。
前端這邊初步想法是準備做一個前端library，會有許多組件, 由angularjs或者react+fluid實現，
然後npm scripts做auto build和test, 放到npm或bower上，平台上的系統可以通過bower或者npm來用我們的library。
有幾個問題。

1、是否有必要一個頁面一切可視化的都封裝成組件，放到我們library裡面。
都封裝成組件的好處就是，用戶不用操心底層的實現，以後如果前端的渲染由angularjs換成react+fluid也完全是library的事情，和系統沒關係。
不完全分裝的話，用戶就得寫編寫維護他們自己的angularjs了。
2、angularjs還是react+fluid, 現在用angularjs的挺多的，例子也挺多的，感覺較成熟，react近期趨勢不錯，可是是否成熟，以後的趨勢是否能夠保持
3、是否有必要做前端test，以前的項目用到了karma+mocha+sinon+chai, 感覺有了前端test後，確實比不加test好多了，提交代碼也更自信了。
4、typescript和coffeescript，或者babel是否有必要使用，是的話，選哪個？
5、html/css/js是否有必要定規範
6、library是angularjs的directive插件方式還是將angularjs包一層。
像例如：
// Foo.Grid是我們Library的一個組件

Foo.create("Foo.Grid", {
url: "dataurl", // data or reset service url
name: "Grid Title", // Grid title
columns: [{
name: "Column name 1", // Coloumn display name
id: "c1",
type: "number" //Column type
}, {
name: "Column name 2",
id: "c2",

type: "text"
}],
editable: true, // editable or not, if editable add operation column
filter: true, // filterable or not, if filterable add filter bar
sortable: true, // sortable or not
renderTo: "navBar" // the position of the grid
}
)
這是包一層的例子，這樣的話，系統用戶不用寫angular或者react了。
另一種方式是使用angularjs的directive做成angularjs的directive插件，這樣的話就要求用戶一定要懂angularjs，感覺以後做技術遷移比較麻煩.

先謝謝啦。

瀉藥，我沒膽子答這個問題。。。

我現在公司的技術選型基本算是失敗。。。

說下問題所在吧，血的教訓供你參考～

我們是一個電商系統，包括供應商系統、內部管理系統、門戶三大塊。

供應商系統和內部管理系統用angular加指令形式，沒出什麼大問題。

門戶因為要做服務端渲染，所以多方對比之後選了react加webpack加typescript的方案。

由於三個平台間的組件是互通的，所以就決定用react寫組件，其他平台用angular調用react組件。

一切設想都是美好的，測試，文檔，工作流，種子工程都優化了又優化，準備了一個多月，組件累積了十幾個了。

開始幹活。

然後就出現坑了。

1. 一切皆組件對前端人員要求相對高一些，如果你的團隊大部分人是15k以下的水平，那麼估計沒人能維護這麼多的組件。如果你自己維護，那麼就別想做其他事情了。

2. react跟angular結合使用也需要比較成熟的前端，才能做得比較合理。

3. 開發進度嚴重偏慢（相對於純angular）

4. 團隊成員初期抵觸心較強，很消磨耐性。

5. 還沒開始，我就砍掉了typescript。初級前端理解interface，結構，泛型這類的東西並不容易，且沒耐性。

6. 項目進度原因，無法review，就無法保證代碼規範性，用了框架還引入了一大堆第三方。

7. 由於前端人員水平參差不齊，根據基礎組件庫開發的業務組件簡直慘不忍睹，維護起來又是很大一筆成本開銷。

。。。。。。

所以，要搞這些之前，首先要正確評估下團隊的接受能力，其他都是其他。

回答題主的問題：建議react，一切組件化的情況下react的jsx真的是個很不錯的東西。

挺麻煩的一套系統，提點一家之言。

推薦用React，因為組件是他最核心的理念而你的這個複雜的系統應該用組件來

1、是否有必要一個頁面一切可視化的都封裝成組件，放到我們library裡面。
都封裝成組件的好處就是，用戶不用操心底層的實現，以後如果前端的渲染由angularjs換成react+fluid也完全是library的事情，和系統沒關係。
不完全分裝的話，用戶就得寫編寫維護他們自己的angularjs了。

要封裝成組件，並且有組件庫，並且組件API要小。可以看看螞蟻金服的組件庫 http://ant.design/ 如果你們人多，可以做成這個樣子

2、angularjs還是react+fluid, 現在用angularjs的挺多的，例子也挺多的，感覺較成熟，react近期趨勢不錯，可是是否成熟，以後的趨勢是否能夠保持

因為組件是你的核心理念，所以個人推薦React

3、是否有必要做前端test，以前的項目用到了karma+mocha+sinon+chai, 感覺有了前端test後，確實比不加test好多了，提交代碼也更自信了。

肯定要

4、typescript和coffeescript，或者babel是否有必要使用，是的話，選哪個？

推薦Babel，只加上ES2015， ES2016和JSX。個人不建議用實驗性的功能。

5、html/css/js是否有必要定規範

推薦Airbnb的GitHub - airbnb/javascript: JavaScript Style Guide

推薦CSS用Methodology / BEM. Block, Element, Modifier / BEM，很難堅持下去，但是至少往這個方向走，BEM和組件配合起來很好

6、library是angularjs的directive插件方式還是將angularjs包一層。

個人認為這個是最重要的決定，個人喜歡組件，因為容易理解，容易復用。

先說結論：適合自己（團隊）的技術棧才是好技術棧。

至於用什麼框架什麼技術其實反而顯得不是那麼重要了。不過說回來，2016年必然是React技術火爆的一年，有精力並且有興趣的可以關注一下，可以從一個小的starter項目開始，逐步打造出一套自己的技術棧。

這裡有一些不錯的react starter項目，大小都有，按喜好各取所需吧！

Awesome-react-boilerplate by jiji262

React全家桶：石墨文檔大前端技術選型分享 - SDK.CN - 中國領先的開發者服務平台

我們現在也在做一整套的前端組件化方案

整套方案大致是基於 react的組件化封裝，然後通過私有的 npm倉庫來進行組件的管理

整個構件方案是基於webpack做的封裝，然後在組件層去做基礎層的組件和業務層組件的分類

現在看起來，react 天生在做組件化上還是很有優勢的。