apidays Paris 2022 - APIs the next 10 years: Software, Society, Sovereignty, Sustainability December 14, 15 & 16, 2022 How GraphQL accelerates B2B Composable Commerce Marco Egli, Senior Consultant and Solution Architect at Intelliact AG ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/ Deep dive into the API industry with our reports: https://www.apidays.global/industry-reports/ Subscribe to our global newsletter: https://apidays.typeform.com/to/i1MPEW

1. Intelliact AG
Siewerdtstrasse 8
CH-8050 Zürich
T. +41 (44) 315 67 40
mail@intelliact.ch
www.intelliact.ch
How GraphQL accelerates B2B
Composable Commerce
Marco Egli, Intelliact AG, 16.12.2022
https://www.linkedin.com/in/marco-egli-intelliact/
APIDAYS PARIS 2022

2. https://www.linkedin.com/in/marco-egli-intelliact/
APIDAYS PARIS 2022
2

3. 2023 SERIES OF EVENT
New York
May 16&17
Australia
October 11&12
Singapore
April 12&13
Helsinki & North
June 5&6
Paris
SEPTEMBER
London
November
15&16
June 28-30
SILICON VALLEY
March 14&15
Dubai & Middle East
February 22&23

4. 3
Photo by Kenny Eliason on Unsplash

5. 4
Photo by Alexander Grey on Unsplash

6. 5
Photo by Robert Anasch on Unsplash
Quantity

7. Products our B2B commerce customers sell
APIDAYS PARIS 2022
6

8. For B2B products, other attributes are important
APIDAYS PARIS 2022
7
Length
Connector B
Connector A
Implant System Platform
Platform Drills
Torque Ratchet
The sum of the parts results in the functional product
1 NC + 1 NO
1 NC + 1 NO
Screw Terminal
Gold Contacts

9. For B2B products, other attributes are important
APIDAYS PARIS 2022
8
Length
Connector B
Connector A
Implant System Platform
Platform Drills
Torque Ratchet
The sum of the parts results in the functional product
1 NC + 1 NO
1 NC + 1 NO
Screw Terminal
Gold Contacts
Configurable Products

10. https://shop.thommenmedical.com
APIDAYS PARIS 2022
UX and visual design by Eyekon https://eyekon.ch/

11. THOMMEN MEDICAL E-SHOP
From Customer Journey to Architecture:
Many ways to find the needed product
10

12. Customer Journey: many ways to find the needed product
APIDAYS PARIS 2022
11
Navigation in den Kategorien
User Journeys durch die Ansichten und Funktionen
4
Favoriten
Produktfilter
Bundle Promo Gutschein
einlösen
Bezahl-
möglichkeiten
Verfügbarkeit
Verfügbarkeit
Kons.lager
Zusatz-
produkte
Konfigurator
Produktdetails
Bundle Promo
Produktpreise
(Brutto)
Land (Währung) / Sprache
Katalog-
ansicht
Kategorien
Suche
Produktlisten
Produkt-
detail
Check-Out
Adressen
Bezahlung
myThommen
Favoriten
Meine Daten
Produktpreise
(Brutto)
Warenkorb
Adressen
Produktpreise
(Brutto)
Kunde
Warenkörbe/
Offene
Bestellungen
Spezial
Angebote
Kundenlisten
Kundenerfas-
sung/ -Freigaben Bundles
Gutscheine
«agiere als
Kunde»
Katalogbereich Konto-Verwaltung Intern / Sales Agent
Zusatz-
produkte
Scan Planungs-
ergebnis
Excel-Import
Scan to
Warenkorb
Helper Tools
Bestellung
Staffelung der
Lieferung
Produktlisten
Produktlisten
Versand
Order Tracking
Produktliste
Bundle Promo
Dashboard
Bestellliste
Gutscheine
Produktlisten
(häufig gekauft)
In Kategorien
Einstieg
Landing Page
Favoriten
Suche
Produktlisten
(Featured)
News
Commerce-Bereich
Search Engine
(Google)
Echtzeit-
Zusammenarbeit
mit AD, SA
Echtzeit-
Zusammenarbeit
mit SA, AD
Staffelung der
Lieferung
Bestellliste
Gutscheine
Meine
Mitarbeiter
Legende:
1. Generalistin: Klassische Suche
2. Expertin: Digitaler Workflow
3. Praxis Assistentin: Bestellung
4. Sales Agent/AD/(ID): Beratung
5. Distributor: Grossbestellung
Each user group searches for products individually

13. Navigating through the categories to the product
APIDAYS PARIS 2022
12
Navigating in the categories

14. Scan-to-Cart
APIDAYS PARIS 2022
13
Scan-to-Cart

15. Search on Google
APIDAYS PARIS 2022
14
Search on Google

16. Matching products, tools, accessories
APIDAYS PARIS 2022
15
Suche bei Google
Matching products, tools, accessories

17. «A standard shop solution solves 80% of use cases with
normal effort. The individual 20% and all future, new features
cost many times more.»
16

18. «A standard shop solution solves 80% of use cases with
normal effort. The individual 20% and all future, new features
cost many times more.»
17
The product model must match the business model

19. The frontend for the customers is tailor-
made to the customers' use case and to the
uniqueness of the product sold.
The building blocks used are standard
building blocks and guarantee high
robustness and scalability.
Multi-Markets
Multi-Languages
Almost infinite parallel users
The interfaces are powered by GraphQL
(wherever possible) and JSON-APIs
Architecture: Composable Commerce
APIDAYS PARIS 2022
18
OMS
PWA
CMS
API,
GraphQL
Search
Payment
Analytics
ERP
MAM

