Besides a general comparison of a traditional versus decoupled architecture, within this presentation, we will present a demo of an architectural approach where a microservice layer is used to connect to the CMS/eCommerce backend with an experience layer in form of a single page application. Is that an overkill? Is the microservice in between just a fancy proxy? Let's find out.

1. —
Decoupled architecture:
Microservices in the
Middle
02.06.2022
.debug
Andrija Kranjec
Solution Architect | Head of Digital Platforms

2. Hello!
2012. Java Developer
2017. IBM
– Java Web Developer
– Adobe Experience Manager
– Solution Architect
– Head of Digital Platforms
IBM iX / © IBM Corporation 2

3. IBM iX / © IBM Corporation 3
Reinventing business,
improving experience,
inspiring people.
What
we do?
We advise
Strategic consulting with
in-depth technology and
industry expertise
We create
Experience design and
communication with an
impact
We build
Engineering &
development of
platforms, services &
products
We operate
Agile management,
workflows and
implementation

4. IBM iX / © IBM Corporation 4
4

5. Agenda
Client request
Stack Overview
 CMS
 ecommerce
 SPA - What is that?
Potential Approaches
 Vendor-led
 Fully Decoupled
Demo
 Overview
 Action
IBM iX / © IBM Corporation 5

6. Client request (high level)
Deliver SPA based B2C shop with
extensive CMS capabilities.
IBM iX / © IBM Corporation 6

7. Stack
Overview
IBM iX / © IBM Corporation 7

8. CMS
CMS is software that helps users create, manage, and
modify content on a website without the need for
specialized technical knowledge.
Adobe Experience Manager
 Java based enterprise CMS
 Non-technical marketers can build pages with just a few
drag and drops
IBM iX / © IBM Corporation 8

9. Svak
svog
konja
hvali
IBM iX / © IBM Corporation 9

10. ecommerce
An ecommerce platform is the software a business
employs to handle all their B2B and B2C ecommerce
needs. These needs include product pages, reviews,
transactions, order fulfillment, customer support and
returns.
IBM iX / © IBM Corporation 10

11. SPA
What is it?
IBM iX / © IBM Corporation 11

12. IBM iX / © IBM Corporation 12
Ne, to je wellness

13. Multi-Page Experience Single-Page Experience
IBM iX / © IBM Corporation 13
Loading time
Loading time
• Each page is requested as full page.
• Creates overhead of loading and parsing each page
completely
• But fast on initial load of first page
• Page content is fetched as JSON objects, so no full page
reload and parsing of HTML/JS/CSS is needed when
navigating
• Therefore a bigger base shell/framework has to be loaded
when entering the page.

14. IBM iX / © IBM Corporation 14
Differences SPA vs. MPA
Single Page Experience Multi Page Experience
Response time
Fast for multiple page visits
Only fetches changed portions
Slower (but fast for first request)
Always fetches the whole page
Coupling Highly decoupled from Backend Tight coupling of FE and BE
Development workflow
Simple
Front & Back-end engineer agree on JSON and
can work more independently.
Complex
Frontend and Backend Engineers are both working on HTML
Development complexity
High
Separate FE and BE applications which need to work together
Simple
Static HTML will be rendered by CMS
SEO optimizations
Might require some effort
SSR can mitigate problems
Works as-is
Search Engines can easily parse HTML
Accessibility
Might require some effort
Dynamic updates can be hard for Screen readers
Works as-is
But might also require some work if still
dynamic updates are needed

15. Client request (high level)
Deliver SPA based B2C shop with
extensive CMS capabilities.
IBM iX / © IBM Corporation 15

16. IBM iX / © IBM Corporation 16
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Vendor-led
XM vendor delivers the
whole experience layer.
Other Systems are
integrated.
• Rely on vendor vision
• Out-of-the-box
functionality
• Out-of-the-box
integrations (suite)
• Vendor lock-in on
presentation layer
• Low flexibility

17. IBM iX / © IBM Corporation 17
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Vendor-led
XM vendor delivers the
whole experience layer.
Other Systems are
integrated.
• Rely on vendor vision
• Out-of-the-box
functionality
• Out-of-the-box
integrations (suite)
• Vendor lock-in on
presentation layer
• Low flexibility

18. IBM iX / © IBM Corporation 18
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Fully Decoupled
Decoupled Frontend
connects to an API. XM
acts behind the API-
layer.
• Highly re-usable and
Cloud Native
• Future-proof: Flexibility
for transformation
• Separation of layers and
concerns
• Editor Experience might
change

19. IBM iX / © IBM Corporation 19
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Fully Decoupled
Decoupled Frontend
connects to an API. XM
acts behind the API-
layer.
• Highly re-usable and
Cloud Native
• Future-proof: Flexibility
for transformation
• Separation of layers and
concerns
• Editor Experience might
change

20. IBM iX / © IBM Corporation 20
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Vendor-led
XM vendor delivers the
whole experience layer.
Other Systems are
integrated.
• Rely on vendor vision
• Out-of-the-box
functionality
• Out-of-the-box
integrations (suite)
• Vendor lock-in on
presentation layer
• Low flexibility
Fully Decoupled
Decoupled Frontend
connects to an API. XM
acts behind the API-
layer.
• Highly re-usable and
Cloud Native
• Future-proof: Flexibility
for transformation
• Separation of layers and
concerns
• Editor Experience might
change

21. IBM iX / © IBM Corporation 21
Potential
Approaches
The decision depends on
the status quo, the
strategy, and the vision for
the future.
Vendor-led
XM vendor delivers the
whole experience layer.
Other Systems are
integrated.
• Rely on vendor vision
• Out-of-the-box
functionality
• Out-of-the-box
integrations (suite)
• Vendor lock-in on
presentation layer
• Low flexibility
Fully Decoupled
Decoupled Frontend
connects to an API. XM
acts behind the API-
layer.
• Highly re-usable and
Cloud Native
• Future-proof: Flexibility
for transformation
• Separation of layers and
concerns
• Editor Experience might
change
Our Approach

22. Demo
IBM iX / © IBM Corporation 22

23. IBM iX / © IBM Corporation 23

24. —
IBM iX Croatia
Andrija Kranjec
Solution Architect | Head of Digital Platforms Adobe
IBM iX Croatia d.o.o.
24
Zagreb
Radnička cesta 37a
andrija.kranjec@ibm.com
IBM iX Croatia d.o.o., Kapucinski trg 5, 42000 Varaždin | P +385-42-421175
Upisano kod Trgovačkog suda u Varaždinu pod brojem (MBS) 070135022
Temeljni kapital: 20.000,00 kuna - uplaćen u cijelosti
Uprava društva: direktor David Stöger, direktor Mario Horvat
IBAN HR1324840081107487042 otvoren kod RAIFFEISENBANK AUSTRIA d.d., Zagreb
Izjavu o zaštiti osobnih podataka možete pronaći ovdje.
www.ibmix.hr

25. IBM iX / © IBM Corporation 25