Slides of the Session "Full-Stack JavaScript Development on SAP HANA Platform" on SAP Inside Track Bern 2017 by HP Seitz (MYPRO-Consulting), 9th September 2017

1. Full-Stack JavaScript
Development on
SAP HANA Platform
HP Seitz, MYPRO-Consulting
SAP Inside Track Bern, 9th Sept. 2017

2. 2
Knowledge/Skills/Experience
§ Frontend Development with SAPUI5/OpenUI5
§ Backend Development with NodeJS/ExpressJS /SAP HANA XSA
§ Professional JavaScript Development (TDD, CI)
§ >15 years in SAP “Eco System”
Customer Projects with:
§ SAPUI5/OpenUI5 since 2012
§ NodeJS since 2015
§ SAP HANA XSA since 2016
HP Seitz MYPRO-Consulting

3. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
XSA Tools – Internal or External Dev Workflow
Demo – XSA Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

4. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
Tools – Internal or External Dev Workflow
Demo – Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

5. 5
XS Advanced (alias XSA)
§ The Future
§ Asynchronous, scaling, but complexer development
§ Based on common standards (node.js, Google V8, npm, git,
Cloud Foundry, ….)
§ Leverages whole npm universe (> 500.000 available modules)
XS Classic (alias XSC, alias XS “Dead”)
§ The Past
§ Synchronous, not scaling
§ xsjs is available as npm package within XSA
§ Migration Guide / Wizards to move on to XSA
XS Advanced versus XS Classic

6. 6
Typical XSA application consists of multiple
modules/services, each running in own process:
§ Frontend (HTML5 module with SAPUI5)
§ Backend (NodeJS module, which implements Backend Logic,
provides REST or OData services)
§ Database (HDB module, which defines database artifacts)
§ Service Instances (xsuaa, hana, …..)
Micro-Services Architecture – XSA Multi Target Application (MTA) Model

7. 7
HANA Platform
XSA Architecture
Runtime & Development Platform (HP’s simplified view)
HANA DB
Git Server
XSA
Local
NPM Cache
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
npm.sap.com
@SAP packages
Public
NPM Registry

8. 8
Via npm.sap.com registry or download from service marketplace:
§ @sap/approuter - Single entry point for XSA apps (serve static content,
authentication, rewrite URLs, proxy to other micro services,…..)
§ @sap/cds - Core Data Services for node.js
§ @sap/hdbext - HDB extension library for using SAP HANA in node.js
§ @sap/xsenv - Utility for XSA environment variables
§ @sap/xsjs - Compatibility layer for SAP HANA XS Classic running on node.js
§ @sap/xssec - XS Advanced Container Security API for node.js
Important SAP NPM Packages for JavaScript XSA Development
npm.sap.com
@SAP packages

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

10. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
XSA Tools – Internal or External Dev Workflow
Demo – Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

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

12. 12
XS Client
Tools for External Development Workflow
Use Cases
§ before the Web-based Tools were ready
§ Light-weight development of Node.js Modules
HANA Studio

13. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
Tools – Internal or External Dev Workflow
Demo – XSA Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

14. 14
Migrated Application from NEMO Stack to SAP HANA XSA:
XSA Sample Application
NodeJS
ExpressJS
MongoDB
OpenUI5
SAP
HANA
XSA
Hosted on Heroku

15. 15
DEMO – XSA Sample Application
DEMO

16. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
Tools – Internal or External Dev Workflow
Demo – Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

17. 17
For serious XSA development there is more necessary:
§ Professional Git Server (GitLab, BitBucket, GitHub,…)
§ Build Server (Jenkins, Bamboo, ….)
§ Dedicated Build Pipeline steps for each module type
– UI5: eslint, test, cachebuster, uglify, preload
– NodeJS: eslint, test, apiDoc
XSA Test Driven Development (TDD) & XSA Continuous Integration (XSA CI)
eslintgit test
cache
buster
uglify preload
eslintgit test
mta
XS Client
version tag mta
XS Client
BUILD RELEASE
apiDoc

18. Agenda Full-stack JS on SAP HANA Platform
SAP HANA XSA – Architecture & Concepts
Tools – Internal or External Dev Workflow
Demo – Sample Application
Get serious – Continuous Integration Workflow
Info’s & Links – How to get started

19. 19
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

20. 20
§ Great New Development
Platform
§ Founded upon common
up2date dev standards (like Git,
NPM, Node.js, JavaScript,
CloudFoundry, …)
§ Plus: Tomcat/TomcatEE (Java)
§ 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!

21. 21
Questions?

22. Thank you.
Contact information:
HP Seitz
Full-Stack JavaScript
(w/ or w/o SAP)
Twitter: @hpseitz
Blog: http://blog.mypro.de
Website: http://www.mypro.de
SCN: http://scn.sap.com/people/hpseitz