本文爲普元軟件產品部前端架構師奚金鑫在雲計算架構設計羣的微課堂分享。如需加入微信羣參與微課堂、架構設計與討論直播，請直接回復此公衆號：「加羣 姓名 公司 職位 微信號」。
你們好，很高興能夠和你們分享「爲何使用React做爲咱們的前端框架」。前端
首先，咱們來看一下普元雲的整體架構圖。node
從圖中能夠看到，在咱們普元雲平臺中，咱們最終選擇了React相關技術棧做爲咱們前端以及終端技術，以服務於業務應用和業務平臺。git
選擇React的緣由，總共七大點：github
1、簡單易學，上手快編程
2、JSX使編程更簡單後端
3、組件化編程方式好處多瀏覽器
4、虛擬Dom技術，使得開發簡單，而頁面性能又好性能優化
5、先後端同構, 搜索引擎更友好前端框架
6、強大的開發工具服務器
7、社區強大
1、簡單易學，上手快
嚴格意義上來講，React並非一個框架，只是一個類庫，它專一於MVC中的V，可是正是因爲這種專一，簡單易學，上手快，學習React，你只需瞭解如何編寫JSX風格的React組件就能夠上手了。
而不像其餘前臺框架較大的學習成本，好比Angular，你要學習做用域，雙向綁定，指令，控制器，模塊，模板，依賴注入等等一系列知識。
（固然，隨着項目的日益龐大，你還能夠靈活選擇本身喜歡或熟悉的第三方類庫，好比Redux來管理數據流，React Router來管理頁面跳轉，經過第三方類庫，你能夠更好的管理React應用。）
從上圖中能夠看到，相比於AngularJS的龐然大物，React能夠稱得上小巧玲瓏。因此，只要你之前有JavaScript的經驗，學習React是至關簡單的。
2、JSX使編程更簡單
舉個例子，咱們有一我的員列表（張3、李4、王5、趙六），需求是：對每一個人員，打出你好+人員姓名。
爲了實現該需求，咱們定義了一個HelloWorld組件，裏面有一個render方法和一個getColor方法。
getColor方法根據姓名返回不一樣的字體顏色。張三是紅色字體，其餘姓名是黑色字體。
render方法裏，經過遍歷屬性names，生成一個h1元素的集合，最終返回一個包含該集合元素的div元素。
初看這種有JavaScript又有HTML混搭的風格，你可能會以爲至關糟糕，由於這徹底打破了多年以來一直推崇的界面(HTML模板)和業務邏輯(JavaScript)相互分離的最佳實踐。
可是咱們真的有必要這麼分麼？分離HTML模板和JavaScript其實只是分離了文件位置，事實上模板和JavaScript代碼二者是緊密耦合的，不少狀況當你改了模板後，你還得改JavaScript代碼，因此這種分離只是技術上的分離而不是本質的分離（It’s a separation of technology, not aseparation of concern）並且模板是須要學習成本的，下降了開發效率。
JSX使用聲明式直觀的定義用戶界面，除了另類的HTML標記以外，並無引入其它任何新的概念。這也就意味着，你不須要學習第三方模板庫，能夠利用熟悉的JavaScript語法去構建界面，你的思惟過程當中其實已經不須要存在模板的概念，須要考慮的僅僅是如何用代碼構建整個界面。
這種天然而直觀的方式使得編程更加簡單而且讓代碼更容易理解。
3、組件化編程方式好處多
向你們分享下咱們在普元雲平臺中是如何使用React作組件化的，以Home頁面爲例。
該頁面就是用戶登陸咱們雲平臺後的首頁。你們能夠看到，其實這個略顯複雜的頁面主要由四部分組成：
1.TopBar
頂層欄包含查看用戶基本信息、登出、搜索等功能
2. SideBar
側邊欄用於快速導航到不一樣業務應用
3. SummaryInfo& Dashboard
中間的歸納和卡片面板主要用於展示當前微服務各階段的缺陷和功能列表，並能夠添加新的缺陷和功能
4. ChartPanel
聊天面板
而對各部分再作進一步細分，實際上是這樣的：
咱們能夠看到，4大塊又細分了子塊，子塊又衍生出了子子塊。這種組件化的開發方式雖然看似繁瑣，但帶來的好處倒是實實在在的。主要有以下好處：
1. 組件職責單一，代碼更易理解，減小重構、維護成本
因爲組件職責單一，高內聚，不會出現之前改了一個組件上的小功能，還要級聯更新其餘依賴組件。
2. 組件之間鬆耦合，代碼更易複用、擴展
在咱們的卡片面板中，設計、開發、測試、預發、生產五種不一樣的卡片容器用的是同一個組件DashboardCardContainer。
而之後若是咱們想在卡片上添加新的功能，好比刪除功能，咱們只需修改DashboardCard組件就能夠了，而不須要修改其餘組件。
3. 各組件可同時交由不一樣開發人員開發，加快開發效率
如聊天面板和卡片面板徹底能夠交由不一樣開發人員開發，二者互不影響。
4. 代碼更易測試，提升代碼質量
在這種細粒度的組件劃分下，各組件之間鬆耦合，方便編寫前端測試代碼，提升代碼測試覆蓋率，保證產品質量。
講了這麼多優勢，結合如今很是流行的微服務，你們是否發現了二者的共同之處？
沒錯，二者一樣擁有職責單1、鬆耦合、快速開發的優點。使用React做爲咱們的前端框架，能夠說和後臺的微服務是一次強強聯手的合做。
下面來看看普元雲平臺上前端組件和後端微服務之間的關係。
咱們能夠清晰的看到，使用到微服務的前端組件和微服務之間基本是1對1的關係，職責單1、鬆耦合，提升了代碼的可讀性、可複用性、可維護性、可擴展性。
4、虛擬Dom技術，使得開發簡單，而頁面性能又好
傳統的頁面開發，或多或少會牽扯到dom操做，而進行dom操做時，就會有相應的各類優化策略來儘量地減小頁面從新佈局和重繪的次數。
好比下面dom批量更新的優化就主要有三種：
1. 使用documentFragment進行dom批量更新，而後一次性更新到document上
2.克隆你將要更新的node，在克隆的node上進行dom批量更新，而後克隆的node和原始的node進行交換
3.先隱藏將要更新的node,而後進行dom批量更新，最後從新顯示隱藏的node
傳統的這種手工的批量更新複雜且易錯，而React的虛擬DOM技術讓咱們遠離了這種複雜，咱們無需再時刻考慮什麼時候以及如何作DOM性能調優。
基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React會產生如下狀況：
1.觸發相應組件render方法
2.從新構建新的虛擬DOM樹
3.將當前新的虛擬DOM樹和上一次的舊樹進行對比
4.獲得DOM結構的區別，計算出最小變化集，進行實際的瀏覽器DOM更新（批量更新）。
儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要因某個數據的變化而考慮如何更新到一個或多個具體的DOM元素，無需再寫額外的代碼來作性能優化，將之徹底交給React類庫來作，而咱們只須要關心在相應數據狀態下如何實現相應組件的render方法便可，使得開發簡單。
那麼使用了虛擬DOM技術的React性能到底如何呢，究竟是徒有虛名仍是貨真價實呢，接下來咱們來看看React和其餘一些流行框架的性能比較。
第一個例子，比較React、jQuery、AngularJS，繪製10000個元素的渲染時間。
咱們能夠看到，在渲染上，React比jQuery快了57%，比Angular快了17%左右.
React版本: 0.13.1
jQuery版本: 2.1.3
Angular版本: 1.3.15
第二個例子，比較React、Knockout、AngularJS，繪製1000個元素的渲染時間。
咱們能夠看到React依然是最快的, 比Angular快了30%，比Knockout快了68%.
React版本: 0.12.1
Knockout版本: 3.2.0
Angular版本: 1.3.3
從這2個例子能夠看出，React的虛擬DOM技術，簡化開發過程的同時，確實又提升了頁面的性能。
5、先後端同構, 搜索引擎更友好
傳統的JavaScript富應用的問題是比較慢，用戶體驗差，同時對搜索引擎不友好。所以，業界開始探索JavaScript的服務器端渲染。
早期的作法，在服務器端根據不一樣技術選擇不一樣的模板進行，如Rails的ERB模板，Java的Mustache、HandleBar、Velocity等等。
而React經過ReactDomServer，一樣一個React組件，如今也能夠用於後臺渲染，達到了真正先後端同構，先後端只要維護一套代碼。在解決SEO的同時，又能夠組件先後端複用，這是其餘不少MVVM框架很難作到的。
6、強大的開發工具
Facebook提供了React Developer Tools以方便開發者頁面調試，包括查看組件的層次結構，實時查看和編輯組件的屬性、狀態等等，大大提升了開發者開發效率。目前已支持Chrome/FireFox。
第一張圖是React.js 2016大會Nick Schrock演講的時候，咱們能夠看到當時Chrome商店裏React開發者工具使用者22萬人。而第二張圖是我5.9號剛剛截的圖，其用戶數量已經迅速躥升到了28萬人，才2個多月的時間，用戶數量增加了6萬，影響力可見不通常。
除了React Developer Tools，另外一個強大的工具就是React Hot Loader。
經過React Hot Loader結合Webpack, 真正實現不用重啓服務器、不用刷新瀏覽器，便可見剛剛修改代碼後的頁面，給予開發者不同凡響的開發體驗，加快開發效率。
7、社區強大
你們能夠看到，React GitHub上4萬1的Star數量，以及將近700人的contributor，以及一眼望不到邊的使用React網站列表，讓咱們感嘆React如此之火的同時，徹底不用擔憂React的將來。
以前講「簡單易學、上手快」的時候提過，其實React並非一個框架，只是一個類庫，它專一於MVC中的V。隨着項目的發展深刻，咱們能夠選擇使用本身喜歡或熟悉的第三方類庫，好比Redux來進行數據流的管理，React Router來進行頁面跳轉。以上列出了部分第三方類庫，包括經常使用組件庫、單向數據流類庫、頁面路由、Ajax類庫、基礎類庫等等。
咱們能夠看到藉助於NPM方便的包管理平臺，React擁有很是強大、豐富的第三方類庫，面對如此龐大的類庫、如此多的選擇，咱們是幸福的，但同時如何選擇也是個難題。
如下是咱們普元雲現今選擇的第三方類庫，僅供你們參考。
好了，這就是本期微課堂的全部內容，按照國際慣例作下總結：
經過七大緣由，詳解了爲何咱們普元雲會選擇React做爲咱們的前端框架，但願你們在作技術選型的時候，能夠有所參考。
附： 各 羣 答 疑
（解答人：普元產品部前端架構師奚金鑫）
Q一、羣友：普元的全部前端組件都是基於bootatrap本身封裝的？
答：如今普元的前端組件大部分使用的是第三方類庫，好比React Bootstrap，從此會本身作封裝，重點是一些複雜的組件，好比圖表、列表等。
Q二、羣友：兩個測試過程當中版本是怎麼選擇的？
答：這兩個例子是直接從github上找的，比較有表明性。應該是當時開發的時候的版本。
Q三、羣友：請問React適合作哪些類型的項目，互聯網類型仍是企業級類型？
答：無論是互聯網仍是企業級，React都是合適的，正是由於它的簡單。
Q四、羣友：React目前存在的不足是什麼？
答：就咱們這幾個月的開發體驗來說，暫時還沒發現有啥不足。可能使用第三方類庫的時候，會有坑要踩，因此建議你們使用成熟的口碑良好的第三方類庫。
Q五、羣友：React的兼容性如何，對瀏覽器有什麼要求嗎？
答：React的兼容性很好，咱們開發的時候初期其實並無特別考慮兼容性問題，最後修改一些小的bug後，IE10+, FireFox, Chrome, Safari, 乃至Mobile端也能夠經過網頁瀏覽。
Q六、羣友：React支持移動應用開發嗎？
答：支持，可使用React Native，全端同構。
關於做者：
奚金鑫
EAII-企業架構創新研究院 專家委員
現任普元雲計算前端架構師，新一代雲架構設計初始團隊的一員。曾爲花旗金融軟件開發經理，負責CitiRisk UI框架(Core View)的先後端設計、開發工做。
關於EAII
EAII（Enterprise Architecture Innovation Institute）企業架構創新研究院，是專一於企業架構與業務創新領域的研究機構，致力於金融、電信、能源與政務等行業領域的企業軟件架構優化設計與 創新研究，以及分佈式計算、服務構件技術、可視化技術、業務流程管理、內存計算、企業移動計算、數據治理等領域的技術研究。
eaworld項目（微信號：eaworld，長按二維碼關注）
eaworld是EAII的官方微信帳號。
↓↓↓閱讀原文，下載課件！
本文分享自微信公衆號 - EAWorld（eaworld）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。