Journey of 5 Years with Headless WordPress
398 Views
March 18, 24
スライド概要
Presentation deck of WordCamp Asia 2024
Developer
関連スライド
各ページのテキスト
Hidetaka Okamoto (@hidetaka_dev) - WordCamp Kyoto 2017 WordCamp Kansai 2024 Stripe DevRel AWS Samurai 2017 Alexa Champions https://hidetaka.dev
Submit my homework after 9 years.
My first Flagship WordCamp
From “State of the Word 2015” by Matt Mullenweg https://wordpress.tv/2015/12/07/matt-mullenweg-state-of-the-word-2015/
2014 WP API(v1) https://github.com/WP-API/WP-API/releases/tag/1.0
Journey of 5 Years with Headless WordPress Evolution, Challenges, and Opportunities WordCamp Asia 2024 Hidetaka Okamoto
Journey of 59 Years with Headless WordPress Evolution, Challenges, and Opportunities WordCamp Asia 2024 Hidetaka Okamoto
Journey of 9 Years
2015
2015 Start to learn WP API
Published 1st WP API plugin - Understand how we can call WP API https://wordpress.org/plugins/wpapi-shortcode-and-widgets/
Run the dev workshop - Understand how we can call WP API - Start to learn JavaScript (jQuery) https://www.docswell.com/s/hideokamoto/5DEN8R-wpapino-php
2016
2016 Create 1st WP API theme
WordPress theme + React app - Build React by gulp - Enqueue build JS file - Only place two PHP file - index.php functions.php https://github.com/hideokamoto/react-wordpress-template
1st impression: "Want to write PHP !"
React app on WordPress Theme is... Unable to leverage the advantages of either
Why did it make a disadvantage? ● ● WordPress ○ No short code / widgets ○ No template hierarchy ○ No WordPress functions ○ No Theme / Plugins React app ○ No standalone app ○ No server side JS ( hydration ) ○ No dev server
import { loadStripe } from "@stripe/stripe-js";
window.onload = async () => {
try {
const mountTargetElement =
document.getElementById("payment-element");
const clientSecret =
mountTargetElement.getAttribute('data-client-secret');
const stripe = await loadStripe('pk_test_xxxxxx');
const elements = stripe.elements({
clientSecret,
appearance: {
theme: "stripe"
}
});
const paymentElement = elements.create("payment", {
layout: {
type: 'tabs'
}
});
paymentElement.mount("#payment-element");
} catch (e) {
console.log(e)
}
}
Looking back from 2024
- Use “ViewScript” instead
- Use WP API from
Dynamic-Client Side
Custom block
https://developer.wordpress.org/block-editor/reference-guides/bloc
k-api/block-metadata/#view-script
2017 Omnichannel publishing
Voice User Interface - Amazon Alexa / Siri / etc.. Voice -> Text -> App App -> Text -> Voice https://developer.amazon.com/en-US/alexa/alexa-skills-kit
Use WordPress for VUI CMS - @WordCamp Singapore https://speakerdeck.com/hideokamoto/wordpress-make-easier-t o-create-alexa-skills?slide=4
Looking back from 2024 - How we can “localize” our content for each channel? - LLM may helps us to modify content for VUI https://openai.com/
2018 Static Site Hosting (SPA)
Replace frontend to React SP - Get the data from WP API - Fetch from React - Use prerender for SEO https://www.netlify.com/
Fetch WP API in browser class ContainerListWPPosts extends Component { componentWillMount () { this.props.dispatch(listWpPosts(lang)) } componentWillUnmount () { this.props.dispatch(unsetWpPosts()) } render () { const { items, url } = this.props return ( <Container> <Item.Group divided relaxed> {items.map((item, key) => ( <WpArchiveItem key={key} item={item} url={url} /> ))} </Item.Group> </Container> ) } } export default connect(mapStateToProp)((state) => { const { isFetching, items } = state.posts.list return { isFetching, items } })
Prerender React component for SEO / OGP import React from 'react' export const prerenderReady = () => { window.prerenderReady = true } export function prerenderStaticPage (PageComponent) { return class HOC extends React.Component { componentWillMount () { prerenderReady() } render () { return <PageComponent {...this.props} /> } } }
Or run the Node.js server for SSR
function renderFullPage(renderedContent) {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">${renderedContent}</div>
</body>
</html>`;
}
export default λ( (e, ctx, cb) => {
return fetchData( 'http://wp-kyoto.net/wp-json/' )
.then( res =>
res.json())
.then( data => {
const renderedContent = renderToString( <App data={data}/>);
return renderFullPage( renderedContent );
});
});
Looking back from 2024 - SPA is good for Native app - Ionic / Capacitor - React Native - Flutter https://getshifter.io/create-a-universal-application-using-ionic-and-w ordpress-with-capacitor/
2019 - 2020 Framework for Headless WP
https://www.gatsbyjs.com/ https://nextjs.org/
https://www.gatsbyjs.com/plugins/gatsby-source-wordpress/ https://faustjs.org/ (since 2020)
Gatsby - WordPress - Pull the post data into the internal data store Query data through by GraphQL Easy to mash up multiple data source Next.js - WordPress - Fetch the post data on the SSG or SSR rendering process Use content as React props Simply integration
Looking back from 2024 - Framework depends on Hosting - Gatsby: Netlify Next.js: Vercel - Choose framework by the business requirement - Speed, Dev / Ops team staff, SSR or SSG, etc..
2021-2022 SaaS / FaaS
Authentication
export const MypageIndex: NextPage = () => {
const { push } = useRouter()
const { user } = useAuthenticator((context) =>
[context.user])
const username = user?.username
useEffect(() => {
if (!username) return
push('/mypage/home/')
}, [username, push])
return (
<Authenticator signUpAttributes={signUpAttributes}>
<MyPages />
</Authenticator>
)
}
Payment /
Subscription
const handler: NextApiHandler = async (request, response) => {
try {
switch (event.type) {
case 'checkout.session.completed': {
await completeCheckoutSession(event.data, response)
break
}
case 'customer.subscription.updated': {
await updateCustomerSubscription(event.data, response)
break
}
await cancelSubscription(event.data, response)
break
}
default:
break
}
return response.status(200).end()
} catch (e) {
console.log(e)
return response.status(500).json(e)
}
}
Split DB for the user management Writer WP_User Amazon Cognito Okta CIC Supabase Visitor ( Member )
Looking back from 2024 - Use IDP is good for user management - SaaS / FaaS empower your site more functionally
2023 AI / LLM
https://platform.openai.com/
Use Large Language Model as an API service
https://www.langchain.com/
Write from WP, Read from Vector Store WordPress Vector Store Post to Vector OpenAI embedding JavaScript App Node.js API Question to Vector Generate answer OpenAI GPT-4
const embeddings = new OpenAIEmbeddings({
openAIApiKey: c.env.OPENAI_API_KEY
})
const store = new CloudflareVectorizeStore(embeddings, {
index: c.env.VECTORIZE_INDEX,
});
const fetchResult = await fetch('https://example.com/wp-json/wp/v2/posts?per_page=100')
const posts = await fetchResult.json()
const documents= []
const documentIndex = []
posts.forEach((post) => {
documents.push({
pageContent: `Title:\n${post.title.rendered}\nContent:\n${post.excerpt.rendered}`,
metadata: {
post_id: post.id.toString(),
post_title: post.title.rendered,
post_url: post.link
}
})
documentIndex.push(post.id.toString())
})
await store.addDocuments(documents, { ids: documentIndex })
Demo: WordCamp x LLM - https://github.com/hideokamoto/wordcamp-asi a-2024-rag https://wordcamp-asia-rag.wp-kyoto.workers.d ev/
Personal dev blog -> Knowledge base - QA bot - Contextual search - Solution based content
2024 Blog -> Knowledge base (?)
CQRS (Command Query Responsibility Segregation) Writer Full text search Web app Vector store Native app NoSQL Chat app RDBMS Voice app WordPress wp-admin Hook Webhook
CQRS can… Optimize for each use case by selecting the best DB type Writer Full text search Custom search Vector store Recommend NoSQL High traffic RDBMS Relational data WordPress wp-admin Hook Webhook
+: Omnichannel content distribution Web app Native app Writer WordPress wp-admin wp-json Chat app Voice app
++: Use realworld content for renewing site ver 2023 ver 2024 Writer WordPress wp-admin wp-json Staging Local dev
3 more Useful usecase of Headless WordPress
Where / Why we use WordPress as Headless CMS? 1. Omnichannel content distribution 2. Minimize the impact of server failures 3. Next generation “full-scratched site development” 4. Microservice application
Basic WordPress site Writer WordPress Visitor Headless WordPress site Writer WordPress Next.js app Visitor
Basic WordPress site Writer WordPress Visitor Headless WordPress site Writer WordPress Next.js app Visitor
Basic WordPress site Writer WordPress Visitor Headless WordPress site Writer WordPress Next.js app Visitor
Basic WordPress site Writer WordPress Headless WordPress site Writer WordPress Visitor If no-cache, content is not shown But page and site will not down Next.js app Visitor
Difference between Cache and Headless frontend Cache (CDN / Nginx / etc..) ● ● ● Save as Static file Depends on origin behavior When Cache has expired, the page will be down. But easy and simple Headless frontend (Next.js / etc…) ● ● ● Insert the API response Can run standalone When API Cache has expired the page will be partially down ( Page is worked, but no content ) But head to build
Where / Why we use WordPress as Headless CMS? 1. Omnichannel content distribution 2. Minimize the impact of server failures 3. Next generation “full-scratched site development” 4. Microservice application
https://www.figma.com/blog/introducing-figma-to-react/
Common Theme development Design data (psd / Figma / etc..) Static HTML WordPress Theme Design data (psd / Figma / etc..) Starter Theme /w Theme Unit test CSS / JS / PHP + Content Data https://speakerdeck.com/torounit/2023-11-05-kansai-wordpress-meetup
Common Theme development Design data (psd / Figma / etc..) Static HTML WordPress Theme Design data (psd / Figma / etc..) Starter Theme /w Theme Unit test CSS / JS / PHP + Content Data https://speakerdeck.com/torounit/2023-11-05-kansai-wordpress-meetup
Common Theme development Design data (psd / Figma / etc..) Static HTML WordPress Theme Does this HTML file support... ● Template tag ● Default CSS ● Default block -> How many custom block should we made? https://speakerdeck.com/torounit/2023-11-05-kansai-wordpress-meetup
https://astro.build/
--import { loadWPPosts } from '@libs/wordpress';
import Card from '@ui/Card.astro';
import CardTitle from '@ui/CardTitle.astro';
const posts = await loadWPPosts()
---
<div class="flex flex-col gap-16">
{posts.map((article) => (
<Card class="md:col-span-3">
<CardTitle href={`${article.href}`}>
{article.title}
</CardTitle>
<CardCta>Read article</CardCta>
</Card>
))}
</div>
Similar coding style
to WordPress theme
Block theme development Design data (psd / Figma / etc..) Starter Theme /w Theme Unit test CSS / JS / PHP + Content Data HTML oriented development Design data (psd / Figma / etc..) Static HTML Astro Static Site https://speakerdeck.com/torounit/2023-11-05-kansai-wordpress-meetup
Where / Why we use WordPress as Headless CMS? 1. Omnichannel content distribution 2. Minimize the impact of server failures 3. Next generation “full-scratched site development” 4. Microservice application
Recap: CQRS for WordPress Writer Full text search Custom search Vector store Recommend NoSQL High traffic RDBMS Relational data WordPress wp-admin Hook Webhook
Team structure oriented architecture ( Conway's law ) Marketer Marketing Content Service Client / Customer Testimonial Service Developer Developer Guide Service WordPress Sanity microCMS Document Generator They can update their Content Service anytime they want
Team structure oriented architecture ( Conway's law ) Marketer Marketing Content Service Client / Customer Testimonial Service Developer Developer Guide Service WordPress They can update their Content Service anytime they want Sanity microCMS Document Generator => Each team need to get staff and resource for dev their system.
Lite weight example - Blog: WordPress Product/Books: microCMS OSS: npm/WordPress.org Bio/profile: Gravatar and Frontend is Astro https://hidetaka.dev
Important things
From “State of the Word 2015” by Matt Mullenweg https://wordpress.tv/2015/12/07/matt-mullenweg-state-of-the-word-2015/
Should NOT use Headless WordPress 1. Small budget project 2. No JavaScript experts 3. Early stage Startup 4. Small development / operating team 5. Have a strong WordPress experts
Should NOT choose Headless WordPress 1. Small budget project 2. No JavaScript experts 3. Early stage Startup Try Block theme at first 4. Small development / operating team 5. Have a strong WordPress experts And focus on your main business
Conclution ● I finally submitted my homework "Learn JavaScript deeply" for 9 years ago ● Headless WP may help you for using your content more effective ○ ● Omnichannel / Reduce server down effect / CQRS / microservice architecture Until clear the benefit of Headless WP, choose Block theme at first.
One more things
Learning new technology has given me new horizons.
Themes Plugins WordPress Writing more…
Themes Plugins WordPress Writing more… WP API
Themes Next.js Astro Plugins Microservice WordPress WP API Writing idp / payment more… LLM / RAG
“Connecting the dots” - Steve Jobs https://www.youtube.com/watch?v=UF8uR6Z6KLc&t=1s
Cat React Plugins Trip Block Tea Blog Next.js “Connecting the dots” WordPress WP API LLM AWS - Steve Jobs Event Sourcing Themes Vector Store micro services https://www.youtube.com/watch?v=UF8uR6Z6KLc&t=1s
Thank you! - x.com/@hidetaka_dev - wp.org/hideokamoto - hidetaka.dev