SlideShare a Scribd company logo
HEADLESS
The Future of Ecommerce
WHAT IS HEADLESS?
MONOLITHIC WEBSHOPS
One system connected
front and back-end
FRONT-END
BACK-END
HEADLESS WEBSHOPS
Three services, front and back-end
Communicating through APIs.
FRONT-END
BACK-END
API
A headless architecture
| removes the “head” on your CMS, which gives front-end
developers the flexibility to pull content using an API.
WHY HEADLESS
There are two main advantages
PERFORMANCE MODULAR SYSTEM
WHY WE NEED PERFORMANCE?
With 1 second delay
page speed on Desktop
The conversion rate
Decrease with 21.8%
53.2% of all visitors
leaves a website when the
page loads in
3 seconds or higher
1 second delay costs on
a webshop with €100k
with turnover per day
lost €2.5 million per year
These numbers from 2016
https://tokrcbd.com https://therake.com
CASE STUDY
TheRake.com
- ReactJS front-end
- Node JS Server
- Headless Magento 2
- Wordpress
WHY NEED MODULAR SYSTEM?
HEADLESS WEBSHOPS
FRONT-END
API
BACK-END
BACKEND OF FRONTEND
FRONT-END
API
WHAT DOES THIS MEANS
FOR DEVELOPERS?
Isolate Microservices
Real focus on functionality
Instead of compatibility
and interference
Super fast development More Specialist.
Frontend and backend
developers work
separately.
VISION FOR THE FUTURE
MICROSERVICES AND PWA APPROACH IS THE FUTURE OF ECOMMERCE
HEADLESS ECOMMERCE SOLUTIONS
- PWA Studio — Venia Theme Demo:
https://veniapwa.com/
- Deity Falcon: https://demo.deity.io/
- Vue Storefront: https://demo.vuestorefront.io/
- Angular Storefront: TBD
THANK YOU

More Related Content

What's hot

NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep DiveNY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
Paul Calvano
 
Composale DXP with MACH architecture.pptx
Composale DXP with MACH architecture.pptxComposale DXP with MACH architecture.pptx
Composale DXP with MACH architecture.pptx
Pieter Brinkman
 
FEVR - Micro Frontend
FEVR - Micro FrontendFEVR - Micro Frontend
FEVR - Micro Frontend
Miki Lombardi
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Rajnirani18
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner ppt
Dipika Wadhvani
 
Websites 101 PowerPoint Presentation
Websites 101 PowerPoint PresentationWebsites 101 PowerPoint Presentation
Websites 101 PowerPoint Presentation
webhostingguy
 
Website design with Wordpress ppt
Website design with Wordpress pptWebsite design with Wordpress ppt
Website design with Wordpress ppt
WTACADEMY5
 
SEO for Ecommerce: A Comprehensive Guide
SEO for Ecommerce: A Comprehensive GuideSEO for Ecommerce: A Comprehensive Guide
SEO for Ecommerce: A Comprehensive Guide
Adam Audette
 
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul ShapiroRedefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Paul Shapiro
 
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering BudgetBrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
Botify
 
Seo
SeoSeo
web development
web developmentweb development
web development
Sevajothi Crafts
 
The 30 Minute Website Audit - Using Google to Make Your Website More Effective
The 30 Minute Website Audit - Using Google to Make Your Website More EffectiveThe 30 Minute Website Audit - Using Google to Make Your Website More Effective
The 30 Minute Website Audit - Using Google to Make Your Website More Effective
WebLink International
 
Content Management Systems
Content Management SystemsContent Management Systems
Content Management Systems
sahig123
 
Web AR
Web ARWeb AR
Website development proposal - Leadtrance Technologies
Website development proposal - Leadtrance TechnologiesWebsite development proposal - Leadtrance Technologies
Website development proposal - Leadtrance Technologies
Leadtrance Technologies
 
Web 3.0 - The Future of Web
Web 3.0 - The Future of WebWeb 3.0 - The Future of Web
Web 3.0 - The Future of Web
Marcelo Serpa
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
Matt Raible
 
Sharepoint
SharepointSharepoint
Sharepoint
Naqash Ahmed
 
contentful_sec
contentful_seccontentful_sec
contentful_sec
Gowrishankar V
 

What's hot (20)

NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep DiveNY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
NY WebPerf Sept '22 - Performance Mistakes - An HTTP Archive Deep Dive
 
Composale DXP with MACH architecture.pptx
Composale DXP with MACH architecture.pptxComposale DXP with MACH architecture.pptx
Composale DXP with MACH architecture.pptx
 
FEVR - Micro Frontend
FEVR - Micro FrontendFEVR - Micro Frontend
FEVR - Micro Frontend
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
 
Basic WordPress for Beginner ppt
Basic WordPress for Beginner pptBasic WordPress for Beginner ppt
Basic WordPress for Beginner ppt
 
