This document discusses using Gatsby, WordPress, and WooCommerce for building blazing fast ecommerce sites. It highlights that Gatsby is fast, secure, free, and has great developer tools and content delivery. WooCommerce is a popular ecommerce platform that allows full store control. WPGraphQL integrates WordPress and Gatsby by exposing WordPress data through GraphQL. A case study demonstrates using these technologies together with additional plugins for features like events and Stripe payments. Lessons learned are that WordPress plugins may not all work and content is not immediately available, but Gatsby enables offline support and progressive web apps.

1. @muhsinlk
Blazing Fast eCommerce with
Gatsby, WordPress, and
WooCommerce
TOPIC

2. Muhammad
Muhsin

3. Why Blazing Fast
eCommerce?
SPEED

4. [at Amazon.com] In A/B tests, we tried delaying the page in
increments of 100 milliseconds and found that even very
small delays would result in substantial and costly drops in
revenue.
http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
Faster = More 💵
FACT

5. https://www.gatsbyjs.org/blog/2019-01-30-flamingo-case-study/

6. Why Gatsby?

7. ⚡ Blazing fast by default
🔐 Super secure
💰 Free and open-source
🛠 Developer Experience (DX) and Tooling
⭐ Content Mesh
📚 Easy to get started and learn React, GraphQL quickly
💯 Perfect Lighthouse score — SEO, a11y, PWA

8. Why WooCommerce ?

9. 🕹 Complete control over your store
🌟 Popularity: “... 42% of all the stores online are running WooCommerce.” - Chris Lema
🚗 “Let’s not reinvent the wheel”
💰 Free and open-source
🏁 Easy to get started

10. Why
?
+

11. Integrations 🤝

12. Reliability 🔐

13. Performance ⚡

14. Scalable 🏢

15. Fun 🙆‍♂

16. On the shoulders of
Giants!

20. GraphQL
● Ask for what you need, get exactly that
● An alternative to REST API
● Single endpoint
● Get many resources in a single request
● Created by Facebook, now open source
HOW TO

21. ❤

22. 1. Fantastic Gutenberg Editor for an amazing writing
📝 experience!
2. Build with modern/favorite developer tools 🛠
like React and GraphQL!
3. Get a blazing fast ⚡ website!
The 3 wins!
WHY

24. WPGraphQL
● Exposes WordPress data as GraphQL schema
● Created by Jason Bahl, sponsored by Gatsby
● Extendable via WordPress plugins
HOW TO

25. WPGraphQL + Gatsby
● Install WPGraphQL plugin in WordPress
● Install gatsby-source-wordpress-experimental
HOW TO

26. A case study

27. Gatsby at the frontend

28. WordPress + WooCommerce at at the backend

29. Glued by WPGraphQL + WooGraphQL

30. Events Calendar Pro + QL Events

31. Stripe Checkout

32. Netlify Lambda Functions

33. Search with Algolia

34. Demo 🚀

35. Gatsby WooComerce Theme
https://github.com/sagarnasit/gatsby-theme-woocommerce
by Sagar Nasit

36. Lessons
📚

37. More reasons to love Gatsby!
● Content not available immediately
● No incremental builds for WordPress
● WordPress Plugins may not work
WHY

38. Offline eCommerce
● Progressive Web Apps + Offline support
● Order when offline; sync order data when online
● Accessible to the next billion users
FUTURE

39. What we covered
● WordPress + Gatsby
● WPGraphQL + WooGraphQL
● A case study
● Fast eCommerce
● The future
SUMMARY

40. let us = {...goodness};
Let’s spread the goodness of WordPress + Gatsby

41. WPGatsby is here 🎉

42. https://www.gatsbyjs.org/blog/2020-07-07-
wordpress-source-beta/

43. https://youtu.be/vyuEu95yQkA

44. decoupled.blog

45. Thank you! 🙏
@muhsinlkMuhammad Muhsin
muhammad@rtcamp.com

46. rt.camp/join
We are hiring! 🤗

47. Credits - Image Sources
● Unspash for images.
● WPGatsby
CHOOSE