Slides of Session "SAPUI5 in SAP HANA XSA - SAP Full-Stack JavaScript Development" from HP Seitz (MYPRO Consulting) at UI5con 2017 in St-Leon Rot, 30th June 2017.

1. HP Seitz, MYPRO Consulting
June 30, 2017
UI5 on SAP HANA XSA
SAP Full-Stack JavaScript
Development

2. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
SAPUI5 on XSA – Where is the Phoenix?
Info’s & Links – How to get started
Tools – Internal or External Development Workflow
XSA Architecture – Bowels of the Beast

3. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
SAPUI5 on XSA – Where is the Phoenix?
Info’s & Links – How to get started
Tools – Internal or External Development Workflow
Architecture – Bowels of the Beast

4. 4
First level
 Second level
– Third level
Session “Full-Stack JavaScript with OpenUI5” from first UI5con
Looking Back on the NEMO - Stack
Session Slides: http://blog.mypro.de/2016/04/23/ui5con-session-full-stack-javascript-with-openui5/
Session Recording: https://youtu.be/coWoQp50dLg?list=PLHUs_FUbq4dWyF0mYVK-vc8icVrlbCsJv

5. 5
First level
 Second level
– Third level
NEMO Stack - Toolbelt
Looking Back on the NEMO - Stack

6. 6
3 year old MacBook Pro 13”
 Second level
– Third level
Used Hardware for NEMO
Looking Back on the NEMO – Stack
Dual Core i5 2,4 GHz
16 GB RAM (8 GB would be also fine)
256 GB SSD
Startup Time MongoDB or Application Server: < 2 seconds

7. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAPUI5 on XSA – Where is the Phoenix?
Info’s & Links – How to get started
Tools – Internal or External Development Workflow
Architecture – Bowels of the Beast
SAP HANA XSA – SAP Full-Stack JavaScript

8. 8
IntelNUC Skull Canyon Barebone
Used Hardware for HANA XSA
SAP HANA 2.0 Express Edition SPS01
Quad Core i7 2,6 GHz
32 GB RAM
512 GB SSD
Startup Time HANA and XSA: 6-8 minutes

9. 9
Full official name for the new Development & Runtime Platform is:
SAP HANA Extended Application Services advanced model
Better call it HANA XSA
We have to talk about the name
The Baby’s name is “SAP HANA Extended Application Services advanced model”

10. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
XSA Architecture – Bowels of the Beast
Info’s & Links – How to get started
SAPUI5 on XSA – Where is the Phoenix?
Tools – Internal or External Development Workflow

11. 11
Where is the Phoenix?
Let’s have a look in the XSA Developer Guide (1092 pages) !

12. 12
Where is the Phoenix?
Let’s have a look in the XSA Developer Guide (1092 pages strong) !

13. 13
Where is the Phoenix?
It’s there in the SAP Web IDE for SAP HANA!

14. 14
Where is the Phoenix?
It’s there as XS Services !
SAPUI5 Front-End Server V2/V3

15. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
XSA Architecture – Bowels of the Beast
Info’s & Links – How to get started
Tools – Internal or External Development Workflow
Tools – Internal or External Development Workflow

16. 16
Tools for Internal Development Workflow
more and more tools are UI5 web-based (aka cloud-ready)
XSA Administration
WebIDE for SAP HANA
Database Explorer

17. 17
DEMO - Internal Development Workflow
DEMO

18. 18
XSA Application consists of multiple modules/services:
 Frontend (HTML5 Module with SAPUI5)
 Backend (Node.js Module which implements Backend Logic,
provides REST or Odata services)
 Database (HDB Module to access and use HANA Database)
 General Services (e.g. Authentication via JWT)
Micro-Services – XSA Multi Target Application (MTA) Model

19. 19
XS Client
Tools for External Development Workflow
Use Cases
 before the Web-based Tools were ready
 Light-weight development of Node.js Modules
 Continuous Integration (CI) Scenario
– Tutorial Catalog Article “CI Best Practices with SAP
HANA XSA
https://www.sap.com/developer/tutorials/ci-best-
practices-xsa.html
HANA Studio

20. 20
DEMO - External Development Workflow
DEMO

21. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
XSA Architecture – Bowels of the Beast
Info’s & Links – How to get started
SAPUI5 on XSA – Where is the Phoenix?
XSA Architecture – Bowels of the Beast

22. 22
HANA Platform
XSA Architecture
Runtime & Development Platform (HP’s simplified view)
HANA DB
Git Server
XSA
NPM Registry
UI5 Runtime
/ SDK
MTA
WebIDE
for HANA
MTA
XS Client
App Router
MTA
UI
Node
HDB
Java
Central Router Browser
UAA
App Router
MTA
UI
Node
HDB
Java
MTA
MTA
MTA
MTA

23. Agenda – SAPUI5 on SAP HANA XSA
NEMO Stack – Full-Stack JavaScript w/o SAP Backend
SAP HANA XSA – SAP Full-Stack JavaScript
XSA Architecture – Bowels of the Beast
Info’s & Links – How to get started
SAPUI5 on XSA – Where is the Phoenix?
Tools – Internal or External Development Workflow

24. 24
Get HANA XSA running
 Get proper Hardware (e.g. IntelNUC, 32 GB RAM, ….)
– or use Cloud (if you can effort)
 Get free SAP HANA 2.0 Express Edition
 HANA Academy YouTube Playlist “SAP HANA Express”
– https://www.youtube.com/playlist?list=PLkzo92owKnVy6nOZMFZIZxcvBCoRdshsR
Recommended HANA XSA Sources
 HANA Academy on YouTube https://www.youtube.com/user/saphanaacademy
 SAP Tutorials https://www.sap.com/developer/tutorial-navigator.tutorial-groups.html
 OpenSAP course “Software Development on SAP HANA (Update Q4/2016)” https://open.sap.com/courses/hana5/
 Follow Thomas Jung on Twitter @thomas_jung and SCN https://people.sap.com/thomas.jung
 help.sap.com (SAP HANA Platform  SAP HANA Developer Guide)
How to get started with HANA XSA
and HANA 2.0 Express Edition

25. 25
 Finally a Great Development
Platform (we waited since years
on this moment!)
 Founded upon common
up2date dev standards (like Git,
NPM, Node.js, JavaScript,…)
 Open
 Cool Tools
 On-premise & Cloud
 A little bit heavy, but ok it’s
enterprise
Hurray – Full-Stack JavaScript Development with SAP
The upcoming development platform for the next 15 years!
MAKE
DEVELOPMENT
WITH SAP
GREAT FUN
AGAIN

26. Thank you.
Contact information:
HP Seitz
Full-Stack JavaScript
(w/ or w/o SAP)
Twitter: @hpseitz
Blog: http://blog.mypro.de
SCN: http://scn.sap.com/people/hpseitz You are welcome to give feedback for this session
in the UI5con Event App