1.
@imranhsayed

2.
Rise of Headless
CMS

3.
JAMStack
JavaScript Api Markup

4.
● A modern architecture.
● Create fast, secure sites and
dynamic apps with
JavaScript,
APIs,
and pre-rendered Markup,
served without web servers

5.
● JAMstack is not about specific
technologies
● A new way of building websites
and apps that delivers:
- better performance,
- higher security,
- lower cost of scaling,
- a better developer experience.

6.
● Any dynamic programming
during the request/response
cycle is handled by JavaScript
● Runs entirely on client.
● Any frontend framework,
library, or even vanilla
JavaScript.
JavaScript

7.
● All server-side processes or
database actions are
abstracted into reusable APIs
● Accessed over HTTPS with
JavaScript
● These can be custom-built or
leverage third-party services.
API

8.
● Templated markup should be
prebuilt at deploy time.
● usually using a site generator
for content sites, or a build tool
for web apps.
Markup

9.
● Any project that relies on a tight
coupling between client and
server.
● A site built with a server-side
CMS like WordPress, Drupal,
Joomla, or Squarespace
● A single page app that uses
isomorphic rendering to build
views on the server at runtime.
When is you site not a JAMStack?

10.
Why
JAMStack?
11

11.
● Minimizing the time to first
byte, with pre-built files
served over a CDN
Better Performance

12.
● With server-side processes
abstracted into
microservice APIs, surface
areas for attacks are
reduced.
High Security

13.
● Deployment amounts to a
stack of files that can be
served anywhere
● Scaling is a matter of
serving those files in more
places like CDN
Cheaper, Easier Scaling

14.
What is
Gatsby?
15

15.
● Open source framework
based on React
● build blazing fast websites
and apps

16.
How does
Gatsby work?

17.
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.
19

18.
PRPL Pattern
20
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

19.
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’
21

20.
Gatsby and
Create React App -
Difference
22

21.
Create React APP
⬡ One Global App.js
⬡ CSR
⬡ Create Routes manually
23
Gatsby
⬡ Hybrid + Static Pages
⬡ SSR
⬡ Creates routes
automatically

22.
Nextjs
⬡ Dynamically rendered
24
Gatsby
⬡ Statically generated

23.
Features
25

24.
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.
26

25.
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
⬡ Content Mesh
27

26.
Building Websites with
Gatsby and WordPress
28

27.
Why Gatsby with WordPress?
⬡ Many development teams, content teams, and client
decision-makers are familiar with WordPress.
⬡ Easy migration path for website teams looking for
better security, site performance, and development
speed.
⬡ Putting Gatsby on top of WordPress is a way to
deliver benefits without changing their content
editing experience.
29

28.
When is WordPress a
Good idea?
30

29.
When is WordPress a good idea?
⬡ Redesigns of sites with content already stored in
WordPress.
⬡ Content teams who are comfortable with the
WordPress content editing experience.
⬡ Projects where security is important
⬡ Development teams who value using popular, open-
source technologies
31

30.
When is WordPress is not so great?
⬡ Complex access control workflows or content
modelling restrictions.
⬡ Teams requiring the use of WordPress UI themes.
32

31.
Creating Gatsby Site
with WordPress
33

32.
Install Gatsby CLI
⬡ npm install -g gatsby-cli
34

33.
Create a new site
⬡ gatsby new gatsby-with-wordpress-workshop
⬡ cd gatsby-with-wordpress-workshop
⬡ gatsby develop ( starts the development server )
35

34.
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 36

35.
Gatsby Files
⬡ gatsby-ssr.js — use Gatsby’s server-side rendering
APIs to customize default settings affecting server-
side rendering
37

36.
Routing
⬡ Routing in Gatsby relies on the <Link /> component.
⬡ <Link /> component is a wrapper around
@reach/router’s Link component.
⬡ import { Link } from "gatsby"
⬡ <Link to="/about">About</Link>
38

37.
Styling with CSS
⬡ https://www.gatsbyjs.org/docs/recipes/#2-styling-
with-css
⬡ Create a global CSS file as src/styles/global.css
⬡ Import the global CSS file in the gatsby-browser.js
39

38.
Using gatsby-source-
graphql and wp-
graphql plugins
40

39.
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.
41

40.
Install wp-graphql on your WordPress site
⬡ git clone https://github.com/wp-graphql/wp-graphql
42

41.
Installation on Gatsby Site
⬡ npm install gatsby-source-graphql
43

42.
Add plugin config into gatsby-config.js
44

43.
Update siteMetaData into gatsby-config.js
45

44.
Add plugin config into gatsby-config.js
46

45.
Run development server
⬡ gatsby develop
47

46.
http://localhost:8000
48

47.
http://localhost:8000/___graphql
49

48.
Creating Blog Pages Programmatically
⬡ https://www.gatsbyjs.org/docs/recipes/#creating-
pages-programmatically-with-createpage
⬡ Add an export for createPages in gatsby-node.js
⬡ Create some data and loop through that data and
provide the path, template, and context
⬡ Create a template in src/templates to serve as
template for your pages created
⬡ These pages will be available on ‘/pathname’
50

49.
Create Pages ( gatsby.node.js )
51

50.
createPosts
⬡ mkdir utils
⬡ touch createPosts.js
52

51.
Test our posts query in GraphiQL
53

52.
Write our query ( utils/createPosts.js )
54

53.
Write a createPosts()
⬡ Make a GraphQL query for posts.
⬡ When the query gets resolved, loop through the posts
and using createPage() inside the loop:
∙ Create a blog page that renders some posts.
∙ Create a single blog page.
∙ Create templates to display the data.
55

54.
Write createPosts() - fetchPosts()
56

55.
fetchPosts()
57

56.
fetchPosts()
58

57.
Create Templates
⬡ cd src
⬡ mkdir templates
⬡ mkdir posts
⬡ touch blog-template.js single-post-template.js
⬡ Loop through the data passed to the blog template
and single post template.
59

58.
blog-template.js
60

59.
61

60.
single-post-template.js
62

61.
Go to localhost:8000/blog
63

62.
Go to localhost:8000/blog/post-slug
64

63.
Create Nav Menu
⬡ Now we need to add Links in nav
⬡ Create reusable Layout component with nav
65

64.
Creating a Layout component
⬡ export default ({ children }) => (
⬡ <div>
⬡ <Link activeClassName=”current-page”>Blog</Link>
⬡ {children}
⬡ </div>
⬡ )
66

65.
Links added in Layout
67

66.
Let’s deploy our site
68

67.
Deploying Gatsby Site
⬡ https://app.netlify.com/
⬡ https://gatsby-meetup.netlify.com/
69

68.
Deploy on Netlify
70

69.
Deployed on Netlify
71

70.
Hybrid App Pages
72
Created pages can
make calls to external
services and APIs in
order to allow more
interactive and
dynamic behavior

71.
References
73

72.
store.gatsbyjs.org
74

73.
wp-decoupled
75
https://github.com/rtcamp/wp-decoupled

74.
Thank you
76
Imran Sayed
@imranhsayed