Press This Podcast: The Rise of Headless WordPress with Jason Bahl Creator of WPGraphQL

Welcome to Press This, the WordPress community podcast from WMR. Here host David Vogelpohl sits down with clients from around the community to talk about the biggest questions facing WordPress developers. The following is a transcription of the original recording.

David Vogelpohl: Hello everyone and therefore welcomed Press This the WordPress community podcasts on WMR. This is your host, David Vogelpohl, I support the WordPress community through my role at WP Engine, and I love to creating the very best of local communities to you discover every week on press this as a remembrance, you can find me on Twitter @wpdavidv, or you can subscribe to press this on iTunes, iHeartRadio, Spotify, or download the most recent escapades at wmr.fm. In this escapade, we should have done it at like Halloween time because we’re going to talk about is the rise of headless WordPress with Jason Bahl, the architect of WP Graph QL, Jason, welcome to Press This.

Jason Bahl: Yeah, thanks for having me.

DV: So glad to have you here and of course we don’t mean like the fright picture copy of headless WordPress but a couple of JavaScript in WordPress and all this other kind of things. So for those listening today. Jason, comes to us, he’s from WP engine the place I work at as well, but he’s also immensely popular in the headless WordPress space hole WP Graph QL, but he’s going to be sharing his thoughts today about why WordPress is playing such a big role and headless, what it takes to start using headless for your website, WordPress site, and some of his favorite implements and approaches for build with headless truly grateful to have him on today to talk about this coming from a very important with you. Jason, I expected this issue of all my guests I’m very curious about your answer. Briefly tell me your request origin story.

JB: Yeah, sure. So I think it was 2008 I guess I was doing a lot of flash website building, and my cousin. Want a website where he can manage the contents I was like, Oh man, that’s not that easy to do with a show area. So I was looking into various ways of hooking up some sort of CMS to a burst area and that’s when I detected WordPress had an XML RPC, and used WordPress at the time, found out about this API that could work with flash site I objective up not building anything to connect the two, but met WordPress started playing with it and are now working full time in WordPress pretty much ever since.

DV: I feel like that’s a unusually apropos cause storey for you, Jason. Yeah, like you’re mostly trying to set up WordPress to leverage flashers the front end back in 2008. And this was pre custom post categories and custom-built meta battlegrounds that would otherwise have been released in 2010 So you were trying to do this before. WordPress even had that kind of data organization layer, as part of core.

JB: Yeah, back then. I make the common coming was to like set up different categories to act as a custom-built affix kind essentially it’s like, if, if this affix is categorized a certain way analyse differently, was, was various kinds of approached back then. But yeah, I hadn’t even heard of WordPress back then I placed it up, made me longer than the five minutes that was advertised. But, but, yeah, I fell in love with it right away I was like, I’ve never, never known something that experience so potent to like give useds the possibility of establishing for the web.

DV: extremely apropos you’re unquestionably the first patron to have a headless WordPress SEO origin story. You recently assembled WP Engine tell me what the hell are you do there.

JB: Yes, so I started WP Graph QL as an open root programme. Back in, let’s see 2016 and been working on that largely as a side project I manipulated the last year and a half at Gatsby, working on it, and then come over to WP Engine my character against who’s going to transition to work on not WordPress as much. So WP Engine realized that it was a, an important project to keep pushing forward. WordPress into the modern era. And so I’m, I’m here at WP engine still manipulating mainly on WP Graph QL and its immediate ecosystem like currently today I’m working on WP Graph QL for advanced custom environments which is an extension I maintain to bridge those two worlds together. But yes I’m mostly working on pushing forward WP Graph QL immediately ecosystem, and then working with other crews now at WP Engine that are focusing on headless WordPress and assist them. You know only navigate the seas, and construct slog headless WordPress event for everybody.

DV: That’s great. You get to continue to work there for WP Graph QL I know so many people who rely on it, and I’m glad to hear about you kind of working on those increases, particularly there with ACF. For those that are listening though that may be unfamiliar. What is headless WordPress.

