The frontend technology is bringing eCommerce revolution. The speed defines the winner in retail and with the Headless Commerce approach, the development gets more customization options and the business gets more capabilities to deliver the best customer experience.

1. 1

2. About Me
● Decade of experience in eCommerce
domain
● We deliver headless commerce solution
2

3. Agenda
● Technology and Human evolution
● Discovery of advanced Frontend
● Discovery of Headless Commerce
● How to choose Frontend technology?
3

4. Humanity continuously seeks
efficiency and new.
“We’re fast approaching the moment when humans and
machines merge,” Time magazine - 2011 issue.
Technology and Human evolution
4

5. Internet then and now
Then
Technology and Human evolution
5

6. Internet then and now
Then Now
Technology and Human evolution
6

7. Human primary needs
Self
Actualization
Esteem Needs
Social Needs
Safety Needs
Physiological
Needs
Self
Actualization
Esteem Needs
Social Needs
Safety Needs
Physiological
Needs
Internet
Then Now
Technology and Human evolution
7

8. Evolution of browsers over the time
Technology and Human evolution
8

9. Evolution of browsers over the time
Technology and Human evolution
9

10. Capabilities of modern browsers
Technology and Human evolution
https://whatwebcando.today/
+More
10

11. Flipkart.com in 2011
Technology and Human evolution
11

12. Flipkart.com Today
Technology and Human evolution
12

13. Augmented Reality (AR)
Virtual Reality (VR)
Technology and Human evolution
13

14. Technology and Human evolution
14

15. Discovery of advanced frontend
15

16. Time
Hello, World!
Web Server
Browser
HTTP Request
HTTP Response
Discovery of advanced frontend
16

17. Hello, World!
Web Server
Browser
HTTP Response
HTTP Response
17

18. Header
Main Content
18

19. Header (Repeated section)
Main Content
19

20. Click Event
On Click
Step 1: Update URL in browser
Step 2: Request for product data
Step 3: Upon response browser update Main Content 20

21. On Click
Step 1: Update URL in browser
21

22. On Click
Step 2: Request for product data
JSON:
{
"product": "acer Aspire 7 Ryzen 5 Hexa Core 5500U - (8 GB/512 GB
SSD/Windows 10 Home/4 GB Graphics/NVIDIA GeForce GTX 1650) A715-42G
Gaming Laptop (15.6 inch, Black, 2.15 kg)",
"sku": “XYZ”,
"price": 54990.0000,
"Category": “Laptops”
"Availability": “In Stock”
…
…
…
…
}
22

23. On Click
Step 3: Upon response browser update Main Content
23

24. JavaScript send dynamic data request to server and update particular section of
the page with dynamic data or logic.
Single Page Application (SPA)
24

25. ● DOM is tree like structure of HTML
● To find and replace any node is time consuming task for browsers
● Single page can contains 1000s of nodes
Updating DOM is expensive
25

26. Virtual DOM
26

27. Cache
Web Server
Service Worker
Client side proxy written in
JavaScript
Service worker enable reliable performance
27

28. Discovery of Headless Commerce
28

29. How one can implement Advanced Frontend with an existing eCommerce
framework. Like Magento or Shopify?
Discovery of Headless Commerce
29

30. How one can implement Advanced Frontend with current eCommerce framework.
Like Magento or Shopify?
● Magento = XML + PHTML
● Shopify = Liquid
Discovery of Headless Commerce
30

31. A new way
Frontend
Backend
Middle Layer (API)
31

32. A new way
Frontend
Backend
Middle Layer (API)
32

33. A new way = Headless Commerce
Frontend
Backend
Middle Layer (API)
33

34. Benefits of Headless Commerce
Performance
● Lightning-fast store & absolute best user experience
34

35. Scalability and Flexibility
● Frontend will perform optimal regardless of backend load
● E.g. Use wordpress as blog, fine, tomorrow want to use Ghost, not an
issue
Benefits of Headless Commerce
35

36. Speed of Goto Market
● Flexible frontend and backend allows to launch new features
easily using power of APIs
Benefits of Headless Commerce
36

37. Campaign landing page launch without Headless
Ideation
UI Design Development on
Staging
Deployment on
Production
Approval
QA/Testing
Campaign Active
Go live in 4 days
Benefits of Headless Commerce
37

38. Campaign landing page launch without Headless
Ideation
UI Design Development on
Staging
Deployment on
Production
QA Testing
Approval
Campaign Active
Team composition
● Marketing Head
● UI Designer
● Marketing Executive
● Frontend Dev
● Backend Dev
● QA
● Dev Ops
Benefits of Headless Commerce
38

39. Campaign landing page launch with Headless
Ideation 3rd party
CMS
Campaign Active
Build, Preview and
Publish
Go live in 2 days
Benefits of Headless Commerce
39

40. Campaign landing page launch with Headless
Ideation 3rd party
CMS
Campaign Active
Build, Preview and
Publish
Team composition
● Marketing Head
● UI Designer
● Marketing
Executive
Benefits of Headless Commerce
40

41. ● Control over frontend
● Faster goto market
● Reduce ongoing development Cost
● Sub-second site speed
● Decrease bounce rates
● Decrease CAC
● Improved SEO
● Add touch points easily
Benefits of Headless Commerce
41

42. How to choose Head (frontend) technology?
Frontend
Backend
Middle Layer (API)
? ? ?
42

43. ● Popularity / Trends
● Complexity / Learning Curve
● Community / Support
● Features / Performance
How to choose Head (frontend) technology?
43

44. How to choose Head (frontend) technology?
Build one application using all three frameworks.
● Check which feels better? Which one is productive?
44

45. How to choose Head (frontend) technology?
How to deal with complex use cases?
Example:
● App dashboard with thousands of rows in single page
● 3D Rendering / Animation
45

46. How to choose Head (frontend) technology?
46

47. How to choose Head (frontend) technology?
JS Framework Benchmark
https://github.com/krausest/js-framework-benchmark
47

48. Why we chose VSF?
Frontend
Backend
Middle Layer (API)
48

49. Why we chose VSF?
49

50. Why we chose VSF?
50

51. We also use other JS frameworks
51

52. Summary
● Stay up to date with the technology
● Don't reinvent the wheel while building a car
● Headless is future of nex-gen commerce
52

53. 53