Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Content as a Service with Umbraco Headless

64 views

Published on

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

Published in: Technology
  • Be the first to comment

Content as a Service with Umbraco Headless

  1. 1. CONTENTASASERVICEWITH UMBRACOHEADLESS How we built entreprise ecommerce
  2. 2. ABOUTUS FILIPBECH-LARSEN Head of Technology, IMPACT @filipbech MATHIASPEDERSEN Experience specialist, IMPACT @matpeder
  3. 3. WARNING • we don’t know .net… • and that’s a good thing • We will show code, configuration, setup, etc. • We ❤ to share
  4. 4. #alwaysHiring #Aarhus #Copenhagen
  5. 5. THISTALK
  6. 6. ACASESTUDY • Solution architecture • Headless • Single Page Apps • Content as a Service w. Umbraco + backoffice ideas • Forms in headless
  7. 7. THECASE
  8. 8. SKORINGEN • Danish shoe-store • 200 stores • Large catalogue - drive to store • Scalability is key • Personalization - segmentation • Go-live planned for late summer
  9. 9. ENTREPRISEARCHITECTURE for large scale e-commerce
  10. 10. MODERNENTREPRISECOMMERCEARCHITECTURE • microservices • content as a service • hosted services - Umbraco cloud, Azure appsearch,
  11. 11. 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
  12. 12. ARCHITECTURE • Umbraco, Umbraco connector, • SPA, SSR • other microservices - integrations • Logging - Frontend errors • CDN
  13. 13. 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
  14. 14. HEADLESSCMS Umbraco headless specifically
  15. 15. ITSACROWDEDSPACE
  16. 16. ANDTHETRADITIONALCMS’S • Wordpress • Umbraco • EpiServer • Sitecore
  17. 17. 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
  18. 18. UMBRACOHEADLESS the right tool for the job
  19. 19. WHYDIDWECHOOSEUMBRACO • Editor experience • Developer experience • Cloud - UaaS • Cost
  20. 20. UMBRACOHEADLESS • Umbraco in the cloud • Limited backoffice • hybrid mode • REST endpoints for all raw-data • Client libraries (later…)
  21. 21. DYNAMICCONTENT-GRID • Use raw • LeBlender, DocType Grid Editor (DTGE) • Next generation grid
  22. 22. THEGOOD,THEBADANDTHEUGLY • Good (easy, familiar, webhooks) • Bad (references, DTGE-expansion) • Ugly (workarounds requires many requests)
  23. 23. THEFUTUREOFUMBRACOHEADLESS-WISHES • GraphQL !!! • Proteus Block Editor (Grid v2) • Packages “headless ready” • More detailed webhooks • Preview-functionality
  24. 24. SPA+INFRASTRUCTURE
  25. 25. 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
  26. 26. 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
  27. 27. 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)
  28. 28. STRATEGIESFORPERSONALISINGSSR at client bootstrap at 1st user interaction no SSR
  29. 29. BFF
  30. 30. BFF-BESTFRIENDSFOREVER?
  31. 31. BACKEND-FOR-FRONTEND • Performance • data-transformation (+ orchestration) • caching + invalidation (webhook) • (hide backoffice url)
  32. 32. THEDIFFERENCEINPERFORMANCE Traditional html content products content products… w. BFF html combined combined … BFF + SSR html … combined First pageload Next page
  33. 33. PAGE:/DK/BOERN/STOEVLER
  34. 34. [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
  35. 35. UMBRACOCONNECTOR
  36. 36. BFF SPA UMBRACO CONNECTOR
  37. 37. nestjs.com
  38. 38. SERVINGCONTENT
  39. 39. 🦆-typing
  40. 40. BFF SPA UMBRACO CONNECTOR
  41. 41. INSIDEBACKOFFICE the solution-hub for editors
  42. 42. HANDLINGCONTENTFROM OUTSIDEUMBRACO
  43. 43. BFF SPA UMBRACO CONNECTOR
  44. 44. BFF SPA UMBRACO CONNECTOR
  45. 45. BFF APPSEARCHCONNECTOR UMBRACO SPA
  46. 46. APPSEARCH UMBRACO SPA CONNECTOR BFF
  47. 47. BACKOFFICESTYLING
  48. 48. 1-GRIDROWS
  49. 49. 2-REUSINGSPASTYLES
  50. 50. FORMS Umbraco forms from SPA in headless
  51. 51. *
  52. 52. CONCLUSION to infinity and beyond…
  53. 53. CONCLUSION-THEFUTURE… • isUmbracoHeadlessReadyYet.com • Hybrid mode? • grid-expansion • razor-helpers • Make sure your packages are compatible when appropriate
  54. 54. SHARINGISCARING • @impactdk/ngx-cms-formbuilder • @impactdk/ngx-routing-utils • The Umbraco Connector is still WIP, but reach out if you wanna play along
  55. 55. THANKYOU This was “Content as a service with Umbraco headless” We are @filipbech and @matpeder Questions?

×