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.

WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup

34 views

Published on

Jamstack sites have received huge popularity lately. Muhammad Muhsin has explored WordPress as a viable back-end API for Jamstack, which turned out to be a great solution. He has built multiple Jamstack sites using WordPress for data via REST API or GraphQL.
In this session, Muhammad introduces WordPress as an API for Jamstack sites.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup

  1. 1. @muhsinlk WordPress on the Jamstack TOPIC
  2. 2. Muhammad Muhsin
  3. 3. A brief history
  4. 4. WordPress REST API
  5. 5. Started off as a WordPress Plugin 👏 Merged in to Core in WordPress 4.7
  6. 6. WordPress as a Headless CMS! ⚡ a.k.a. Decoupled WordPress
  7. 7. You could use parts of WordPress now, instead of the whole monolithic software 🙌
  8. 8. REST is great, but...
  9. 9. 🐢 Slow ☁ Constant over/under fetching 🎛 Needs multiple requests Drawbacks of REST API
  10. 10. Enter GraphQL
  11. 11. ⭐ GraphQL is a query language for your API 📢 Ask for what you need, get exactly that 󾠮 Single endpoint Why GraphQL 📚 Get many resources in a single request
  12. 12. WPGraphQL ● Exposes WordPress data as GraphQL schema ● Created by Jason Bahl ● Extendable via WordPress plugins HOW TO
  13. 13. Jamstack
  14. 14. Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. JAMSTACK.ORG
  15. 15. Static Site Generation
  16. 16. Content Template Static Site Generator Static Site
  17. 17. Why Jamstack?
  18. 18. ⚡ 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
  19. 19. 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
  20. 20.
  21. 21. 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
  22. 22. Demo 🎬
  23. 23. Starting a Project in Frontity
  24. 24. npx frontity create my-project cd my-project npx frontity dev
  25. 25. WP Decoupled App https://github.com/rtCamp/wp-decoupled by rtCamp
  26. 26. Gatsby WooComerce Theme https://github.com/sagarnasit/gatsby-theme-woocommerce by Sagar Nasit
  27. 27. muhammad.dev https://github.com/m-muhsin/muhammadmuhsin.com/ – a WordPress/ Gatsby site
  28. 28. Gatsby WPGraphQL Apollo https://github.com/m-muhsin/gatsby-wp-graphql-apollo – a simplified Gatsby site using Apollo for a live connection to WordPress
  29. 29. What we covered ● WordPress + Jamstack ● REST API, WPGraphQL ● Demo ● Jamstack SUMMARY ● Some examples
  30. 30. let us = {...goodness}; Let’s spread the goodness of Decoupled WordPress!
  31. 31. decoupled.blog
  32. 32. Thank you! 🙏 @muhsinlkMuhammad Muhsin muhammad@rtcamp.com
  33. 33. rt.camp/join We are hiring! 🤗
  34. 34. Credits - Image Sources ● Unspash for images ● Jamstack ● Jamstack website ● Static Site Generators: Content Laptop Gears ● Why Jamstack CHOOSE

×