JB: Yeah so headless WordPress would be where you use WordPress, as the content management system so consumers would log in and manage data there. But you would use the data, you would render the data in something other than the built in WordPress theme layer. So very common are pretty easy to understand example I suspects would be like a native iOS application that needed to get data out of WordPress. Since there’s no PHP theme layer in an iPhone or an Android phone, you need to serve that data, some other way. And so, typically that’s done using an API like WordPress REST API, or in my speciman back in the day with Flash there’s an XML RPC API or web Graph QL today. So gives your material, separate than your presentation, and allows different present layers to do something with the data could be an iOS app or the biggest trend is JavaScript applications like React or idea our JavaScript structures that can take data out of WordPress and interpret them. We got native apps. You can even do like enunciate apps like Alexa knowledge to get data out of WordPress and speak the information for example, or whatever.

DV: There have been many interviews on headless over the years, and I feel like every single person I’ve talked to that including off air and everything else, when they hear headless WordPress they reflect decoupled JavaScript. But you talk about it in the lens of like precisely a different render front end. The aim mentioned, iOS app and we maybe perhaps if you were able to gale the clock back the blink app, but do you find it’s common that people like utter that assumption that it’s the decouple JavaScript approach.

JB: Yeah, I make, I guess given a lot of people’s minds, then there synonymous. I think there’s a obviously JavaScript is wildly favourite right now. I represent it has grown up for a long time. So yeah, a lot of people in their intellect they think they think they’re synonymous, and to a large degree, they kind of are, but yeah it’s it’s wider than that. Like, When WP when I started WP Graph QL our first help dispute for it was syndicating material from one WordPress install to many other WordPress lays. So it was actually PHP to PHP communication, but we just needed the data, we didn’t. We only needed the data accessible from something other than the WordPress install it was managed on. And so I think that’s the, yeah that’s the broader term but I do view a lot of people that just assume it necessitates Oh expending it with React or expending it with Gatsby or next or something like that.

DV: Yeah, I find that path is pretty familiar to a lot of kinfolks in terms of like these needs to determine WordPress extensible. And, you know , not realizing that if you only lopped off the yield character you basically have a headless WordPress once this gets interesting, like how more out perhaps that notion or that apprehension, might stir the decoupled JavaScript part approach more friendly for tribes, because it’s it’s really merely an extension using new technology that’s something that WordPress makes have probably been doing their entire WordPress career.

JB: One thing I like to note too is it doesn’t have to be like an all in thing, right, like, you can still use parts of WordPress to render things and maybe something else to render other things like the native iOS app, like get the newspaper I cultivated at, where we use WordPress theming layer for the regular Word WordPress sites, but we had our iOS apps also so we had WordPress rendering for the web. We had iOS apps getting data regarding an API. And then we had like a separate data warehouse team that was also getting data from the API. So, and then we use the content for publish, as well, so we had all these different rendering machines and WordPress itself was one of them.

DV: We need a word for this like the Hydra or something with all these foremen. It’s such an interesting erect to think about because so many people have assumptions going into what to what it means and some of it seems foreign to tribes and then familiar. But then if you look at kind of the base factors, it’s very similar what folks have been doing for a really long time. Thank you for that synopsi really really helpful. Now I want to kind of dive next into like well what are some of the benefits that that headless WordPress requires but we’re gonna take a quick break and we’ll be right back.

DV: Hello everyone, welcome back to press this the WordPress community podcast WMR. We’re interviewing Jason Bahl about headless WordPress, Jason right before the transgres you clarified what headless WordPress was and a lot of different contexts beloved that by the way. So I kind of want to now transition into like well why, and maybe more in the decoupled JavaScript sense but like what advantages is headless WordPress provide.

