full-stack javascript development on sap hana platform

Full-Stack JavaScriptDevelopment on SAP HANA PlatformHP Seitz, MYPRO-Consulting

SAP Inside Track Bern, 9th Sept. 2017

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

Agenda Full-stack JS on SAP HANA PlatformSAP HANA XSA – Architecture & ConceptsXSA Tools – Internal or External Dev WorkflowDemo – XSA Sample ApplicationGet serious – Continuous Integration WorkflowInfo’s & Links – How to get started

Agenda Full-stack JS on SAP HANA PlatformSAP HANA XSA – Architecture & ConceptsTools – Internal or External Dev WorkflowDemo – Sample ApplicationGet serious – Continuous Integration WorkflowInfo’s & Links – How to get started

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

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

HANA Platform

XSA ArchitectureRuntime & Development Platform (HP’s simplified view)

HANA DB

Git Server

XSA

LocalNPM Cache

UI5 Runtime/ SDK

MTA

WebIDE

for HANA

MTA

XS Client

App Router

MTA

UI

Node

HD

BJava

Central Router Browser

UAAApp Router

MTA

UI

Node

HD

BJava

MTA

MTA

MTA

MTA

npm.sap.com@SAP packages

Public NPM Registry

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

IntelNUC Skull Canyon Barebone

Developer Hardware for SAP HANA XSASoftware: 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

Agenda Full-stack JS on SAP HANA PlatformSAP HANA XSA – Architecture & ConceptsXSA Tools – Internal or External Dev WorkflowDemo – Sample ApplicationGet serious – Continuous Integration WorkflowInfo’s & Links – How to get started

11

Tools for Internal Development Workflowtools are web-based (aka cloud-ready)

XSA Administration

WebIDE for SAP HANA

Database Explorer

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

Agenda Full-stack JS on SAP HANA PlatformSAP HANA XSA – Architecture & ConceptsTools – Internal or External Dev WorkflowDemo – XSA Sample ApplicationGet serious – Continuous Integration WorkflowInfo’s & Links – How to get started

14

Migrated Application from NEMO Stack to SAP HANA XSA:

XSA Sample Application

NodeJS ExpressJSMongoDB OpenUI5

SAPHANAXSA

Hosted on Heroku

15

DEMO – XSA Sample Application

DEMO

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 cachebuster uglify preload

eslintgit test

mta

XS Client

version tag mta

XS Client

BUILD RELEASE

apiDoc

19

Get HANA XSA running§ Get proper Hardware (e.g. IntelNUC, 32 GB RAM, ….)

– or use Cloud (if you can afford)§ 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 XSAand HANA 2.0 Express Edition

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 SAPThe upcoming development platform for the next 15 years!

21

Questions?

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

full-stack javascript development on sap hana platform

Technology