sapui5 & fiori where abap-er meets...
TRANSCRIPT
.
SAPUI5 & Fiori – Where ABAP-er Meets JavaScriptIgor Barbarić
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
Web@ABAP – History1. Business Server Pages (BSP, 2002) =
HTML + ABAP-script
2. WebDynpro (2003 Java, 2004 ABAP) = ABAP/Java-only (no HTML, CSS, Script)
3. SAP Web Client (2007) = BSP + Dev Worbkench + GenIL Model
4. SAPUI5 & Fiori (2013) =BSP + SAPUI5 + HTML5 + CSS + JavaScript
• Not responsive
• SAP Web Server only
• SAP backend only
• Performance issues
• No (difficult) theming / branding
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
Fiori – SAP’s Strategic Direction
• “Over time, we plan to move all SAP solutions in this direction.”(support.sap.com SAP Product Strategy)
SAP Fiori – Design Award Winner
gartner.com
red-dot.sg
SAPUI5 & Fiori – Key Features• HTML5 + JavaScript + CSS3 + jQuery• Models: JSON, XML, OData• Stateless• Extendable• Flexible design (Theming, Branding, Corporate Identity)• Client-side libs & rendering (server performance!)• Any web server (SAP ABAP, SAP HANA, Tomcat, Jetty...)• Any backend (also non-SAP)• Any device / client (responsiveness)• Open source (OpenUI5)• No need for SAP NW server to play with
Server
Client (Web Browser): SAPUI5
DB
Models (JSON, XML, OData)
Controllers
Views with “sap.m” lib
Views with “sap.ui.commons” lib
SAP ABAP Server
SAP Gateway
Fiori Launchpad
SAPUI5 BSP Web Page
SAP HANA
XS EngineFiori
Lchpd
SAP HANA Cloud Platform
XS EngineFiori
Lchpd
DB DB
Web Server, e.g.
Apache Tomcat
SAPUI5/Fiori Architecture
UI5 BSP
UI5 BSP
No SAP system!
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
Concept vs TechnologySAPUI5• Technology
– Base• HTML5• CSS3• JavaScript• jQuery
– JavaScript Libraries• Sap.ui.commons• sap.m• ...
– Can run in Web Servers (e.g. Appache Tomcat)
• Concept– MVC
Fiori• Technology
– Base: SAPUI5– Fiori Launchpad– Fiori Client for Android,
iOS, Windows
• Concept– Product Line– Platform– User eXperience (UX)– Fiori Design Guidelines
• Role-based• Delightful• Coherent• Simple• Adaptive
0%
20%
40%
60%
80%
100%
experience.sap.com/fiori-design/
Fiori Design Guidelines
Technological Foundation
SAP Fiori Launchpad - Features
experience.sap.com
• Enhanced personalization• Search Capability (recently used...)• Responsive Design• Launchpad Designer• Session Management (log in-out)• Single Sign-on
• Theming & Branding
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
OpenUI5 vs SAPUI5SAPUI5• SAP License• No Contributions• NOT a separate product w separate
license• Server:
– NW ABAP (7.3 – NW JAVA– SAP HANA XS– Hana Cloud Platform (HCP)– Content Distribution Network (CDN)
• openui5.hana.ondemand.com
OpenUI5
• Apache 2.0 License– Free of Charge
– Commercial Use is OK
– As-is (no warranty)
• GitHub Contributions / Issue Reports
• Beta Releases
• sapui5.hana.ondemand.com/
OpenUI5 vs SAPUI5SAPUI5• Sap.viz• SAP APF• Sap.ndc• Sap.ovp• Smart Controls• Web IDE Dev
Templates• Flexibility
Services• 3D Visualisation
Kit
OpenUI5• Core
– Models (JSON, XML, OData)
– Testing– Responsive (devices)– Routing– Rendering– jQuery
• Controls– sap.m– sap.ui.table– sap.ui.layout
• …
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
SAPUI5 IDEsEclipse - based SAP Web IDE
Neptune (SAP ABAP GUI)
tools.hana.ondemand.com/mars neptune-software.com
View design: JavaScript
View design: XML
View design: Graphical
View design: Graphical
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
Fiori – Try It Outsapfioritrial.com
Learn @ openSAP• Online courses• Duration: 5-6 weeks, 1h/day• Video, handouts, presentations• Weekly assignments (tests)• Discussion forums• Demo & Exercise environment• Record of Achievment• Final exam
open.sap.com
Learn @ HANA Cloud Platform• SAPUI5 & Fiori– Test
Development environment• Free SAP HANA developer
account• SAP HANA Cloud Platform
Cockpit• SAP Web IDE• Runtime Environment
account.hanatrial.ondemand.com
SAP Cloud Appliance Library (CAL)• Free SAP Dev & Trial
software in Cloud• SAP NW AS ABAP• SAP HANA• Cloud fee:
– Amazon Web Services
– Microsoft Azure
cal.sap.com
Learn @ SAPUI5 Dev Toolkit• Full API Reference• Developer guide Tutorials• “Explored” - Control
documentation with samples• Demo Apps with code examples• Controls with code examples• Icons
sapui5.hana.ondemand.com/1.28.9
Content• Web@ABAP - History• SAPUI5 & Fiori – Key Features, Architecture• SAPUI5 vs Fiori• OpenUI5 vs SAPUI5• Development Environments• Learning Content• Personal Experience: First Project
SAP Fiori – Personal Experience• Scenario: Unpack / Repack Products• Platform: SAP NetWeaver ABAP AS• SAP Solution: Extended Warehouse Management• Technologies:
– Backend: • ABAP OO + SAP Gateway (OData)
– Frontend: • SAP Fiori @ Cheap Mobile Phone• Motorola RS507 Barcode Scanner
– IDE: Eclipse, ABAP Workbench (SE80)
SAP Fiori – Unpack / Repack
1. Truck arrival2. Scanning boxes3. Scanning Products4. Submit & Next box
Challenges• SAPUI5 Package versions:
Backend/Eclipse/Toolkit APIvs Blogs, Forums...
• Layout management
Q & A
Thank you!
[email protected]/in/ibarbaric