JB: Yeah, so, yeah, when we’re talking about benefits to headless WordPress, merely, I meditate, I think you’d benefit by separating concerns already so if you separate your data from your presentation I considered that interests, various parties, makes, extremely, but if you can focus on inputting content and not have to worry about how it’s going to be interpreted. I considered that frees the artistic process of creating content. And then for private developers, it allows them to use data that’s managed in WordPress in various ways without restriction, I approximate, to like the templating machine of WordPress itself. And then there’s some lawsuits like previously talked about mobile, but some, some disputes, there’s no way to natively do WordPress on as a native app so you have to get the data from an API so it benefits, interests, developers, and content publishers by have the means to separate the contents from demonstration. The road I look at it, it allows content developers to use a CMS that they probably already familiar with 40% of the web is publishing with WordPress today. It lets developers to pick and choose the tools they want to use so whether that’s react or position or WordPress and PHP or something else, they can, they can pick the front end technology they require or are required to use or whatever. And then, one of the large-hearted driving forces behind, especially the JavaScript movement is operation and security. So by decoupling your WordPress your CMS from your front end, like something like Gatsby, Max can take data from WordPress and statically build pages that are deployed to a CDN. And so when the end user tours your website, you get no second response of the sheet, because there’s no live interaction back to the CMS. So the pages are built ahead of time. And so that’s one of the large-hearted driving force is the performance and security benefits of things like Gatsby or next that go data out of the API, fitted with templates deployed to CDN around the world. And then useds aren’t interacting with a live CMS so that’s I think that’s one of the big elicits to extremely the JavaScript.

DV: Yeah, it’s funny you didn’t mention this firstly I reflect every time I’ve talked to someone about this in the past, like provides insecurity and that’s the first thing full page caching is possible outside of, you are familiar with, the couple JavaScript approach. Why is it unique or special for the couple JavaScript, headless WordPress builds.

JB: Yeah so okay so yeah this is an interesting thing very, so I think it extends slightly beyond that even. Yeah, of course you can do you can represent WordPress really fast, but a part of it’s the developer experience around it too, right. If you’re traditionally in WordPress, you have your templates in PHP, you have your JavaScript in a JavaScript file Yeah, your CSS and CSS file with SASS or chortles or something right. And so we’re separating, where we try and separate concerns by engineering , not by actual concern. And this rise of like constituent based structures, especially in view and react allows you to couple your concerns if you can build components, where all the concerns of an individual component let’s say we’re building like an columnist bio box at the lower end of a blog affix that that ingredient requires certain styles or asks certain data that requires certain markup. And in a traditional WordPress theme you’re going to have separate files, where you have to manage different technologies and different registers, even though they all are related to this one thing with factor based structure you can bundle all that into a single ingredient. And then down the road as your lotion alterations. All you have to do is modify that constituent, the forms the data requirements, and, and the markup are all in one place. If you go look at like most WordPress sites that have been around for more than six months go inspect the css, move to the bottom and you’re gonna find a knot of important calls in the CSS because over epoch, your markup mutates, you know your whatever else changes and it’s very difficult to clean up your tech obligation over duration because you’re concerned, you’ve separated engineering not concerns. And so, separating your data from your markup allows you to take advantage of component based design. Sorry, my wife’s got some advice here.

JB: Yeah so separating separating the data from the presentation layer allows you to use component based building in a manner that was that you can efficiently do in WordPress with PHP templating. So that’s a big thing so the tech that gets cleaned up as you improve if you adopt the component based architecture. And then, yeah, the deploys to CD goals. Yeah, that this can be done in WordPress. Right, I know there’s like approach I imagine does this type of thing, and other multitudes make love where they cache your totality sheet, but there’s no way, like, there’s no good way to optimize like your resources for any given page so you can deploy a WordPress page to CDN, but the JavaScript you’re loading for the CSS you’re loading for “its probably” not all necessary for any yielded page, where the decoupled coming, will, will put your material through a improve implement exclusively include the forms you need for any given sheet only the JavaScript to you for any given page so when it is served from a CDN. Typically, it’s much smaller registers that the subscribers has to wait to download

DV: I remember that from my very first sinner dates internet daytimes back in 1996 less data was faster. Oh, I can. Okay so this is like from the high level the benefits you get advantages around performance and security and certainly how your team works on your site and the capabilities they have prototype building modifications and Tech Decks, there’s always benefits. Somebody is like interested though they’re like okay, I’m gonna give it a shot. What talents or tools do crews need to have in order to build a headless WordPress site. And for the rest of the interview Jason when I say headless WordPress she’s saying a couple jobs.

