Headless - the future of e-commerce

3. CASE STUDY TheRake.com Headless Magento 2 ReactJS front-end NodeJS Server Wordpress

4. CASE STUDY TheRake.com Headless Magento 2 ReactJS front-end NodeJS Server Wordpress

6. MONOLITHIC WEBSHOPS One system connected front and back-end.

7. MONOLITHIC WEBSHOPS One system connected front and back-end. FRONT-END BACK-END

8. HEADLESS WEBSHOPS Three services, front and back-end communicating through API. FRONT-END BACK-END

9. HEADLESS WEBSHOPS Three services, front and back-end communicating through API. FRONT-END BACK-END

10. HEADLESS WEBSHOPS Three services, front and back-end communicating through API. FRONT-END API BACK-END

15. PERFORMANCE

16. PERFORMANCE MODULAR SYSTEM

19. With a 1 second delay in page speed on desktop, the conversion rate decreases with 21,8%

20. With a 1 second delay in page speed on desktop, the conversion rate decreases with 21,8% 53,2% of all visitors will leave a website when the page load is 3 seconds or higher

21. With a 1 second delay in page speed on desktop, the conversion rate decreases with 21,8% 53,2% of all visitors will leave a website when the page load is 3 seconds or higher 1 second delay costs, on a webshop with €100k turnover per day, €2,5 million per year.

25. REACT JS FRAMEWORK

26. REACT JS FRAMEWORK NODEJS SERVER

27. REACT JS FRAMEWORK SINGLE PAGE APPLICATION NODEJS SERVER

28. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

29. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

30. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

31. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

32. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

33. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> DIFFERENCE <p> Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

34. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> DIFFERENCE <p> PATCH Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. REACTJS FRAMEWORK

35. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> VIRTUAL DOM <html> <body> <head> <h1> <p> #text <em> DIFFERENCE <p> PATCH Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. <p> REACTJS FRAMEWORK

36. Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> REACTJS FRAMEWORK

37. Virtual DOM React never talks to the DOM directly, instead it maintains a fast in-memory representation of the DOM. “REAL” DOM <html> <body> <head> <h1> <p> #text <em> REACTJS FRAMEWORK

38. Diﬀerence in technology: PHP uses a blocking, synchronic architecture NodeJS is all about non-blocking, asynchronous architecture PHP VS NODEJS

40. TASK TASK

41. TASK TASK WORKERS WORKERS

42. TASK TASK WORKERS CPU WORKERS CPU

43. DONE TASK TASK WORKERS CPU DONE WORKERS CPU

44. DONE TASK TASK TASK WORKERS CPU DONE TASK WORKERS CPU

45. TASK TASKTASK DONE WORKERS CPU TASK DONE WORKERS CPU

46. TASK TASKTASK TASK TASK WORKERS CPU TASK TASK TASK WORKERS CPU

47. TASK TASKTASKTASK TASK WORKERS CPU TASKTASK TASK WORKERS CPU

50. TASK TASKTASKTASK TASK WORKERS CPU TASKTASK TASK DONE WORKERS CPU

51. BLOCKING NON-BLOCKING TASK TASKTASKTASK TASK WORKERS CPU TASKTASK TASK DONE WORKERS CPU

52. BLOCKING NON-BLOCKING DONETASK TASKTASKTASK TASK DONE WORKERS CPU TASKTASKTASK DONE WORKERS CPU

53. BLOCKING NON-BLOCKING DONE TASK TASKTASKTASK TASK DONE WORKERS CPU TASKTASKTASK DONE WORKERS CPU

54. BLOCKING NON-BLOCKING DONE TASK TASKTASKTASKTASK DONE DONE WORKERS CPU TASKTASKTASK DONE WORKERS CPU

55. Page is retrieved in once No reloading at any point Dynamic elements Omni-channel SINGLE PAGE APPLICATION

62. Traditional dynamic content is only for the user and ignored by Google crawler TheRake is fully dynamic content Code is rendered on server side, creating a HTML Snapshot which is send to the browser SERVER SIDE RENDERING

63. Traditional dynamic content is only for the user and ignored by Google crawler TheRake is fully dynamic content Code is rendered on server side, creating a HTML Snapshot which is send to the browser SERVER SIDE RENDERING DOM <html> <body> <head> <h1> <p> #text <em> <script language=’javascript’ src=’getProductInformation.js> </script> DYNAMIC CONTENT

69. TRADITIONAL WEBSHOPS

83. HEADLESS WEBSHOPS

84. HEADLESS WEBSHOPS FRONT-END

85. HEADLESS WEBSHOPS FRONT-END API

86. HEADLESS WEBSHOPS FRONT-END API BACK-END

87. HEADLESS WEBSHOPS FRONT-END API BACK-END

98. BACK-END OF THE FRONT-END FRONT-END API

103. WHAT DOES THIS MEAN FOR YOU?

104. WHAT DOES THIS MEAN FOR DEVELOPERS?

105. WHAT DOES THIS MEAN FOR DEVELOPERS? Isolated microservice, real focus on functionality instead of compatibility and interference.

106. WHAT DOES THIS MEAN FOR DEVELOPERS? Isolated microservice, real focus on functionality instead of compatibility and interference. Super fast development. Ability to create a front-end from scratch in just 40-100 hours.

107. WHAT DOES THIS MEAN FOR DEVELOPERS? Isolated microservice, real focus on functionality instead of compatibility and interference. Super fast development. Ability to create a front-end from scratch in just 40-100 hours. More specialist. Real division between front-end and back-end developers work.

108. WHAT DOES THIS MEAN FOR MERCHANTS?

109. WHAT DOES THIS MEAN FOR MERCHANTS? The development process becomes more lean and much faster, saving costs and time. $

110. WHAT DOES THIS MEAN FOR MERCHANTS? The development process becomes more lean and much faster, saving costs and time. $ One solution does not ﬁt all, creating a custom solutions becomes much easier, faster and cheaper.

111. WHAT DOES THIS MEAN FOR MERCHANTS? The development process becomes more lean and much faster, saving costs and time. $ One solution does not ﬁt all, creating a custom solutions becomes much easier, faster and cheaper. Flexibility. Extension can be easily switched or adjusted, while working on them seperatly.

113. MICROSERVICE APPROACH IS THE FUTURE OF E-COMMERCE

117. MICROSERVICE APPROACH IS THE FUTURE OF E-COMMERCE 475.000

122. DEITYE-COMMERCE REVOLUTION

123. DEITYE-COMMERCE REVOLUTION “Together we break away from the traditional eCommerce monolith while writing tomorrow’s leading software today.”

124. Sign up on www.deity.io DEITYE-COMMERCE REVOLUTION “Together we break away from the traditional eCommerce monolith while writing tomorrow’s leading software today.”

Headless - the future of e-commerce

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Headless - the future of e-commerce

Similar to Headless - the future of e-commerce (20)

Recently uploaded

Recently uploaded (20)

Headless - the future of e-commerce