20. The frontend for the customers is tailor-
made to the customers' use case and to the
uniqueness of the product sold.
The building blocks used are standard
building blocks and guarantee high
robustness and scalability.
Multi-Markets
Multi-Languages
Almost infinite parallel users
The interfaces are powered by GraphQL
(wherever possible) and JSON-APIs
Architecture: Composable Commerce
APIDAYS PARIS 2022
19
OMS
PWA
CMS
Search

21. A headless CMS with integrated media management and a
GraphQL interface provides the category structure and
additional products content: Hygraph (GraphCMS)
A headless commerce and distributed order management
enables a globally uniform user experience: CommerceLayer
A lightning fast search finds products and categories even
with inaccurate entries: Algolia
The ERP is the backbone for master data and order
processing. The event driven interface enables agile
development: SAP + CAS
The Stack
APIDAYS PARIS 2022
20
1) Intelliact AG is an independent service agency. The software used was
selected for this specific use case. Each situation is evaluated individually.
2) All logos used are under copyright protection

22. «In the composable enterprise architecture, the tech stack is
built on cloud services and capabilities, which can be well
described with the MACH definition, focusing on flexibility,
scalability and APIs.»
21

23. «In the composable enterprise architecture, the tech stack is
built on cloud services and capabilities, which can be well
described with the MACH definition, focusing on flexibility,
scalability and APIs.»
22
And this is where it gets handy with GraphQL

24. Navigating through the categories to the product
APIDAYS PARIS 2022
23

25. Scan-to-Cart
APIDAYS PARIS 2022
24
Scan-to-Cart

26. Search on Google
APIDAYS PARIS 2022
25
Search on Google

27. Matching products, tools, accessories
APIDAYS PARIS 2022
26
Suche bei Google
Matching products, tools, accessories

28. «With GraphQL, different views on the same data are possible. In
the frontend, the relevant data can be retrieved according to the
situation without having to make any changes in the backend.
This enables flexible, independent and fast development.»
27

29. «With GraphQL, different views on the same data are possible. In
the frontend, the relevant data can be retrieved according to the
situation without having to make any changes in the backend.
This enables flexible, independent and fast development.»
28
Fewer requests with no overfetching increase performance

30. From zero to feature complete in 6 months
App package size on initial load: 250 kB
Add item to cart in Zurich: 100 ms
Add item to cart in Singapore: 100 ms
Navigating the categories: instant, everywhere
Performance matters
APIDAYS PARIS 2022
29
Lighthouse
Report in December 2022
https://webpagetest.org/
Report in August, Europe

31. Verdict of the Jury for the 5 Awards at Best of Swiss Web 2022
„The Thommen Medical B2B webshop is a lightning-fast solution with a very
wide range of functions. The jury particularly liked how the complexity of the
application scope was handled. The shop is mature and can be used easily. The
implementation is flawless and has a modern integrated architecture all the
way to the ERP backend.“

32. With GraphQL, the following goals were easily achieved
Short time to market
To underline Thommen Medicals claim: “Driven by science, not trends.”
Low Risk for vendor lock-in
No redundant data management
Easy Integration with existing content
High developer productivity with interfaces for complex B2B functions
Photo by Anders Jildén on Unsplash

33. https://hmi.eao.com
APIDAYS PARIS 2022
UX and visual design by Eyekon https://eyekon.ch/
Gold in «Productivity»
Silver in «Digital Commerce» and «Business»
Bronze in «Usability»

34. Products in hundreds of thousands of variants
33
Series: 82 Series: 45
Show new product variants on what pages?

35. Products: Multiple Classification
34
Function: Emergency stop switch
Market: Rail transport
Application: Crane vehicles
Series: 82
Function: lluminated pushbutton
Series: 45
Function: Stop switch
Market: Heavy Duty
Market: Machinery
Market: Heavy Duty
Application: Crane vehicles
Application: Construction Machinery
Application: Toilet facilities
Application: Passenger convenience

36. Products: Multiple Classification
35
Function: Emergency stop switch
Market: Rail transport
Application: Crane vehicles
Series: 82
Function: lluminated pushbutton
Series: 45
Function: Stop switch
Market: Heavy Duty
Market: Machinery
Market: Heavy Duty
Application: Crane vehicles
Application: Construction Machinery
Application: Toilet facilities
Application: Passenger convenience
GraphQL allows nested queries

37. B2B Commerce that scales
Typed product model that supports the customer journey
Stable API for all transactional business logic
Flexible GraphQL for all product content to the frontend
Short
Lifecycles
Long
Lifecycles
Forward compatibility for SPAs and mobile apps
Photo by Mario Dobelmann on Unsplash

38. Keep Playing!
Photo by Robert Collins on Unsplash

39. 38

40. 39
Abstract: Thommen Medical's award-winning B2B webshop was developed from
the first workshop to feature complete within 6 months. This speed was made
possible by Composable Commerce and a MACH architecture. GraphQL made it
possible to satisfy the diverse needs of the end customers flexibly and precisely on
the track from customer journey to success.

41. Senior Consultant & Solution Architect
at Intelliact since 2001
Studied mechanical engineering at the ETH Zurich
Immense wealth of experience with successful product
lifecycle management projects
Designed and developed innovative applications using
current internet technologies and methodology for
companies operating worldwide
Marco Egli
APIDAYS PARIS 2022
40
www.intelliact.ch/en/marco-egli
https://www.linkedin.com/in/marco-egli-intelliact/