JB: Yes. Yes. So I think there’s two sides to it, right, there’s, there’s obviously the WordPress side which is a PHP located and MySQL based CMS. So if you need to expose data from the CMS, that is not already exposed by something like WP Graph QL, you would need PHP and probably MySQL abilities at some grade and some understanding of how WordPress wields and, you know, capabilities and permissions and things like that,

DV: like a ordinary WordPress developer, those kind of knowledge you need, because you’re gonna have to get the data out into the JavaScript side.

JB: And then on the flip side, you would need some suffer with JavaScript, react and view, tend to be the leaders in this space. So if you have familiarity with either of those fabrics, that’ll vanish a long way. And then there’s obviously different API’s to work with WordPress as the REST API, like I did with XML RPC or Graph QL so I’ll, I’ll move towards the Graph QL. So having some intimacy with what Graph QL in general, is WP Graph QL exclusively with “il be going” a long way.

DV: So, we’ve got, like, first and foremost is, plainly, It’s an organization that has a WordPress makes, familiar with PHP MySQL certainly HTML, CSS, but then you need to build the JavaScript, rendering line-up so that there you kind of talked about reactant view. And you then need to connect the WordPress content side, to the JavaScript side. And for that you need an API, and you’ve mentioned various kinds of the REST API within WordPress itself, or a third party solution like WP Graph QL. Yeah. Okay. And so as companies look at potentially choosing such approaches. I’m just curious, real quick, if they’ve learned react if they’ve started structure like Gutenberg blocks is that helped them in this journey to starting to build these greeting interpreting apps or is it still just like so far apart it’s just this huge learn JavaScript profoundly tour and again merely real quick response on that.

JB: Yeah, I judge, yeah guna Grimberg experience will help quite a bit, it’s not going to translate certainly like perfectly, but the experience of using React and components and state management and things like that would translate pretty good.

DV: Okay, you recollect Matt Mullenweg querying everyone to learn JavaScript deeply.

JB: Yeah, I was in, I was in the room that day.

DV: Oh in Philly, you were so funny. Do you recollect how many people was it. Were you one of the person or persons that, that wooted when he said that?

JB: Possible

DV: you and Zach Gordon maybe are like the only beings that were like Yeah, yeah. It’s really kind of interesting. All freedom, cool. I actually have a ton of more questions, but we’re gonna take another quick break and we’ll be right back.

DV: Hello everyone welcome to Press This WordPress community podcast on WMR. We’re interviewing Jason Bahl about headless WordPress, Jason right before the disintegrate, you gave us kind of a speedy ramshackle of the tools and experience that people would need in order to start structure with headless thank you for asking. It’s also mentioned WP Graph QL few durations maybe you haven’t given us a ton of details. So what is WP Graph QL, and why did you recently double the price.

JB: Yeah. So what is WP Graph QL. So it’s a free, open beginning WordPress plugin that, that turns any wordpress area into a Graph QL server. What that necessitates is, your locate will be given a Graph QL endpoint so like your site.com reduce Graph QL and then entreaty can be made to that endpoint specifying exactly what data you want out of the API. So same to rest in that you’re, you make a request to the API and you get JSON responses with the differences you specify in order to interact with the Graph QL API, you have to specify exactly what data you want out of it with rest you say, I want to affected this endpoint and whatever the server gives me. I have to be okay with where with Graph QL you specify ahead of time, exactly what you want so you can query, you are familiar with, positions and really the title of the post, and you’ll get accurately that response, or you are eligible to even follow riches so you say I require a register of posts with their title, and I too miss the author and the author’s name, and maybe I even crave the author’s five most recent berths. So you can do all this in one request, and you are eligible to specify down to the field exactly what you want. Will redress make the same thing you’d have to hit the berth endpoint, give a JSON payload back which would include the author id and sufficient to constitute request back to get all the authors of all 10 poles that he merely received, then you have to wait for that, and then you have to make another request to get the recent announces from each author. So it settles a lot of burden on the employment make that’s interacting with the API where Graph QL gives you a lot more freedom and control and allows a great deal less data to be transmitted from the server to the client. This is next gen

DV: yeah like a course to describe that, you know, just imagine someone’s like listening to this podcast right now and like they’re multitasking and they’re writing a parsing script for some REST API response that’s like scattered with random that they’re like oh my gosh I got to parse this all out, it’s like, it’s a real trouble as makes work with it I imagine beings use WP Graph QL for a lot more than decoupled JavaScript. Is that true-life,

