Entreprise e-commerce architecture with content as a service using Umbraco headless. Talk with @matpeder from #Umbraco #Codegarden 2019.

1. CONTENTASASERVICEWITH
UMBRACOHEADLESS
How we built entreprise ecommerce

2. ABOUTUS
FILIPBECH-LARSEN
Head of Technology, IMPACT
@filipbech
MATHIASPEDERSEN
Experience specialist, IMPACT
@matpeder

3. WARNING
• we don’t know .net…
• and that’s a good thing
• We will show code, configuration, setup, etc.
• We ❤ to share

4. #alwaysHiring #Aarhus #Copenhagen

6. THISTALK

7. ACASESTUDY
• Solution architecture
• Headless
• Single Page Apps
• Content as a Service w. Umbraco + backoffice ideas
• Forms in headless

8. THECASE

9. SKORINGEN
• Danish shoe-store
• 200 stores
• Large catalogue - drive to store
• Scalability is key
• Personalization - segmentation
• Go-live planned for late summer

11. ENTREPRISEARCHITECTURE
for large scale e-commerce

12. MODERNENTREPRISECOMMERCEARCHITECTURE
• microservices
• content as a service
• hosted services - Umbraco cloud, Azure appsearch,

13. INTEGRATION LAYER
Unified commerce layer (Microservices)
Omni customers
Omni prices &
campaigns
FTP Stored procedures Webservices DBviews
ERP
PIMDAM WMS
Adapters / connerctors
Transformation layer / Jobs
Omni stock Product search Omni basket Orders
OMSPOS
SELFSERVICE
PORTAL
APP
WEBSITE
E-COMMERCE
(SPA)
EXPERIENCELAYER
CUSTOMERTOUCHPOINTS
CRM
MARKETING
AUTOMATION
RECOMMENDATION
ENGINE
ANALYTICS
/BI
CUSTOMERSERVICE
PLATFORM
Monitor
Logging
Security
Templates
Order history
CHATVIDEO
PRODUCTREVIEWS
DELIVERY
PRODUCTFEEDS
PSP
POS
(SPA)
B2BPORTAL/
COMMERCE
BFF layer
CDN/Proxy
......
Best of breed add-ons
Reuseable components
BFF client 1 BFF client 2 BFF client .....
IMAGES IDENTITYMGMT
Std.Integrationer
UNITTEST
AUTOMATICTEST
CODEQUALITY
APITEST
CI

14. ARCHITECTURE
• Umbraco, Umbraco connector,
• SPA, SSR
• other microservices - integrations
• Logging - Frontend errors
• CDN

