Join the SAP Hybris Expert Services team to learn how to build a front-end storefront in Angular, a platform that makes it easy to build applications using the Web. Learn how you can leverage back-end APIs available in the SAP Hybris Commerce solution. During this technical session, our senior expert walks you through the architecture, technology, code, and shares our lessons learned.

1. PUBLIC
Tobias Ouwejan, SAP
October2017
Learn How to Build a Headless
Commerce Storefront

2. 2PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
2 mins Background
2 mins Technology Choices
2 mins Demo
9 mins Live Coding
2 mins Lessons Learned
3 mins Q&A
Agenda | What We’ll Look At

3. 3PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
What’s headless
commerce anyway?

4. 4PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Web app (JS)
Accelerator
SAP Hybris platform
Current accelerators are tightly
coupled with the SAP Hybris
platform.
Traditional platform
SAP Hybris platform
CommerceAPI
The Web app is decoupled
from the platform.
Headless platform

5. 5PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Web app (JS)
SAP Hybris platform
CommerceAPI
What’s so great
about headless?Decoupled architecture
§ Implement in different teams
§ Deploy separately
§ Have freer technology choices
Smooth experience
§ Faster page load
§ More interactive
§ Focused interactions
Today’s technology
§ Front-end technology
is moving VERY fast
Easier upgrades
§ Upgrade

6. Technology Choices

7. 7PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Webapp
Nothing!
CommerceAPI
OCC
No CMS back-endAPI
SAP Hybris platform
Business as usual
CORS issues
Technology choices | What’s available already?
Web App (JS)SAP Hybris platform Commerce API
!
!
✓
!
✓

8. 8PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
Technology choices | Web app
Language
§ Typescript
§ ECMAScript 2017
(polyfills)
Build
§ Webpack
Development
§ Visual Studio Code
§ Angular-CLI
§ Webpack dev server
Frameworks
§ Angular (ngx)
§ RxJS
§ Material Design
§ Sass

9. Demo: SPAccelerator
§ CMS content
§ Search and navigation
§ Products details
§ Login/logout
§ Cart

10. Live Coding

11. Lessons Learned

12. 12PUBLIC© 2017 SAP SE or an SAP affiliate company. All rights reserved. ǀ
CMS is key
§ Routing
§ Page structure
§ Single page application
CORS
OCC has a few missing features
Technology goes super fast!
§ Breaking changes
§ Dependency management
§ Stable version?
Lessons learned

13. Thank you.
Contact information:
Tobias Ouwejan
Head of Commerce Practice
tobias.ouwejan@sap.com
+31 06 55 141 533