JB: yeah the first operation client I mentioned it earlier the our first exert instance was syndicating content from PHP servers to other PHP servers. And part of it was the, the amount of data we were transmit over the cable was pain and the amount of round trips we had to prepare to get all the data, like when you, when you syndicate a blog announce. You’re not just syndicating the posts, you’re syndicating the author, the posts and the terms the taxonomy terms that are associated with it and the media. So there’s all sorts of system round trip, we were doing with Ras or with Graph QL we could specify exactly what we needed and make one request for it, and it ought to have been built the developer process much easier because they were making one request and it’s very explicit so even six months down the road even if something wasn’t working. It was definite what we needed, and then we can pinpoint that with remainder It’s like something changed on any given endpoint. It’s hard to know what it was before because the coach-and-fours says hey give me this resource, And you don’t, as a make trying to troubleshoot that you don’t know what it was yesterday versus today with Graph QL you know exactly what the consumer was asking for. So, it’s a lot easier to troubleshoot.

DV: Yeah. Gotcha. So like, you’re not like “ve lost” the grass with all this parsing and you’re not slamming your application server with request because you’re making more efficient applications which are quite straightforward as a developer to deal with. I desire that summary. You mentioned earlier that you’re working to oblige WP Graph QL extension for ACF better, that’s cool. Too, I was joking earlier Chris about doubling the expenditure from$ 0 to $0. But you clearly have a lot going on. What are you working on a WP Engine that you’re stimulated about.

JB: Yeah so I mean my work is done for Graph QL and the engine are pretty much synonymous, I do collaborate with other crews that are working on the headless room so I would say don’t be Graph QL for advanced custom-built disciplines we’re doing some big changes to that I published like a preview video of a feature I’m working on just yesterday but YouTube. So that’ll be probably published to the plugin. This week it’s a big refactor of how location rules map to the schema. So ACF is a big one. I’m working like I work together with external squads like the team that’s working on WP Graph QL for Gravity Forms. Like I chitchat with them and cure, help them lead the improvement on that plugin. One thing that’s, that’s happening is, plugins are taking ownership of the graphical interactions themselves. So, like custom-made berth sort UI popular plugin for adding custom-made pole sorts. Only took ownership of the Graph QL amalgamation I used to have an extension that bridged WP Graph QL and that plugin, They melded that into their plugin of their owning that interaction. Now, the events calendar, had a Graph QL postponement and in February, they took ownership of that as well, it’s not bundled into the events docket core but they made owned of maintaining it and use it for you as it can.

DV: Painter to keep up with all these different integrations and plugins, it’s good to see that that’s a really positive sign for momentum in the VP graph UI view. Yeah. Anyway, coming out of their style to waste their own time to maintain it. Are there.

JB: Yeah, precisely. And then Yoast is doing the same thing now before that they’re working on right now or a discipline of the Yoast WordPress SEO by Yoast, that they’re working on. Going the desegregation themselves as well so I think that’s one of the things that elicits me the most is just how much the community is saying hey, this thing’s important. Let’s kind of rallying around it, share owned of it.

DV: Yeah, absolutely, that’s, that’s awesome information and that’s great to hear that progress and sounds like, you know, with that, with that kind of adoption. The future’s bright I’m glad you’re able to spend time “workin on” WP Graph QL again know a lot of folks rely on that solution. Jason , thank you for coming in for connecting us today.

JB: Yeah, absolutely.

DV: Awesome. If you’d like to learn more about what Jason is dependent upon you can inspect MVP Graph QL comm or check out the headless squad he sits on a WP Engine at WP Engine comm Ford gash Atlas. Thanks everyone for listening to press this the WordPress community podcast on W Mr. Again, this has been your emcee, David Vogel poll, I expressed support for the WP Engine, sorry the WordPress community through my character at WP Engine and I love to drawing the very best of local communities to you here every week.

The post Press This Podcast: The Rise of Headless WordPress with Jason Bahl Creator of WPGraphQL materialized first on Torque.

Read more: torquemag.io