前言
作爲一名SAP Fiori 移動顧問已有些年月，在linkin 上也有很多同志諮詢過相關的技術問題，但是關於這方面的文章本人卻很少起筆，閒來無事，想想還是記錄一些在SAP產品上的項目實施經驗，以便更多的同志參考！
（視頻教程參考鏈接： http://edu.csdn.net/course/detail/5046）
SAP Fiori 簡介
提到Sap Fiori, 我們要先從SAPUI5講起。
SAPUI5是有SAP公司推出的一款HTML5富UI組件的框架（支持多設備，響應式設計），其主要有兩個版本，一個SAPUI5，另一個OPENUI5, openui5我們可以看到源代碼，是sapui5的簡要版本。在github上能夠看到，但是follow人數不是很多，相比angular， react 差距比較大。
但是，對於sap平臺產品，有着極其深遠的意義，很大程度上豐富了sap的產品，提供給客戶一個更直觀化，更高層次的用戶體驗。
說到用戶體驗，SAP FIORI無論是語義化，還是體驗上都有着劃時代的意義，主要核心框架依舊是sapui5，但是卻增添了很多標準化，平臺的統一性，作爲一個重量級的UI框架，長遠考慮，這是一個很不錯的方案。
那麼SAPUI5到底是一個什麼樣的框架呢？
目前，使用sapui5的時間已經有兩年時間，這是一個重量級的框架，集成了豐富的UI組件，包括地圖功能，做的相當不錯，但是可拓展性能差，畢竟是重量級框架， 主要有sap.m sap.ui等核心library
其中sap.m主要針對於手機屏幕等移動設備，也是使用較多的一個核心庫。
如果你是一個SAP Fiori 的諮詢顧問，或者一個移動開發人員，想學習SAP Fiori，都要從以下幾方面進行了解入手。
Fiori Launchpad
launchpad可以根據用戶的角色定義不同的訪問權限，會把相關的app分成不同的組別，方便用戶訪問，統一訪問接口，無需定製不同的頁面，對於ERP,CRM類的移動APP, 非常友好，節省了時間成本。（權限配置會因平臺而異！）
SAP配置Launchpad在兩個平臺上進行配置工作：
1.SAP ECC系統（BSP+Gateway， 配置相對複雜，上手比較困難，一步配錯，無法運行）
2.SAP HANA(SAP的雲平臺服務，上手容易，易操作，圖形化界面)。
如果你有很多部署在BSP上的Fiori項目，想遷移到HANA上非常容易，只需要配置一定的參數即可，反之，則要花費一點時間了。
BSP
BSP(Business Server Pages), 通俗來講這個這就是一個類似於web服務器的倉庫，我們可以定義一些html頁面，並通過sap bsp特定的URL展現給用戶，
BSP主要有兩個部分：
1.一個是公共部分，可以定一些html, xml, css。
2.另一個是動態部分，可以編寫一下abap, JS代碼，我們同樣也可以在js中編寫abap代碼，比較神奇。
BSP的使用需要對不同的app創建不同的BSP Application.
並且制定好相應的名字，一旦確定，不能更改，所有創建的工作通常都會在SAP GUI上進行操作，一般專業的ABAP開發人員會更加專業。
我們同樣可以通過Eclipse+SAPUI5 tools插件進行創建操作。（需要sap basis顧問安裝額外的component支持外部創建）
二者任選其一！
每個BSP會包含一下幾個部分：
- Pages with flow logic： 包含了入口文件（index.html）等等公共資源
- Page fragments： 每個component的xml文件，以及css文件，還有一個主要的sapui5 組件容器 Component.js。
項目架構分析
1.加載核心library:
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"richard.demo":"./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>2 加載component 容器
<script>
new sap.m.Shell({
app:new sap.ui.core.ComponentContainer({
height:"100%",
name:"richard.demo"
})
}).placeAt("content");
</script>3.定義容器入口
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/model/json/JSONModel",
], function(UIComponent, Device, JSONModel) {
"use strict";
return UIComponent.extend("richard.demo.Component", {
metadata : {
name : "demo",
version : "1.0",
includes : ['css/style.css'],
dependencies : {
libs : [ "sap.m", "sap.ushell"],
components : []
},
library : "sap.ui.core",
rootView : "richard.demo.views.App",
routing : {
config : {
viewType : "XML",
viewPath : "richard.demo.views",
targetAggregation : "pages",
clearTarget : false,
transition : "slide",
targetControl : "idAppControl"
},
routes : [
{
pattern : "",
name : "OverView",
view : "OverView",
targetAggregation : "pages"
},
.....
]
}
},
init : function() {
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
this.setModel(new JSONModel(Device), "device");
sap.ui.core.UIComponent.prototype.init.apply(this);
this._oApplicationController = new Application(this);
this._oApplicationController.init();
var router = this.getRouter();
this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);
router.initialize();
},
createContent : function() {
.....
var view = sap.ui.view({
id : "app"
....
});
return view;
},
destroy: function() {
this.getModel("device").destroy();
if (this.routeHandler) {
this.routeHandler.destroy();
}
// call the base component's destroy function
UIComponent.prototype.destroy.apply(this, arguments);
}
});
});4 生成preload文件，提高加載速度
var gulp = require('gulp');
var ui5preload = require('gulp-ui5-preload');
gulp.task('default', function(){
return gulp.src([
'./controller/*.js',
'./service/*.js',
'./util/*.js',
'./application/*.js',
'./views/*.xml',
'./Component.js',
'./i18n/*.properties',
'./css/*.css'
])
.pipe(ui5preload({base:'./',namespace:'dlw.post.app'}))
.pipe(gulp.dest('./'));
})（這個操作主要通過Gulp搭建部署）
5.文件結構
移動設備支持
SAP UI5作爲一個響應式移動框架，同樣是支持各種移動設備，包括平板，手機，桌面。
主要原理是Hybird移動應用（Cordova + plugin）, 我們可以自定義移動客戶端，也可以使用官方移動客戶端（已經集成大部分native功能，比如掃碼，照相等等）
參考鏈接：
優化方案
1.生成component-preload.js文件
sapui5在初始化每個app的時候，會首先加載這個文件，通常此文件包含了app所有業務邏輯以及view代碼，首次載入後，運行速度會大幅度提升。
2.按需加載核心library
因爲sapui5的核心庫有30M左右，一次載入比較浪費時間，影響性能，所以需要按需異步加載，主要原理是先載入核心core文件，其餘異步加載。
3.儘量不要編寫過度的css代碼
開發工具
開發IDE可以Eclipse 或者Sap web IDE.
1.Eclipse+SAPUI5 development tools
在大陸最常用的方式，因爲Eclipse作爲最廣泛的開發IDE,有這非常多的插件支持，同樣SAPUI5也提供了相應的tools.
優點： 開發，測試運行速度比較快，適合本地開發。
缺點：不支持圖形界面，部署比較麻煩。
https://tools.hana.ondemand.com/#sapui5
2.SAP WEB IDE
這一款web在線開發工具，也是SAP Fiori力推的一款內部IDE和SAP HANA集成一體，支持拖拽組件，基於模板快速拓展，快速部署，一鍵發佈，並支持HANA的FIOIR APP 開發部署，好處非常多。
https://account.hanatrial.ondemand.com/register
缺點：沒有離線版本， 打開運行速度慢，經常瀏覽器被卡死。
總結
SAP Fiori 作爲一個標準化的商業移動應用，在H5技術領域首屈一指，豐富的組件，多元化的業務支持（地圖，圖表等等），業務上深層次滿足企業的業務需求，但是時間成本上會大大縮短。
對於開發人員而言，學習成本並沒有官方聲明的那樣簡單易學，因爲SAPUI5 支持的view就多大四種（js, xml, json, html），每一種的運行方式都不大相同，於此同時還要學習JS, SAP GUI, BSP HANA相關知識，學習的複雜度上要大一些，所以要多下一些功夫了。
SAP Fiori 2.0視頻教程中文首發，一起學習吧！