Websites 101 PowerPoint Presentation
Websites 101 PowerPoint PresentationWebsites 101 PowerPoint Presentation
Websites 101 PowerPoint Presentation
 
Website design with Wordpress ppt
Website design with Wordpress pptWebsite design with Wordpress ppt
Website design with Wordpress ppt
 
SEO for Ecommerce: A Comprehensive Guide
SEO for Ecommerce: A Comprehensive GuideSEO for Ecommerce: A Comprehensive Guide
SEO for Ecommerce: A Comprehensive Guide
 
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul ShapiroRedefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
 
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering BudgetBrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
BrightonSEO 2019 - Crawl Budget is dead, please welcome Rendering Budget
 
Seo
SeoSeo
Seo
 
web development
web developmentweb development
web development
 
The 30 Minute Website Audit - Using Google to Make Your Website More Effective
The 30 Minute Website Audit - Using Google to Make Your Website More EffectiveThe 30 Minute Website Audit - Using Google to Make Your Website More Effective
The 30 Minute Website Audit - Using Google to Make Your Website More Effective
 
Content Management Systems
Content Management SystemsContent Management Systems
Content Management Systems
 
Web AR
Web ARWeb AR
Web AR
 
Website development proposal - Leadtrance Technologies
Website development proposal - Leadtrance TechnologiesWebsite development proposal - Leadtrance Technologies
Website development proposal - Leadtrance Technologies
 
Web 3.0 - The Future of Web
Web 3.0 - The Future of WebWeb 3.0 - The Future of Web
Web 3.0 - The Future of Web
 
The Future Of Web Frameworks
The Future Of Web FrameworksThe Future Of Web Frameworks
The Future Of Web Frameworks
 
Sharepoint
SharepointSharepoint
Sharepoint
 
contentful_sec
contentful_seccontentful_sec
contentful_sec
 

Similar to Headless Architecture

Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa
Divante
 
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
Meet Magento Italy
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
DaljeetSingh210
 
Component Art
Component ArtComponent Art
Component Art
Momentum Design Lab
 
Oracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservicesOracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservices
Alberto Salazar
 
Vue Storefront MUG
Vue Storefront MUGVue Storefront MUG
Vue Storefront MUG
Filip Rakowski
 
eCommerce Performance: What is it costing you, and what can you do about it? ...
eCommerce Performance: What is it costing you, and what can you do about it? ...eCommerce Performance: What is it costing you, and what can you do about it? ...
eCommerce Performance: What is it costing you, and what can you do about it? ...
Internet World
 
Magento 2 overview. Alan Kent
Magento 2 overview. Alan Kent Magento 2 overview. Alan Kent
Magento 2 overview. Alan Kent
MeetMagentoNY2014
 
SAP Technology QUICK overview
SAP Technology QUICK overviewSAP Technology QUICK overview
SAP Technology QUICK overview
Michelle Crapo
 
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
Alberto Salazar
 
#JavadayEcuador Monolith to Microservices
#JavadayEcuador Monolith to Microservices#JavadayEcuador Monolith to Microservices
#JavadayEcuador Monolith to Microservices
Alberto Salazar
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
Scaling an eCommerce environment
Scaling an eCommerce environmentScaling an eCommerce environment
Scaling an eCommerce environment
Sander Mangel
 
mes-scada-101015064014-phpapp02.pdf
mes-scada-101015064014-phpapp02.pdfmes-scada-101015064014-phpapp02.pdf
mes-scada-101015064014-phpapp02.pdf
NgcThinNguyn10
 
Magento for-performance- v01
Magento for-performance- v01Magento for-performance- v01
Magento for-performance- v01
Rajneesh Maurya
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
george.james
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
Divante
 
Oracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to MicroservicesOracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to Microservices
Alberto Salazar
 
SwiftAnt EDI Services_Microsoft Gold Partner
SwiftAnt EDI Services_Microsoft Gold PartnerSwiftAnt EDI Services_Microsoft Gold Partner
SwiftAnt EDI Services_Microsoft Gold Partner
Venkat Santhosh Subramanian
 
Mes Scada
Mes Scada Mes Scada
Mes Scada
ROBOSOFT
 

Similar to Headless Architecture (20)

Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa Game changer for e-commerce - Vue Storefront - open source pwa
Game changer for e-commerce - Vue Storefront - open source pwa
 
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
Guillaume Thibaux - Can we win the fight against performance bottlenecks? Les...
 
Word press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs convertedWord press with react – implementing headless wordpress with reactjs converted
Word press with react – implementing headless wordpress with reactjs converted
 
Component Art
Component ArtComponent Art
Component Art
 
Oracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservicesOracle Code One San Francisco - Monolith to microservices
Oracle Code One San Francisco - Monolith to microservices
 
