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.

Gatsby with WordPress - workshop ( Meetup


Published on

Gatsby with WordPress - Workshop

Pune WordPress Knowledge Exchange
Pune WordPress Knowledge Exchange
Public group
Saturday, June 13, 2020
5:00 PM to 6:30 PM GMT+5:30
Add to calendar

Online event

Online Meetup:

1. Sayed Taqui - Sr WordPress Engineer @rtCamp
2. Imran Sayed - Sr. WordPress Engineer @rtCamp
3. Sagar Nasit - Sr. WordPress Engineer @rtCamp

As developers or users, we all are concerned about our site's performance. ⚡
We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster 

Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance.

Building your WordPress website with Gatsby is super simple.
Let's learn how to build a WordPress website with gatsby in this Workshop.

Gatsby is a static site generator. However can it serve live data too?
Should we use GraphQL over traditional REST API and why?
How does Gatsby improves the performance?
Can also build an ecommerce site with Gatsby?
Find out more about this in this meetup.

 In this meetup, you will learn:

1- Basics of Gatsby
2- Understanding the architecture and codebase.
2- Building a WordPress website using Gatsby.
3- Using GraphQL with Gatsby and WordPress.
4- Free deployment of your Gatsby website on netlify

Prior knowledge of React or WordPress is not required.
Familiarity with JavaScript is sufficient.

Sayed, Imran and Sagar will also share their experience and best practices, when building site with Gatsby.

There will also be a QnA session where you can ask any questions you may have and also share your experiences.

Whether you are a beginner, intermediate or expert, this meetup will have something for you.

This is an online meetup so you can sit, relax and enjoy meeting everyone online from wherever you are.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Gatsby with WordPress - workshop ( Meetup

  1. 1. Build WordPress Site With Gatsby - Workshop 1
  2. 2. ● Decoupled ● Gatsby and its features ● Use Gatsby Theme ● Create Gatsby Theme ● Hybrid Pages and Live queries ● Deployment ● WooCommerce with Gatsby
  3. 3. Sayed Taqui 3 WordPress Engineer
  4. 4. Sagar Nasit 4 WordPress Engineer
  5. 5. Imran Sayed 5 WordPress Engineer
  6. 6. What is decoupled? Why decoupled?
  7. 7. Rise of Headless CMS
  8. 8. Front end Options
  9. 9. Why React?
  10. 10. Why a framework?
  11. 11. Gatsby vs Next JS vs Create React App 12
  12. 12. Nextjs 13 Gatsby - SSR ⬡ Dynamically rendered ⬡ Create Routes manually ⬡ Does CSR Create React APP
  13. 13. What is Gatsby? 14
  14. 14. ● Open source framework based on React ● build blazing fast websites and apps
  15. 15. How does Gatsby work?
  16. 16. Gatsby uses PRPL Pattern ⬡ A web site architecture developed by Google for building fast performance websites. ⬡ Push critical resources for the initial URL route using <link preload> and HTTP/2. ⬡ Render initial route. ⬡ Pre-cache remaining routes. ⬡ Lazy-load and create remaining routes on demand. 18
  17. 17. PRPL Pattern 19 Static html version of initial Route Code bundle for the pages Renders Loads Precaching Resources for pages linked to from the initial route Link Clicked Create New Page on Demand
  18. 18. How does Gatsby work? ⬡ Gatsby core automatically turns React components in src/pages into pages with URLs ⬡ src/pages/about.js will be available at ‘/about’ 20
  19. 19. Features 21
  20. 20. Features ⬡ Pre setup of modern web tech - React, Webpack, Modern JavaScript and CSS. ⬡ Bring data from one or many resources. ⬡ Builds your site as “static” files which can be deployed easily on dozens of services. 22
  21. 21. Features ⬡ Pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are. ⬡ Content is compiled ahead of time so hackers cannot get into your database or CMS. ⬡ PWA Generator 23
  22. 22. Using Gatsby Themes 24
  23. 23. Building Websites with Gatsby and WordPress 25
  24. 24. Creating Gatsby Site with WordPress 26
  25. 25. Gatsby Files ⬡ gatsby-config.js — configure options for a Gatsby site, with metadata for project title, description, plugins, etc. ⬡ gatsby-node.js — implement Gatsby’s Node.js APIs to customize and extend default settings affecting the build process ⬡ gatsby-browser.js — customize and extend default settings affecting the browser, using Gatsby’s browser APIs 27
  26. 26. How does gatsby-source-graphql work? ⬡ Plugin for connecting arbitrary GraphQL APIs to Gatsby’s GraphQL ⬡ Remote schemas are stitched together by declaring an arbitrary type name that wraps the remote schema Query type , and putting the remote schema under a field of the Gatsby GraphQL query. 28
  27. 27. Hybrid App Pages 29 Created pages can make calls to external services and APIs in order to allow more interactive and dynamic behavior
  28. 28. More about Gatsby Theme 30
  29. 29. What is Gatsby Theme? 31 - Little more than a gatsby site. - Gatsby theme is pre configured gatsby site with all functionality and UI.
  30. 30. Benefits of Gatsby Theme 32 - One theme functionality can be used at multiple places. - Can be used as packaged version. - Multiple themes can be used to leverage multiple functionalities.
  31. 31. Can we build WooCommerce Theme? 33
  32. 32. Use gatsby woocommerce theme 34 - Install wp-graphql-woocommerce extension plugin with wp-graphql plugin on your WordPress site. - Install gatsby theme package.
  33. 33. What Ecommerce theme includes 35 - Fetched products data from woocommerce site. - Creates individual product page as well as product listing pages. - Cart handling with offline viewing.
  34. 34. References 36
  35. 35. Thank you 37 @sayed_taqui - Sayed taqui @sagarnasit - Sagar Nasit @imranhsayed - Imran Sayed