15. FORREAL
AS/400
Inklusiv PIM med Windows klient
Vedligehold af produkter + stamdata, priser, lagertal,
promotions (eks. 4 for 3), vouchers, demografityper
Tracking af opførsel
- Produkter + stamdata
- Priser
- Lagertal
- Promotions (eks. 4 for 3)
- Vouchers
- Demografityper
- Images
PSP
Reservation
Træk
Refundering
Hent content
i JSON format
Website-as-a-microservice (www.skoringen.dk)
Hente og samle data fra microservices
Azure Web App
Content microservice (skal omdefineres)
1) Mulighed for at slette produkter der er fejlbehæftet
(emergency)
Ingen mulighed for at redigere produkter, priser, m.v.
Azure Web App
Elastic App Search
Søgemotor ovenpå søgeindeks
Heri ligger alle produktdata, priser, lagertal,
promotions m.v.
Søgninger
"Sorte sko"
(maskinsprog)
Søgninger
"Sorte sko"
(menneskesprog)
Basket Storage
Læg i kurv /
Hente kurv
Tracking af
opførsel
Search Microservice
Azure Web App
Transaktionelle emails
Order Management Microservice
Ny ordre
metode TrækRefunder
Azure Web App
Kunden vælger at
gennemføre ordren
Import Microservice
Fortolker flade filer
Azure Web App
Product data
SDVSYSTEMS
CONTENT&
COMMERCELAYER
CUSTOMERFACING
Google Analytics
Ordrer
Besked om refundering
(eksisterende flade fil)
Besked om træk
(eksisterende flade fil)
Send fakturaemail
Send
kreditnotaemail
Send
ordrekvitteringsemail
COMMERCEIT-ARKITEKTUR?SKORINGEN
Google
Konfigurerbar feed platform for alle
tænkelige platforme (Google
Shopping, Facebook m.v.
Feed Microservice
Konstruerer feed med al
data og udstiller dette
Azure Function
Kurvens
indhold
GLS
Parcelshop Import Microservice
Importerer pakkeshops dagligt fra
GLS
Azure Function
Pakkeshops
Ordrer
Ordrer
Track & Trace nummer
Returvarer
Butikker
Ordrer
Produktsletninger
Basket Microservice
Azure Web App
CDN
Client
Forespørgsel til www.skoringen.dk
og skoringen.no
Programatic
Gets segment id
Email Service Providor
(ESP)
Inkl. ab cart e-mail -->
Umbraco Cloud
Vedligehold af indhold,
landingpages, filtersider,
spots, karouseller, m.v.
ServerSide Rendering
Image data
Gets content as JSON
Uses segment id if its present
FTP
Send billeder til FTP
Login
User segmentation
Raptor / KitewheelLæse bruger data efter behov
UserData microservice
holder profil data for at
sikre performance
Azure Web App
Get personalized content
based on segment id
Get segment id
Text
CDP
Profildatabase
Display
User storage
Holder:
-Brugernavn
-Password
-Rettigheder
Get product recommendations
...
SoMe
Orders

16. HEADLESSCMS
Umbraco headless specifically

17. ITSACROWDEDSPACE

18. ANDTHETRADITIONALCMS’S
• Wordpress
• Umbraco
• EpiServer
• Sitecore

19. FEATURES,PRICEANDEASEOFUSE
• Basic CMS-stuff: links, rte, page-tree, urls, dynamic content (grid), …
• Other features (image-compression, data-migration between environments,
…)
• Price varies a lot

20. UMBRACOHEADLESS
the right tool for the job

21. WHYDIDWECHOOSEUMBRACO
• Editor experience
• Developer experience
• Cloud - UaaS
• Cost

22. UMBRACOHEADLESS
• Umbraco in the cloud
• Limited backoffice
• hybrid mode
• REST endpoints for all raw-data
• Client libraries (later…)

23. DYNAMICCONTENT-GRID
• Use raw
• LeBlender, DocType Grid Editor (DTGE)
• Next generation grid

24. THEGOOD,THEBADANDTHEUGLY
• Good (easy, familiar, webhooks)
• Bad (references, DTGE-expansion)
• Ugly (workarounds requires many requests)

25. THEFUTUREOFUMBRACOHEADLESS-WISHES
• GraphQL !!!
• Proteus Block Editor (Grid v2)
• Packages “headless ready”
• More detailed webhooks
• Preview-functionality

26. SPA+INFRASTRUCTURE

27. CMS-BASEDSINGLEPAGEAPPLICATIONS
• Why
• User experience: Seamless navigation, performance
• Editor experience: ease of using CMS
• How
• Client side router - but the server still determines the route
• Dynamic content

28. RESOLVINGROUTES
• Generic *-route
• Get content by Url
• Select component based on the dynamic “template”-property
• Pass content-data to the selected component
• Same dynamic approach for grid-content

34. SERVERSIDERENDERING
• Why
• SEO
• Fast boot
• SSR as a service - same or different to the assets?
• All the major frameworks have solutions for this. Can be SaaS or you can host
• Make sure to provide an “out” for personalised content (if cached)

36. STRATEGIESFORPERSONALISINGSSR
at client
bootstrap
at 1st user
interaction
no SSR

38. BFF

39. BFF-BESTFRIENDSFOREVER?

41. BACKEND-FOR-FRONTEND
• Performance
• data-transformation (+ orchestration)
• caching + invalidation (webhook)
• (hide backoffice url)

42. THEDIFFERENCEINPERFORMANCE
Traditional
html
content
products
content
products…
w. BFF
html
combined
combined
…
BFF + SSR
html
…
combined
First pageload Next page

43. PAGE:/DK/BOERN/STOEVLER

44. [BFF-URL]/CONTENT?URL=/DK/BOERN/STOEVLER
[umbraco-url]/umbraco/rest/v1/content/published/url/?url=/dk/boern/stoevler [appsearch-url]/term?sortField=minprice&sortOrder=asc&pageSize=24&currentPage=1

45. UMBRACOCONNECTOR

46. BFF
SPA
UMBRACO
CONNECTOR

47. nestjs.com

49. SERVINGCONTENT

53. 🦆-typing

54. BFF
SPA
UMBRACO
CONNECTOR

56. INSIDEBACKOFFICE
the solution-hub for editors

57. HANDLINGCONTENTFROM
OUTSIDEUMBRACO

58. BFF
SPA
UMBRACO
CONNECTOR

59. BFF
SPA
UMBRACO
CONNECTOR

60. BFF
APPSEARCHCONNECTOR
UMBRACO
SPA

62. APPSEARCH
UMBRACO
SPA
CONNECTOR
BFF

63. BACKOFFICESTYLING

64. 1-GRIDROWS

71. 2-REUSINGSPASTYLES

76. FORMS
Umbraco forms from SPA in headless

83. *

85. CONCLUSION
to infinity and beyond…

86. CONCLUSION-THEFUTURE…
• isUmbracoHeadlessReadyYet.com
• Hybrid mode?
• grid-expansion
• razor-helpers
• Make sure your packages are compatible when appropriate

87. SHARINGISCARING
• @impactdk/ngx-cms-formbuilder
• @impactdk/ngx-routing-utils
• The Umbraco Connector is still WIP, but reach out if you wanna play along

88. THANKYOU
This was “Content as a service
with Umbraco headless”
We are @filipbech and @matpeder
Questions?