Vue Storefront MUG
Vue Storefront MUGVue Storefront MUG
Vue Storefront MUG
 
eCommerce Performance: What is it costing you, and what can you do about it? ...
eCommerce Performance: What is it costing you, and what can you do about it? ...eCommerce Performance: What is it costing you, and what can you do about it? ...
eCommerce Performance: What is it costing you, and what can you do about it? ...
 
Magento 2 overview. Alan Kent
Magento 2 overview. Alan Kent Magento 2 overview. Alan Kent
Magento 2 overview. Alan Kent
 
SAP Technology QUICK overview
SAP Technology QUICK overviewSAP Technology QUICK overview
SAP Technology QUICK overview
 
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
Oracle code bogota-Handle the Complexity of Migrate to Microservices from Mon...
 
#JavadayEcuador Monolith to Microservices
#JavadayEcuador Monolith to Microservices#JavadayEcuador Monolith to Microservices
#JavadayEcuador Monolith to Microservices
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
Scaling an eCommerce environment
Scaling an eCommerce environmentScaling an eCommerce environment
Scaling an eCommerce environment
 
mes-scada-101015064014-phpapp02.pdf
mes-scada-101015064014-phpapp02.pdfmes-scada-101015064014-phpapp02.pdf
mes-scada-101015064014-phpapp02.pdf
 
Magento for-performance- v01
Magento for-performance- v01Magento for-performance- v01
Magento for-performance- v01
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
 
Oracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to MicroservicesOracle Code Javaday Sao Paulo Monolith_to Microservices
Oracle Code Javaday Sao Paulo Monolith_to Microservices
 
SwiftAnt EDI Services_Microsoft Gold Partner
SwiftAnt EDI Services_Microsoft Gold PartnerSwiftAnt EDI Services_Microsoft Gold Partner
SwiftAnt EDI Services_Microsoft Gold Partner
 
Mes Scada
Mes Scada Mes Scada
Mes Scada
 

More from Amandeep Singh

Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to docker
Amandeep Singh
 
Simple ci cd with strider cd
Simple ci cd with strider cdSimple ci cd with strider cd
Simple ci cd with strider cd
Amandeep Singh
 
Ssh tunnel
Ssh tunnelSsh tunnel
Ssh tunnel
Amandeep Singh
 
Progressive Web Application
Progressive Web ApplicationProgressive Web Application
Progressive Web Application
Amandeep Singh
 
Content Delivery Using Amazon CloudFront
Content Delivery Using Amazon CloudFrontContent Delivery Using Amazon CloudFront
Content Delivery Using Amazon CloudFront
Amandeep Singh
 
Software architectures
Software architecturesSoftware architectures
Software architectures
Amandeep Singh
 

More from Amandeep Singh (6)

Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to docker
 
Simple ci cd with strider cd
Simple ci cd with strider cdSimple ci cd with strider cd
Simple ci cd with strider cd
 
Ssh tunnel
Ssh tunnelSsh tunnel
Ssh tunnel
 
Progressive Web Application
Progressive Web ApplicationProgressive Web Application
Progressive Web Application
 
Content Delivery Using Amazon CloudFront
Content Delivery Using Amazon CloudFrontContent Delivery Using Amazon CloudFront
Content Delivery Using Amazon CloudFront
 
Software architectures
Software architecturesSoftware architectures
Software architectures
 

Recently uploaded

Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
Envertis Software Solutions
 
Manyata Tech Park Bangalore_ Infrastructure, Facilities and More
Manyata Tech Park Bangalore_ Infrastructure, Facilities and MoreManyata Tech Park Bangalore_ Infrastructure, Facilities and More
Manyata Tech Park Bangalore_ Infrastructure, Facilities and More
narinav14
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
dakas1
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
Reetu63
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
Maitrey Patel
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
Luigi Fugaro
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
campbellclarkson
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
Alberto Brandolini
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
kgyxske
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
kalichargn70th171
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
Patrick Weigel
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
vaishalijagtap12
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
Alina Yurenko
 

Recently uploaded (20)

Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdfBaha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
Baha Majid WCA4Z IBM Z Customer Council Boston June 2024.pdf
 
What’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete RoadmapWhat’s New in Odoo 17 – A Complete Roadmap
What’s New in Odoo 17 – A Complete Roadmap
 
Manyata Tech Park Bangalore_ Infrastructure, Facilities and More
Manyata Tech Park Bangalore_ Infrastructure, Facilities and MoreManyata Tech Park Bangalore_ Infrastructure, Facilities and More
Manyata Tech Park Bangalore_ Infrastructure, Facilities and More
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
ppt on the brain chip neuralink.pptx
ppt  on   the brain  chip neuralink.pptxppt  on   the brain  chip neuralink.pptx
ppt on the brain chip neuralink.pptx
 
ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.ACE - Team 24 Wrapup event at ahmedabad.
ACE - Team 24 Wrapup event at ahmedabad.
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
WMF 2024 - Unlocking the Future of Data Powering Next-Gen AI with Vector Data...
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
WWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders AustinWWDC 2024 Keynote Review: For CocoaCoders Austin
WWDC 2024 Keynote Review: For CocoaCoders Austin
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
 

