More Related Content
What's hot
What's hot (20)
Similar to Headless Architecture
Similar to Headless Architecture (20)
More from Amandeep Singh
Recently uploaded
Recently uploaded (20)
Headless Architecture
- 1. HEADLESS The Future of Ecommerce
- 3. MONOLITHIC WEBSHOPS One system connected front and back-end FRONT-END BACK-END
- 4. HEADLESS WEBSHOPS Three services, front and back-end Communicating through APIs. FRONT-END BACK-END API
- 5. A headless architecture | removes the “head” on your CMS, which gives front-end developers the flexibility to pull content using an API.
- 6. WHY HEADLESS There are two main advantages PERFORMANCE MODULAR SYSTEM
- 7. 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
- 9. CASE STUDY TheRake.com - ReactJS front-end - Node JS Server - Headless Magento 2 - Wordpress
- 10. WHY NEED MODULAR SYSTEM?
- 13. 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.
- 14. VISION FOR THE FUTURE MICROSERVICES AND PWA APPROACH IS THE FUTURE OF ECOMMERCE
- 15. 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
- 16. THANK YOU
Editor's Notes
- 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.
- So what is Headless?
- First talk about the Monolithic webshop, where one system is tightly connected to other. Like frontend is tightly coupled with backend application.
- 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.
- So why need to use Headless approach. So basically there are two advantages. One of them is Performance and the second is Modular System.
- 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.
- 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?
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.