. SAPUI5 & Fiori – Where ABAP-er Meets JavaScript Igor 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 – History 1. Business Server Pages (BSP, 2002) = • Not responsive HTML + ABAP-script • SAP Web Server only 2. WebDynpro (2003 Java, 2004 ABAP) = • ABAP/Java-only (no HTML, CSS, Script) SAP backend only • Performance issues 3. SAP Web Client (2007) = BSP + Dev Worbkench + GenIL Model • No (difficult) theming / branding 4. SAPUI5 & Fiori (2013) = BSP + SAPUI5 + HTML5 + CSS + JavaScript 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 SAPUI5/Fiori Architecture Client (Web Browser): SAPUI5 Views with “sap.m” Views with lib “sap.ui.commons” lib Models (JSON, XML, Controllers OData) Server No SAP system! UI5 Fiori UI5 Fiori SAPUI5 BSP Fiori SAP Web BSP Lchpd XS Engine BSP Lchpd XS Engine Web Page Launchpad Gateway Server, e.g. DB Apache Tomcat SAP HANA Cloud Platform SAP HANA DB SAP ABAP Server DB 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 Technology SAPUI5 100% Fiori • Technology • Technology – Base 80% – Base: SAPUI5 • HTML5 – Fiori Launchpad • CSS3 60%Technological Foundation – Fiori Client for Android, • JavaScript iOS, Windows • jQuery 40% • Concept – JavaScript Libraries 20% – Product Line • Sap.ui.commons – Platform • sap.m – User eXperience (UX) • ... 0% – Fiori Design Guidelines – Can run in Fiori Design Guidelines Web Servers (e.g. • Role-based Appache Tomcat) • Delightful • • Coherent Concept • Simple – MVC • Adaptive experience.sap.com/fiori-design/ SAP Fiori Launchpad - Features • Enhanced personalization • Search Capability (recently used...) • Responsive Design • Launchpad Designer • Session Management (log in-out) • Single Sign-on • Theming & Branding experience.sap.com 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 SAPUI5 SAPUI5 OpenUI5 • SAP License • Apache 2.0 License • No Contributions – Free of Charge • NOT a separate product w separate license – Commercial Use is OK • Server: – As-is (no warranty) – NW ABAP (7.3 • GitHub Contributions / Issue – NW JAVA Reports – SAP HANA XS – Hana Cloud Platform (HCP) • Beta Releases – Content Distribution Network (CDN) • sapui5.hana.ondemand.com/ • openui5.hana.ondemand.com OpenUI5 vs SAPUI5 SAPUI5 OpenUI5 • Sap.viz • Core • SAP APF – Models (JSON, XML, OData) • Sap.ndc – Testing • Sap.ovp – Responsive (devices) • Smart Controls – Routing • Web IDE Dev – Rendering Templates – jQuery • Flexibility • Controls Services – sap.m • 3D Visualisation – sap.ui.table Kit – 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 IDEs Eclipse - based SAP Web IDE View design: JavaScript View design: Graphical Neptune (SAP ABAP GUI) View design: XML View design: Graphical tools.hana.ondemand.com/mars neptune-software.com 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 Out sapfioritrial.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 arrival 2. Scanning boxes 3. Scanning Products 4. Submit & Next box Challenges • SAPUI5 Package versions: Backend/Eclipse/Toolkit API vs Blogs, Forums... • Layout management Q & A [email protected] linkedin.com/in/ibarbaric Thank you!.