Headless Architecture

Editor's Notes

  1. Hi everyone. I’m Amandeep. Today I will tell you something about Headless technology and why this is the future of Ecommerce. Why we are talking this today? As I got a lead few days back for a ecommerce website. Then I was searching for the right solution. Then I came across about this revolutionary Headless term.
  2. So what is Headless?
  3. First talk about the Monolithic webshop, where one system is tightly connected to other. Like frontend is tightly coupled with backend application.
  4. And In the headless setup, you are basically using three services. Frontend backend and the APIs. Frontend is communicating with backend through APIs. These things are fully fully separate. We can really place then in a separate servers and your team can work independently without interfering with each others. So frontend can be any frontend technology like React. APIs can be in NodeJS. And Backend is using Magento or any other Ecommerce solution. So NodeJs basically communicating with Magento through APIs.
  5. So why need to use Headless approach. So basically there are two advantages. One of them is Performance and the second is Modular System.
  6. So Let’s discuss performance. Why we need Performance? We all know with 1 second delay on page speed on Desktop, the conversion rate decrease with 21.8%. 53.2% of all visitors leaves a website when a page loads takes longer than 3 seconds or higher. And with 1 second delay, if you have a webshop with turnover 100 thousand euros per day, you will lost 2.5 million euros per year. That is a huge. These all numbers are from 2016. If we check the numbers from previous years like from 2013 or 2014, this numbers would have been much higher, because at that time page load speed was low. The page which is loading in only 3 sec today, must be taking more than 10 seconds few years back. So the loss was much higher previously. So you got it like why we need performance.
  7. Let check an example. One side we have a inhouse project “The tokr CBD” which is using traditional Magento and other side we have a website “The Rake” which is following Headless architecture. Here on google page speed website, this is a comparison. Page load speed of tokrCBD is much higher that the “The Rake.com”. But Actually “The Rake.com” is much faster, let me explain why?
  8. So you had seen the comparisons why “TheRake.com” is fast. Why its performance is so fast as comparison to “ThetokrCBd”. Why this is happening? Because TheRake.com is using ReactJS framework on the frontend. Node JS server running in the back which is further interacting with Magento and Wordpress for ecommerce and blog. And They have build it as Single page application. If we are using React, it basically load whole page in single attempt. It always reuse the common HTML and replace only dynamic content. You donot need to communicate with server for the whole content again and again. That’s why it is more fast. NodeJS is obviously a asynchronous and Non blocking programming language, that's why it is more fast as compared to other scripting language like PHP. because it can handle the tasks parallel ally. As we know in Single page application we have everything loads already. Only dynamic content changing. But we know google does not read dynamic content, it means you some lack lacks in SEO part. That why they are using one more thing which is know as Server Side rendering with the help of NodeJS server. Which render everything at the server end and send already rendered content to client end. Which is more fast.
  9. Let’s come to second advantage of Headless architecture that is Modular system. We not about need speed, we also need a Modular system. Why we need Modular system? In tradition webshops using Magento, we have number of services which are tightly coupled. If at some point of time we got problem in any service our whole webshop is down. If we want to replace a component or any service then it is very hard to change because everything is very tightly coupled.
  10. But in Headless Webshop. It is very different. Everything is decoupled. As we have Frontend, APis and Backend which all are isolated. Backend is not one thing, it is built of multiple independent component like Magento, wordpress or Paypal or any other service. We can replace any service with any other service without hampering other services.
  11. Let’s talk about the middle layer, which is NodeJS. Which is communicating with backend and providing data to Frontend. Here we are creating different services to communicate with Backend like Magento, wordpress or any other service like Paypal. If we directly integrate the Frontend with Magento by using its APIs, then you need to code in Frontend to implement those service. And If you want to change Magento with any other ecommerce then it is quite difficult. In NodeJS we can easily replace any service with other service in few hours. This is the power of Modular System, everything is decoupled and independent.
  12. WHat does this means to Developer? Isolated microservices, which have real focus on functionality instead of compatibility and interference. Super fast development, like If we want to replace frontend, we can easily do in 40-100 hours. More specialist. Because everyone is working at different layers.
  13. So what is the vision for the future? Microservices and PWA is the future of ecommerce. Magento is also moving towards this approach and working on PWA Studio.
  14. Here are 4 HEADLESS ecommerce solutions that I found during search. Vue storefront is more complete, if we compare all four. You can search them on internet and study more about them. And plan for any future ecommerce application.