Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blazing Fast eCommerce with Gatsby, WordPress, and WooCommerce by Muhammad Muhsin @ JS For WordPress Conference.

41 views

Published on

Muhammad Muhsin from our team spoke at JavaScript for WordPress Conference (JS for WP Conf) 2020.

Muhammad shared his knowledge about how Gatsby can be leveraged to build blazing fast, super secure eCommerce sites. The key takeaway from his talk was how Gatsby's Content Mesh can utilize multiple software services to build a cohesive site.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Blazing Fast eCommerce with Gatsby, WordPress, and WooCommerce by Muhammad Muhsin @ JS For WordPress Conference.

  1. 1. @muhsinlk Blazing Fast eCommerce with Gatsby, WordPress, and WooCommerce TOPIC
  2. 2. Muhammad Muhsin
  3. 3. Why Blazing Fast eCommerce? SPEED
  4. 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. 5. https://www.gatsbyjs.org/blog/2019-01-30-flamingo-case-study/
  6. 6. Why Gatsby?
  7. 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. 8. Why WooCommerce ?
  9. 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. 10. Why ? +
  11. 11. Integrations 🤝
  12. 12. Reliability 🔐
  13. 13. Performance ⚡
  14. 14. Scalable 🏢
  15. 15. Fun 🙆‍♂
  16. 16. On the shoulders of Giants!
  17. 17. 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
  18. 18.
  19. 19. 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
  20. 20. WPGraphQL ● Exposes WordPress data as GraphQL schema ● Created by Jason Bahl, sponsored by Gatsby ● Extendable via WordPress plugins HOW TO
  21. 21. WPGraphQL + Gatsby ● Install WPGraphQL plugin in WordPress ● Install gatsby-source-wordpress-experimental HOW TO
  22. 22. A case study
  23. 23. Gatsby at the frontend
  24. 24. WordPress + WooCommerce at at the backend
  25. 25. Glued by WPGraphQL + WooGraphQL
  26. 26. Events Calendar Pro + QL Events
  27. 27. Stripe Checkout
  28. 28. Netlify Lambda Functions
  29. 29. Search with Algolia
  30. 30. Demo 🚀
  31. 31. Gatsby WooComerce Theme https://github.com/sagarnasit/gatsby-theme-woocommerce by Sagar Nasit
  32. 32. Lessons 📚
  33. 33. More reasons to love Gatsby! ● Content not available immediately ● No incremental builds for WordPress ● WordPress Plugins may not work WHY
  34. 34. Offline eCommerce ● Progressive Web Apps + Offline support ● Order when offline; sync order data when online ● Accessible to the next billion users FUTURE
  35. 35. What we covered ● WordPress + Gatsby ● WPGraphQL + WooGraphQL ● A case study ● Fast eCommerce ● The future SUMMARY
  36. 36. let us = {...goodness}; Let’s spread the goodness of WordPress + Gatsby
  37. 37. WPGatsby is here 🎉
  38. 38. https://www.gatsbyjs.org/blog/2020-07-07- wordpress-source-beta/
  39. 39. https://youtu.be/vyuEu95yQkA
  40. 40. decoupled.blog
  41. 41. Thank you! 🙏 @muhsinlkMuhammad Muhsin muhammad@rtcamp.com
  42. 42. rt.camp/join We are hiring! 🤗
  43. 43. Credits - Image Sources ● Unspash for images. ● WPGatsby CHOOSE

×