WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup
0 likes193 views
The document discusses the evolution of WordPress as a headless CMS, highlighting the transition from the REST API to GraphQL for more efficient data fetching. It explains the benefits of Jamstack architecture, including speed, security, and improved developer experience, along with practical implementation examples. The overall focus is on leveraging WordPress with modern tools like React and GraphQL to create fast, decoupled sites.
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup
- 1. @muhsinlk WordPress on the Jamstack TOPIC
- 5. Started off as a WordPress Plugin ๐ Merged in to Core in WordPress 4.7
- 6. WordPress as a Headless CMS! โก a.k.a. Decoupled WordPress
- 7. You could use parts of WordPress now, instead of the whole monolithic software ๐
- 8. REST is great, but...
- 9. ๐ข Slow โ Constant over/under fetching ๐ Needs multiple requests Drawbacks of REST API
- 10. Enter GraphQL
- 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
- 13. WPGraphQL โ Exposes WordPress data as GraphQL schema โ Created by Jason Bahl โ Extendable via WordPress plugins HOW TO
- 14. Jamstack
- 15. 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
- 20. Why Jamstack?
- 21. โก 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
- 24. 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
- 25. โค
- 26. 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
- 27. Demo ๐ฌ
- 28. Starting a Project in Frontity
- 29. npx frontity create my-project cd my-project npx frontity dev
- 31. Gatsby WooComerce Theme https://github.com/sagarnasit/gatsby-theme-woocommerce by Sagar Nasit
- 32. muhammad.dev https://github.com/m-muhsin/muhammadmuhsin.com/ โ a WordPress/ Gatsby site
- 33. Gatsby WPGraphQL Apollo https://github.com/m-muhsin/gatsby-wp-graphql-apollo โ a simpli๏ฌed Gatsby site using Apollo for a live connection to WordPress
- 34. What we covered โ WordPress + Jamstack โ REST API, WPGraphQL โ Demo โ Jamstack SUMMARY โ Some examples
- 35. let us = {...goodness}; Letโs spread the goodness of Decoupled WordPress!
- 36. decoupled.blog
- 37. Thank you! ๐ @muhsinlkMuhammad Muhsin muhammad@rtcamp.com
- 38. rt.camp/join We are hiring! ๐ค
- 39. Credits - Image Sources โ Unspash for images โ Jamstack โ Jamstack website โ Static Site Generators: Content Laptop Gears โ Why Jamstack CHOOSE