Last week, team Wagento organized a virtual meetup for all the Magento enthusiasts and marketers. More than 100 people connected on live stream and learned something new. There were four different speakers covering different topics. Our CEO, Mr. Piyush Lathiya was also one of the speakers and he covered a vital topic "Magento Headless Commerce with Vue Storefront". So here sharing the presentation document for attendees and others to check the same in detail.

1. Magento
Headless Commerce
With VueStorefront
Virtual Magento PWA Meetup | Saturday, May 23, 2020

2. Piyush Lathiya
Founder and CEO of Aureate Labs
Our partner
Aureate Labs

3. Agenda
● Understand traditional websites and its challenges
● Headless Architecture
● Magento Headless Commerce Case Study
● Overview of VueStorefront

5. Requirement:
● Add Blog feature to Magento
Possible Solution:
● ?

6. Requirement:
● Remove FAX field from Shipping Address
Possible Solution:
● ?

7. Requirement:
● Add voice commerce solution
Possible Solution:
● ??

8. Requirement - N
Possible Solution - N:
● Customize Magento again and again, and again…..

9. Drawbacks of this “highly customized” application
● Can’t add new touch-points easily
● Need dedicated team to manage whole-system
● Development is very slow
● Intensive testing is required

10. Traditional (Monolithic) Websites
Tightly coupled system
Frontend
Backend

11. Headless
Frontend
Backend
Decouple frontend and backend, even host separately, manage separately

12. Frontend
Backend
API
HEAD
HEADLESS/ BODY

13. Frontend
Backend
API
HEAD
HEADLESS/ BODY
HEAD
● Graphical User Interface
● Users can interact with them

14. Frontend
Backend
API
HEAD
HEADLESS/ BODY
HEAD
● Graphical User Interface
● Users can interact with them
Voice assistant devices

15. HEAD
● Graphical User Interface
● Users can interact with them
PWAs, Website and Native Apps
Frontend
Backend
API
HEAD
HEADLESS/ BODY

16. HEAD
● Graphical User Interface
● Users can interact with them
POS
Frontend
Backend
API
HEAD
HEADLESS/ BODY

17. HEAD
● Voice assistant devices
● PWAs, Website, Native Apps
● POS
● VR
● Wearable
● B2B
● IoT
● More….
Frontend
Backend
API
HEAD
HEADLESS/ BODY

18. HEADLESS/ BODY
Frontend
Backend
API
HEAD
HEADLESS/ BODY
● Usually not visible, works in the background
● Efficiency is focus rather than GUI

19. HEADLESS/ BODY
Frontend
Backend
API
HEAD
HEADLESS/ BODY
● Usually not visible, works in the background
● Efficiency is focus rather than GUI
Server

20. HEADLESS/ BODY
Frontend
Backend
API
HEAD
HEADLESS/ BODY
● Usually not visible, works in the background
● Efficiency is focus rather than GUI
SSL Command Line

21. HEADLESS/ BODY
Frontend
Backend
API
HEAD
HEADLESS/ BODY
● Infrastructure
● Securities
● Management Interface
● PIM
● CRM
● ERP
● OMS
● Master Data Management
● Inventory Management
● Customer Information
● Personalization Engine
● Product Search Engine
● Etc...

22. Frontend
Backend
API
HEAD
HEADLESS/ BODY
Application programming interface
PWA Website VoiceNative App POS
HEAD
HEADLESS/ BODY

23. Frontend
Backend
API
HEAD
HEADLESS/ BODY
Application programming interface
PWA Website VoiceNative App POS
HEAD
HEADLESS/ BODY
Replace Wordpress with Contentful

24. Advantage of headless
Major advantages are
1. Flexibility
2. Performance

25. Flexibility
For developers
Modular system Faster development Isolated Team

26. Flexibility
For merchants
● Responsible team/developer for each service
● Efficient Development
● Fast goto market

27. Performance
40%
Users abandoned website
if it takes more than 3
seconds
47%
customers expect a
webpage to load in 2
seconds of less

29. https://www.youtube.com/watch?v=ftGOLcgax_0

30. ↑133%
Transactions
↓80%
Average Redirection time
Result
↑162%
eCommerce Conversion Rates
↓95%
Checkout abandonment

31. Frontend
Backend
API
2
Elastic Data Storage NodeJS
Rooted Object
Magento Headless Commerce

32. VueStorefront architecture

33. Headless/Backend
Head/Frontend
Vue.JS
Backend of Frontend
Elastic Search

34. Head/Frontend
Vue.JS
VueJS
- Gentle Learning Curve
- Modular and Flexible Development
Environment
- Virtual DOM

35. Why use VueStorefront?
● Ready to Use
● Headless architecture, Platform-agnostic
● Modern JS Stack
● Fast time to market
● Large community
● 110+ Live stores

36. Start with VueStorefront
Get familiar with VueJs: https://vuejs.org/v2/guide/
Github Repo: https://github.com/DivanteLtd/vue-storefront
Document: https://docs.vuestorefront.io/
YouTube Channel: https://www.youtube.com/channel/UCkm1F3Cglty3CE1QwKQUhhg
Slack Channel: Invitation link available in repository main-page

37. PWA in Nutshell
F - I - R - E
• Fast
• Integrated
• Reliable
• Engaged

38. PWA in Nutshell