SlideShare ist ein Scribd-Unternehmen logo
1 von 25
—
Decoupled architecture:
Microservices in the
Middle
02.06.2022
.debug
Andrija Kranjec
Solution Architect | Head of Digital Platforms
Hello!
2012. Java Developer
2017. IBM
– Java Web Developer
– Adobe Experience Manager
– Solution Architect
– Head of Digital Platforms
IBM iX / © IBM Corporation 2
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
IBM iX / © IBM Corporation 4
4
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
Client request (high level)
Deliver SPA based B2C shop with
extensive CMS capabilities.
IBM iX / © IBM Corporation 6
Stack
Overview
IBM iX / © IBM Corporation 7
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
Svak
svog
konja
hvali
IBM iX / © IBM Corporation 9
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
SPA
What is it?
IBM iX / © IBM Corporation 11
IBM iX / © IBM Corporation 12
Ne, to je wellness
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.
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
Client request (high level)
Deliver SPA based B2C shop with
extensive CMS capabilities.
IBM iX / © IBM Corporation 15
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
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
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
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
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
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
Demo
IBM iX / © IBM Corporation 22
IBM iX / © IBM Corporation 23
—
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
IBM iX / © IBM Corporation 25

Weitere ähnliche Inhalte

Ähnlich wie Decoupled architecture: Microservice in the middle

Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
IBM Switzerland
 
Ibm connect 2014 SEKOYA Technologies Spot102
Ibm connect 2014 SEKOYA Technologies Spot102Ibm connect 2014 SEKOYA Technologies Spot102
Ibm connect 2014 SEKOYA Technologies Spot102
Jean-Yves Fiou
 

Ähnlich wie Decoupled architecture: Microservice in the middle (20)

IBM Think 2019 session 2116 - Best practices for operating and managing a pro...
IBM Think 2019 session 2116 - Best practices for operating and managing a pro...IBM Think 2019 session 2116 - Best practices for operating and managing a pro...
IBM Think 2019 session 2116 - Best practices for operating and managing a pro...
 
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
 
3298 microservices and how they relate to esb api and messaging - inter con...
3298   microservices and how they relate to esb api and messaging - inter con...3298   microservices and how they relate to esb api and messaging - inter con...
3298 microservices and how they relate to esb api and messaging - inter con...
 
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
 
DevOps Thinking for the Line of Business
DevOps Thinking for the Line of BusinessDevOps Thinking for the Line of Business
DevOps Thinking for the Line of Business
 
OpenStack Summit: How companies of all sizes leverage OpenStack based private...
OpenStack Summit: How companies of all sizes leverage OpenStack based private...OpenStack Summit: How companies of all sizes leverage OpenStack based private...
OpenStack Summit: How companies of all sizes leverage OpenStack based private...
 
How to Balance System Speed and Risk for Multi-Platform Innovation
How to Balance System Speed and Risk for Multi-Platform InnovationHow to Balance System Speed and Risk for Multi-Platform Innovation
How to Balance System Speed and Risk for Multi-Platform Innovation
 
Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
Integrierte Experten Systeme_Erik-Werner Radtke_IBM Symposium 2013
 
Adobe.com Redesign: Powered by Day CQ5
Adobe.com Redesign: Powered by Day CQ5Adobe.com Redesign: Powered by Day CQ5
Adobe.com Redesign: Powered by Day CQ5
 
IBM Think 2020 Openshift on IBM Z and LinuxONE
IBM Think 2020 Openshift on IBM Z and LinuxONEIBM Think 2020 Openshift on IBM Z and LinuxONE
IBM Think 2020 Openshift on IBM Z and LinuxONE
 
Informix 1210 feature overview
Informix 1210 feature overviewInformix 1210 feature overview
Informix 1210 feature overview
 
Lessons learned from the worlds largest XPage project
Lessons learned from the worlds largest XPage projectLessons learned from the worlds largest XPage project
Lessons learned from the worlds largest XPage project
 
App Modernization
App ModernizationApp Modernization
App Modernization
 
Praxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloudPraxistaugliche notes strategien 4 cloud
Praxistaugliche notes strategien 4 cloud
 
Ibm connect 2014 SEKOYA Technologies Spot102
Ibm connect 2014 SEKOYA Technologies Spot102Ibm connect 2014 SEKOYA Technologies Spot102
Ibm connect 2014 SEKOYA Technologies Spot102
 
Transforming to Microservices
Transforming to MicroservicesTransforming to Microservices
Transforming to Microservices
 
Gartner EA Architecting for DevOps and Hybrid Cloud
Gartner EA Architecting for DevOps and Hybrid CloudGartner EA Architecting for DevOps and Hybrid Cloud
Gartner EA Architecting for DevOps and Hybrid Cloud
 
MWLUG 2017: BP107 Plotting the Path for your IBM Domino Applications
MWLUG 2017: BP107 Plotting the Path for your IBM Domino Applications MWLUG 2017: BP107 Plotting the Path for your IBM Domino Applications
MWLUG 2017: BP107 Plotting the Path for your IBM Domino Applications
 
UrbanCode Deploy DevOps Best Practices
UrbanCode Deploy  DevOps Best PracticesUrbanCode Deploy  DevOps Best Practices
UrbanCode Deploy DevOps Best Practices
 
Developing XPages Applications
Developing XPages ApplicationsDeveloping XPages Applications
Developing XPages Applications
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Kürzlich hochgeladen (20)

Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

Decoupled architecture: Microservice in the middle

  • 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

Hinweis der Redaktion

  1. MPA: full HTML is always requested. Whole page has to be loaded SPA: data is fetched in JSON format, just fetches what really changes. But has to load a bigger portion at starup (loading assets + parsing, Can be improved with SSR). But when assets cached, following requests are fast.