Jerry的碎碎念：SAPUI5, Angular, React和Vue

去年我去一個國內客戶現場時，曾經和他們IT部門的一位架構師聊到關於在SAP平臺上進行UI應用的二次開發時，UI框架是選用UI5仍是Vue這個話題.

咱們表明SAP, 向客戶推薦使用UI5是基於如下六點緣由：

1. Fiori consists of a large number of UI controls aimed at Enterprise application developed by top JavaScript developers in SAP. Those UI controls pass strict testing by SAP regarding functionality, usability, accessibility and performance. By developing on top of those controls, Fiori application developers can really concentrate on the implementation of their business logic. The final built application have a consistent look and feel.

2. Fiori is a responsive UI framework, which achieves that develop once, and can run on any supported terminals listed in SAP help. No additional pack and installation is necessary which is inevitable for other open source UI framework.

3. Fiori won Red Dot Award out of 4680 competitors from 61 countries in Design Concept Competition in 2015, which proves that the UX idea of Fiori has completely been confirmed by UX professionals.

4. Fiori provides robust role based access control and authorization where the concept of PFCG role is reused. Customer do not need to apply any third party authorization solutions.

5. Fiori has its dedicated software component and thus the upgrade is decoupled from CRM backend. While the backend version can keep stable, Fiori can be free to keep to latest version to benefit from continuous function enhancement and performance improvement shipped by SAP, no worry about any risks that this UI upgrade can have negative impact on backend.

6. The maintenance and continuous development ( new function iteration ) can never be ignored in Enterprise application development. There are also lots of tool-sets provided by Fiori to help customer with automation test and regression test, mock server to separate frontend / backend development. All of those help customer improve their development efficiency.

而客戶的IT部門架構師考慮到他們部門的開發人員對Vue比較熟悉，已經有了不錯的技術積累，同時他們對UI5作過簡單調研，以爲UI5的性能存在問題，所以他們更青睞Vue.

回到office以後，我把這個問題拋到SAP內部的微信羣上，激起技術人員們熱烈的討論。你們能基本達成一致的觀點是 - 正如拋開應用場景單獨談論幾種編程語言的優劣是耍流氓行爲同樣 - 這些UI框架各自有其特定的使用場景，在特定的場景下選用合適的UI框架能最大程度的揚長避短。

我從2014年10月起纔開始用UI5作SAP的Fiori應用的標準開發，而對於Angular，React和Vue, 我不是專家，僅僅停留在會用的階段，而且在項目需求的狀況下讀過這三個框架的相關源碼，所以這是這篇文章取名"碎碎念"的緣由。

一位SAP的同事, Fahad Alshunaiber, 曾經在他的博文Side by Side: SAPUI5 vs. React & Angular2裏對於UI5, Angular和React作過一個比較:

SAP labs裏的不少同事都讀過這篇博文，而且都有本身的看法。有的同事認爲這個比較出自SAP employee之手而不是第三方機構，是否能作到絕對客觀？有的同事對這個圖標裏的某些判斷持保留意見。但大多數同事的見解仍是比較統一：

若是在SAP平臺上作二次開發來填補SAP標準產品的功能gap, UI5是一個不錯的選擇，理由見這篇文章最開始的那6點闡述
若是業餘時間本身作一些小的應用來玩或者知足本身我的某方面的須要(好比本身的知識管理應用，或者是作一個Labs內部足球俱樂部的管理應用), 這時你們會傾向於嘗試UI5之外的其餘應用.

我本身在學習這些非UI5的框架時，喜歡和個人另外一篇文章Jerry的ABAP, Java和JavaScript亂燉提到的同樣，把一些不管任何UI框架都必須實現的一些最基本的功能點拿出來橫向比較。下面是個人一些學習筆記：

1. Compare Event handling mechanism: SAPUI5 and Angular
   https://blogs.sap.com/2016/06/09/compare-event-handling-mechanism-sapui5-and-angular/

2. Compare Data Binding mechanism: SAPUI5 and Angular
   https://blogs.sap.com/2016/06/30/compare-data-binding-mechanism-sapui5-and-angular/

3. Compare Controller mechanism: SAPUI5 and Angular
   https://blogs.sap.com/2016/07/01/compare-controller-mechanism-sapui5-and-angular/

4. Two way data binding: UI5 VS Vue https://blogs.sap.com/2017/06/14/two-way-data-binding-ui5-vs-vue/

同時，在個人這篇博文 Use Chrome development Tool to compare Rendering performance between SAPUI5 and React
https://blogs.sap.com/2016/02/26/use-chrome-development-tool-to-compare-rendering-performance-between-sapui5-and-react/
裏，我分別用UI5和React作了兩個最簡單的應用，而後試圖去比較他們的渲染性能。Walldorf的UI5開發專家Andreas Kunz（我曾經在個人公衆號文章Jerry的UI5框架代碼自學教程裏提到過他)絕不客氣地指出了這種性能比較實際沒有任何意義。

因此若是您已經讀到了這裏，建議您點開上面的原文連接，去閱讀Andreas寫了一大段的爲何認爲個人比較是毫無心義的緣由，我相信必定會有收穫。

還有一些有意思的比較是用這幾個UI框架在Github上的Star number已經幫助文檔的點擊數來判斷誰更在UI developers中間用得更多。

而一位前端開發人員laizimo, 則在他的博文2017前端技術大盤點（原文連接: https://github.com/laizimo/zimo-article/issues/48）裏面形象地將Angular, React和Vue比喻成了三駕馬車。如下兩張圖均來自laizimo的博文：

最後，正如前面博文提到，討論這些UI框架"誰是winner"的這種問題永遠都不會有確切的答案。做爲SAP從業者，若是您在您的項目裏使用到了UI5之外的其餘框架，歡迎留言，告訴你們您的故事。

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: