在國外的技術網站上瀏覽時，看到一篇關於sapui5的文章，寫的比較好，對於不了解這框架的人來說應該是很有幫助的，所以我把這篇文章翻譯后轉發到博客。原文鏈接：https://blogs.sap.com/2015/09/29/sapui5-for-dummies-what-is-it-and-how-does-it-work/comment-page-1/#comment-442387 (可能需要FQ)。
正文：
你曾經在智能手機上使用過非常簡單的應用程序嗎？你有沒有使用過一個簡單且具有視覺吸引力的應用程序？應用程序的用戶體驗（UX）不僅僅是它的外觀，而是它的工作方式。
我認為最令人愉快和誘人的應用程序結合了深思熟慮、前端和后端邏輯。此外，這些應用程序將這兩個端分開。SAP已經意識到用戶界面（UI）比以往任何時候都更容易發生變化。用戶不斷變化的需求可以很容易地重塑應用程序的組成和設計。考慮到這一點，后端應該與前端分開開發和維護，並且應該有一個明確的關注點划分。除此之外，應用程序的各個UI元素也可以而且應該單獨開發。
什么是SAPUI5？
基於上述理論，SAP引入了一個基於HTML5的開發工具包SAPUI5，它鼓勵用戶體驗的一致性。利用上述理論，使用SAPUI5構建的應用程序可以跨瀏覽器和設備進行響應——它們運行在智能手機、平板電腦和台式機上。UI控件自動調整自己以適應每個設備的功能。為此，SAPUI5提供了強大的開發概念來創建具有消費者級、基於瀏覽器的業務應用程序。簡而言之，UI5是一種基於JavaScript、CSS和HTML5的客戶端UI技術。服務器在部署應用程序、存儲SAPUI5庫和連接數據庫時發揮作用。根據使用SAPUI5的環境，庫和應用程序例如存儲在SAP HANA雲平台或其他應用程序服務器上。訪問應用程序業務數據的首選方法是使用oData模型。
這篇博客文章的目的是指出不同的開發概念以及基本的SAPUI5應用程序是如何工作和結構的。我會反芻許多指南和教程的信息，我發現有幫助的一路上。這是一個很好的（和簡短的）“入門”指南，初學者到SAPUI5。我希望在SAPUI5上創建許多前面的指南。
SAPUI5是如何工作的？
首先，您必須理解SAPUI5的基本開發概念。SAPUI5支持模型-視圖-控制器（MVC）概念，“用於實現用戶界面的軟件體系結構模式”。作為開發人員，我們鼓勵您使用MVC將數據模型處理、UI設計和應用程序邏輯分開。除了修改不同的部分之外，這有助於促進UI開發。
模型：這是負責管理、檢索和更新應用程序中正在查看的數據的部分。
視圖：該部分負責解釋和呈現初始UI。SAPUI5上下文中的視圖根據模型中的更改向用戶生成表示。
視圖是什么樣子的?在它的目錄中，視圖存儲在“視圖”文件夾中，XML視圖的名稱總是以*.view. XML結尾(如下所示)。
控制器：這是最重要的部件之一。這是負責將視圖邏輯與數據邏輯分離的部分。控制器通過調整視圖和模型來響應用戶交互和“查看事件”。控制器實際上是向模型發送命令以更新其狀態，就像在字處理應用程序中編輯文檔一樣。與視圖類似，控制器與相關視圖同名（如果存在1:1關系）。控制器名稱總是以*Controller.js結尾（如下所示）。
有趣的事實：MVC最初是為桌面計算而開發的，但后來被廣泛應用於萬維網。
好吧，這是有道理的。但它到底是如何工作的呢？
好的，在你關閉這個頁面之前，我保證上面的圖表非常簡單。現在您對MVC概念有了一些了解，讓我們來看看如何組裝一個SAPUI5應用程序。這樣做，我們將依次快速查看每個文件。
在本練習中，我們將假設我們剛剛構建了一個基本的master detail SAPUI5應用程序。首先，什么是主詳細信息應用程序？好吧，如果你曾經使用過iPad或平板電腦，那么你很可能在上面使用過電子郵件。你有沒有注意過iPad或平板電腦上的電子郵件應用程序如何在左側顯示你的電子郵件列表？它可能會顯示主題、發件人和電子郵件的預覽。然后在右邊，它會顯示您選擇的電子郵件。這是一個主細節應用程序的示例。從形式上講，在主詳細信息應用程序中，用戶可以從對象列表中選擇對象並查看選定的對象。許多事務性SAP Fiori應用程序都使用這種類型的應用程序布局（如下所示）。
按照下面的步驟使用圖1A。
1.我們都訪問過一個網站。很明顯你現在在一個網站上。加載SAPUI5應用程序的第一步是瀏覽器加載web應用程序的index.html（其中包含的代碼不超過最小值）。如果您不熟悉web開發，則每個網站都部署在web服務器的目錄中。除此之外，每個網頁都是該web服務器上的一個單獨文件。當您訪問網頁時，服務器會查找默認文件（index.html）並自動顯示該文件。
2.隨后，它使用標准變量引導加載SAPUI5工具包核心。Bootstrap包含基於HTML和CSS的SAPUI5版式、表單、按鈕、導航和其他界面組件的藍圖/模式。
然后有一個函數調用來舉例說明sap.ui.core.ComponentContainer並將其放在HTML文檔的主體中。
sap.ui.core.ComponentContainer做什么？
sap.ui.core.ComponentContainer加載sap.ui.core.UIComponent，它是整個應用程序的自包含封裝。
3.組件（名為sap.ui.core.ui Component）在Component.js文件中與index.html位於同一文件夾中；可以通過bootstrap標記中的資源位置規范找到它。組件定義了元數據，其中包括應用程序級配置和路由信息。路由是關鍵的最佳實踐導航機制，對於非常重要的應用程序，它將取代基於sap.ui.core.EventBus的導航，甚至取代對頂級導航控件（如sap.m.NavContainer）的基於共享控制器的訪問。
那么，我所說的應用程序級配置是什么意思？我們的組件由兩部分組成：元數據和在索引之后初始化組件時調用數據源的函數。在SAPUI5的早期版本中，應用程序的其他配置設置（如服務配置、根視圖和路由配置）已添加到我們的組件中。從SAPUI5版本1.30開始，SAP建議您在名為Manifest的文件（我們將在第2部分中討論）中定義這些設置。
4.在我們的組件初始化之后，有一些模型是在我們的組件上創建和管理的。第一個是主模型；它使用oData連接到我們的數據源。與主模型一起，內部化（i18）被初始化。內部化文件是從本地資源（文件）加載文本並基於UI控件進行設備檢測的地方。
5.此外，路由器（sap.ui.core.routing.Router）的初始化在組件的主要部分進行，根視圖（“App”）被實例化。與我們想象中的應用程序中的所有其他視圖一樣，根視圖是一個XML視圖。
6.基礎、基礎視圖（在App.View .xml中定義）非常簡單，包含單個SAP.M.SPLITAPP控件。好的，慢點——什么是sap.m.SplitApp？SplitApp是SAPUI5移動應用程序的一個附加核心組件，除了應用程序控件。如果SAPUI5在平板電腦上運行，SplitApp支持兩個導航容器（頁面或其他全屏控件之間的導航），而在智能手機上運行一個導航容器。主導航容器的顯示取決於設備的縱向/橫向和SplitApp的模式。
7.好吧-現在是毛茸茸的東西！現在我們將了解用戶在瀏覽器中看到的應用程序部分。虛擬應用程序的可見部分由三個主要的XML視圖和一個片段提供。當我們的應用程序出現在設備（而不是智能手機）上時，會顯示兩個視圖：主視圖和詳細視圖。首先，這是Master.view.xml和Detail.view.xml。每個視圖都包含一個sap.m.Page。還有NotFound.view.xml，當沒有視圖可以與請求的資源匹配時使用。類似於經典的“404NotFound”頁面，您可能在其他網站上遇到過。什么是sap.m.page？嗯，sap.m.Page是移動應用程序屏幕的基本容器。
8.在Detail視圖中，有幾個SAPUI5表單控件可以在我們的應用程序中顯示詳細信息。對於這個特定的例子，這可以包括發送者和接收者電子郵件。這些控件在XML片段中單獨定義。
9.最后，還有一個Formatter.js文件。格式化程序包含在主視圖和局部視圖中的各種控件中使用的格式化值。css文件夾包含style.css，其中有非常少量的自定義css，特別是將“not found”消息放在它通常位於的較低位置。同樣，如果您不熟悉web開發，CSS代表層疊樣式表。CSS可以包含一個或多個靜態文件，用作描述頁面（或文檔）表示的樣式表語言。
太棒了！我能從這一切中得到什么？
使用Web技術，如HTML5作為我們的基礎，SAP的應用程序可以真正改造成許多不同的設計。有鑒於此，SAPUI5支持許多設計模式；每個模式都由sap.m控件支持。正如你已經看到的，這是SAP FiRIO UX的基礎。通過遵循這里描述的設計模式方法，您構建的應用程序將與現有FiRi應用程序和新SAPUI5在路上保持一致的感覺。正如本文開頭提到的，應用程序的用戶體驗不僅僅是它的外觀，而是它的工作方式。
現在，我們已經了解了基本的SAPUI5應用程序的結構和工作原理，請在下面這些偉大的資源中進行挖掘。請繼續收聽第二部分！通過與你的同齡人分享這篇文章來表達你的愛！
以上就是這篇文章的全文。個人感覺對於sapui的初步了解有很好的幫助。之后我們還會繼續深入的去了解sapui5（openui5）。