由于公司需要，在一周前開始接觸SAP UI5（OPEN UI5）的學習，由于沒有前輩指導(dǎo)，所以自己在網(wǎng)上搜尋資料并且初步總結(jié)了一些關(guān)于這款框架的一些結(jié)構(gòu)和思路，在博客上進行進一步的整理，歡迎大家前來分析探討和指教，個人想法，有些地方頗有不足還請指出~

• 環(huán)境及編輯器的安裝
• 整體結(jié)構(gòu)分析以及與主流框架對比
• 個人總結(jié)
• 其他參考信息鏈接

環(huán)境及編輯器的安裝

關(guān)于SAP UI5網(wǎng)上能搜集到的資料十分有限，并且只有OPEN UI5進行了開源，也沒有自己的社區(qū)啥的，就很難入門，通過在前端積攢下來的經(jīng)驗，總算費勁工夫才摸到了些門道，首先這款框架是SAP公司所推出的劃時代的產(chǎn)品，可以說是為了解決SAP R3的笨重和移動端能力的不足而應(yīng)運而生的。
所遵循的標準是Fiori，也就是說UI5實際上是Fiori的腳本語言，在這個體系下的同樣還有SAP HANA，這些在這里就不多說了，想要了解更多的細節(jié)百度一搜都是。
下面著重講一下環(huán)境和編輯器的選用和安裝
教程
以上鏈接是一個大神寫的博客，共40課時，個人認為對于框架的了解和認識都有很不錯的幫助，這里進行一個整理，在編輯器選用的問題下，一共分兩款

• eclipse
• SAP WEB IDE

eclipse

先從eclipse開始，官方貌似已經(jīng)停用了mars版本的SAP插件，所以下載eclipse個人建議直接去下載最新版的neon，詳細的java環(huán)境變量配置，還請自行百度，出門多得是，這里就不貼鏈接了。進入程序之后，菜單 Help –> Install New Software，點擊 Add 來添加連接。你可以自己到 https://tools.hana.ondemand.com/ 上看看目前支持的 Eclipse 版本信息和插件信息。 For Eclipse Neon (4.6.1), use https://tools.hana.ondemand.com/neon 這個應(yīng)該是最新版的，如果以后變了建議先去這個網(wǎng)址里面看看支持哪個版本的，然后再做決定，添加鏈接之后，選擇最后一個

image.png

UI Developement Toolkit for HTML5
此過程會較慢，我用公司的網(wǎng)絡(luò)也弄了半天，稍安勿躁~
接下來看我剛才發(fā)的博客鏈接中的教程就可以了，至于詳細的細節(jié)方面我會在第二大塊進行分析

SAP WEB IDE

這個是SAP官方推薦的編輯器，比較特殊，用的是eclipse的內(nèi)核，但是所有的編輯工作都是通過打開一個本地的服務(wù)器，然后在網(wǎng)頁端完成的，很奇葩，是的肥腸奇葩了可以說，但是蜜汁好用，搭建完之后的效果圖是這樣的：

image.png

image.png

image.png

這邊經(jīng)過翻譯之后我這里決定下載win64本地試用版，下載完之后解壓，先雙擊eclipsec，程序執(zhí)行完畢之后再雙擊orion，會有一個終端打開，這個就不用關(guān)了，開著就好，然后訪問localhost:8080/webide/index.html
進入編輯器開始頁面之后，注冊一個賬號，以后直接用該賬號登錄就行，然后就可以開始敲代碼了，個人建議還是用SAP官方這款編輯器更好，集成環(huán)境更佳，而且提供的插件更多，尤其是對于xml文件的layout editor，簡直不能再爽了，這就涉及到結(jié)構(gòu)問題了，下個模塊講解。

整體結(jié)構(gòu)分析以及與主流框架對比

整個ui5采用了MVC的思想，并且更加類似于一個SPA應(yīng)用，從頭到尾只有一個index.html，所有的元素被編譯之后以js的形式被append到了一個id為content的div中。
model層以json文件為主，如果用官方的ide構(gòu)建項目時，會生成一個localService的文件夾，所有的數(shù)據(jù)都會被放入這個文件夾中，不出意外的話以后連接后臺服務(wù)器的代碼應(yīng)該也會被放入其中。
controller層不多說
view層也就是界面展示層，有三種實現(xiàn)方式，js，xml，json。官方推薦用xml來寫view，而且官方的layout editor也是生成xml的代碼，所以推薦使用。用js寫的話更像react.js的思想，HTML in js。當然ui5中也包括了數(shù)據(jù)的雙向綁定，而且綁定的過程對比于vue和angular來說也差不多簡單，這邊就不做探討了。
最最最奇葩的就是，ui5默認生成的項目中，還有一個i18n的文件夾，里面有個文件叫i18n.properties，這個文件里面主要放的都是些view層元素的title，text之類的屬性值和內(nèi)容，為啥要這樣子搞一出呢？我道行太淺，看不出來，倒是這么錯綜復(fù)雜的傳值結(jié)構(gòu)，可把我看懵逼了，至于有啥用，當然是有用的，效果咋樣，項目太小看不太出來，不做評述。
剩下的文件就不需要仔細了解了，應(yīng)該就是寫metadata，用來聲明現(xiàn)在文件的作用和標記的，沒啥大事。
好了，結(jié)構(gòu)介紹的差不多了，總的來說就是index.html的表頭處聲明一坨（稱為bootstrap= =），比如ui5的核心組件sap-ui-core.js，把這貨引過來，然后聲明各大文件的路徑root，聲明主題，再把引過來的東西通通palceAt到那個content里面，樣式view里面寫，數(shù)據(jù)放model里，controller里面寫功能代碼，歐了。至于css，你引入組件就自帶了，感覺不咋需要寫，兼容性啥的也不需要考慮，人家都想好了，就是結(jié)構(gòu)規(guī)定的太死，不大好用，需要時間適應(yīng)，如果真正開始實戰(zhàn)上手，個人感覺用起來應(yīng)該還是美滋滋的。

個人總結(jié)

這款框架限定的范圍比較死，因為只適用于SAP行業(yè)，不過經(jīng)過一周多的了解，這款框架已然足夠強大，配合SAP S4 HANA，無疑會讓SAP的地位更加穩(wěn)固，在移動端的補足使用新一代的B/S架構(gòu)取代原來R3單一的C/S架構(gòu)，更加的靈活。雖然適用性不廣，但是對于SAP本公司而言已經(jīng)很給力了。不過學習難度還是比較大的，首先h5，css，js基礎(chǔ)不多說，對于框架也要有一定的理解，再有對于類庫，前端UI也要有涉獵，jQuery，bootstrap等
不過從現(xiàn)有的手頭的資料來看，學習難度還是非常大的，博客上找到的資料在eclipse中使用mvc的思想構(gòu)建項目，會產(chǎn)生json中文亂碼的情況，暫時無法解決，在web ide中從git上直接clone的項目，也出現(xiàn)了bug不能加載數(shù)據(jù)，目前我連數(shù)據(jù)源都找不到還看到一堆不知道為啥的報錯信息，暫時一頭霧水，總之舉步維艱啊~

其他參考信息鏈接

open ui5詳細教程
SAP Fiori
WEB IDE安裝教程