Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.

Powered by RedCircle

Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.

You can subscribe to Press This on Red Circle, iTunes, Spotify, your favorite podcasting app or you can download episodes directly at wmr.fm. 

Faust.js is a JavaScript framework made to unleash the power of WordPress for headless websites. Faust is one of the only, if not the only, JavaScript frameworks specifically built around headless WordPress, and Faust.js officially came out of beta on June 12th, 2023. And may even have some features coming up soon just in time for WordCamp US, which is happening next week. So my guest today is Joe Fusco, a Senior Software Engineer at WP Engine who’s working on Faust. And we are going to talk about some of these new features and what’s changed since Faust has come out of beta.

Joe, how are you doing today?

Joe Fusco: Good, Doc, thanks for having me.

Doc Pop: Yeah, thanks so much for joining us. Let’s kick this off with just letting us know, how did you get into WordPress? 

Joe Fusco: Yeah, of course. So my WordPress origin story, I started using WordPress in 2013 around version 3.5. At the time, I was just working on an idea that I had, just building out some minor sort of sites and tinkering around and actually got my foot in the door with a local agency in Rochester, New York, building some custom themes.

And from there, I got my first remote job working for Inksub, which is the company behind WPMU Dev, EduBlogs, and Campus Press. So I got a little time with each of those parts. So I worked for those companies and then from there, I actually moved down to Tampa, Florida, where I had an opportunity to work for a manufacturing company that was using WordPress not only for their marketing site, but kind of internally as well for a bunch of different tools. So I got my feet wet with Headless WordPress then.

I did a lot of custom development there. That was during the pandemic, so everything was switching to remote. I actually had an opportunity to come back to Rochester and that’s when I started working for WP Engine. So yeah, it’s been great ever since.

Doc Pop: You mentioned something there, I hadn’t thought about, but you were doing WordPress, working with some great themes and products. And then when you moved to Florida, you were still doing WordPress, but you were doing headless WordPress for a factory. Like that sounds really interesting to me and I feel like you gotta dive into that tidbit just a little more.

Joe Fusco: Absolutely. Yeah. So this opportunity, I just got an email one day saying, “Hey, we like your stuff on GitHub. Can we have you come down?” 

And I thought it was fake at first, it just seemed really spammy. And so I was like, yeah, sure, I’ll come down.

And they offered me a job. It’s with one of the world’s largest door manufacturers. They have a few buildings out in Tampa. And it was really surreal, moved the whole family down there, we were there for three years. And it was a lot of headless sort of components that we started to build out.

So the actual org, the marketing side was very familiar with WordPress. They were very much invested in WordPress. So using WordPress headless kind of made sense just given that we already had those systems set up at the time. So yeah, there was some pretty cool things that were created out of that, like some door configurators.

Doc Pop: I love this, thank you so much for diving into that. 

Joe Fusco: Oh yeah.

Doc Pop: I love that the story took this turn into the world’s largest door manufacturer and headless WordPress technology and it’s all tied together. Let’s get back into talking about Faust. I believe that Faust.js first, WP Engine first launched a version in late 2021.

Like September 2021. And just recently, a couple months ago, they have come out of beta with the official release of the product. Can you just tell our listeners what is Faust.js and what has happened in those few years between the start of the project and it coming out of beta?

Joe Fusco: Yeah, so certainly, Faust.js originally started as a, I believe, a sort of a hackathon project and then evolved from there. Went through a few different sort of phases. One was with GQty, which is a GraphQL Client. From there, it just wasn’t the best tool for that time as we were scaling.

So we decided to switch to Apollo. And from there, we’ve been building out a lot of new features. Most recently coming out of beta, we just wanted to kind of indicate to the community that this is a production ready sort of framework, so while nothing specifically was tied to that 1.0 release, there have been some huge sort of ideas that have come out that we currently have RFCs for on the GitHub. 

Doc Pop: So let’s talk about these RFC’s. First off, I don’t see many requests for comments on plugins in the WordPress community. Oftentimes, it seems like maybe developers are listening, checking on Twitter or things like that. But, the actual kind of opening it up and getting feedback. That’s pretty interesting. Maybe that’s because this is such a big project that that’s why y’all are doing that.

But I was wondering before we get into the specific RFCs, maybe you could just tell us why did y’all go to GitHub and reach out for comments from users?

Joe Fusco: Yeah, so Faust has been an open source project. However, it’s been sort of corporately sponsored by a WP Engine. So with that comes its own challenges. We have our own process internally, but we’re on GitHub open source, and there’s the whole open source culture.

Around that with other engineers contributing back. So there was really just a little bit of a gap that we were noticing with feedback and not everything being out in the open, or I guess you could say building in public with these decisions.

So wanted incorporate RFCs into our workflow. Get some feedback from the community directly and iterate just in public on these thoughts. So it’s been great so far. We’ve loved the feedback that has been provided and look forward to doing this more.

Doc Pop: One of the first tickets that I saw was a request for comments on React components to Gutenberg blocks. This document provides a detailed proposal for converting existing React components into Gutenberg blocks. People listening should know what Gutenberg blocks are, but these are the block-based editing that WordPress has pivoted to. Can you tell us about what the proposal here is for?

Joe Fusco: The React components to Gutenberg blocks. This is sort of the next evolution of the React Gutenberg bridge, if you will, and essentially what we want to do is take existing React components that are in a Next application and just have those kind of automatically sync over to WordPress. So, if you have a Gutenberg block created in one spot. You don’t have to go and duplicate that and install a plugin and have it on both sides with duplicate code. So we really want Faust to be able to handle that and facilitate that sort of connection between the two ecosystems, if you will.

Doc Pop: And what are the challenges with doing something like that?

Joe Fusco: Yeah, so challenges so far, I mean, we’re definitely still sort of discovering different things with this, but we’ve built some POCs so far and getting us like 90 percent of the way there. So some of the challenges right now, one of the big ones is naming. I know that that’s kind of like not a technical thing, but just, what do we call this thing?

Naming’s always hard. But beyond that, trying to make WordPress think that this block, that WordPress doesn’t normally look for blocks like that are remotely somewhere else, but just getting it to play nicely with WordPress. So as far as WordPress concerns, it would just be a traditional sort of block that you would create maybe with the WordPress helper. I think it’s like NPX create block. 

Doc Pop: In the request for comments, have you all gotten any feedback on this specific issue that has helped your team or has shown that there’s a priority that you didn’t expect to hear about?

Joe Fusco: Not at the moment or not yet. I think a lot of the conversation so far has just been sort of conceptualizing what this idea is, because we’re in this space now where like, no one’s really done anything like this, from what I could see. So a lot of innovation here. And with that comes sort of building those mental models for the community to understand.

Doc Pop: Yeah, I think that’s a good way to put it. This is definitely uncharted territory, as you’re talking about, even with naming. Naming parts of it is difficult, and there’s a lot of working parts, but also I feel like Gutenberg and the Block Editor is still maybe a moving target. Has that been kind of an issue when you’re developing something around Gutenberg that there’s a change from core that was unexpected, or is Gutenberg pretty stable these days?

Joe Fusco: Yeah, great question. So in the beginning, when I joined the team, yes, there was absolutely some changes that were happening that were kind of setting us back a little bit, just different sort of schemas and whatnot. I would say this year, it’s been pretty stable, at least with the parts that we’re utilizing of WordPress.

So it’s been a lot better. We’re really only focusing on those production ready things, but still keeping our ear close to the bleeding edge features of Gutenberg.

Doc Pop: And that’s a good spot for us to take a quick break. When we come back, we’re going to continue our conversation with Joe Fusco about Faust.js and Headless WordPress, so stay tuned for more after this short break.

Doc Pop: Welcome back to Press This, a WordPress community podcast. I’m your host, Doc Pop. Today, we’re talking to Joe Fusco from WP Engine about Faust.js and what’s happening with the request for comments for some proposed changes. And we were talking earlier in the show about how not many of the plugins that I follow put out requests for comments that I see, but maybe they do, and I’m not that tuned into it, but we’re talking about the ones that are being put out by the Faust.js crew now, and we talked about one RFC for React components to Gutenberg blocks, another one that I think is worth bringing up is Next.js, AppRouterSupport, and Faust. Joe, can you tell us what is the proposal here?

Joe Fusco: The Next. js App Router support and Faust proposal. We’ve done a bit of research into just seeing how we can support the new App Router feature in Next.js. So with that, we propose some possible solutions here. 

But essentially, what we’re trying to do is AppRouter is using React server components. So what that means is we can kind of fetch data from WordPress on the server, rather than making one big sort of GraphQL query to grab everything as you can currently see in our current examples on the Faust repo. So yeah, we’re all really excited about this.

It kind of opens Faust up to be more framework agnostic as well. Just being able to support React server components in general. So, you can imagine maybe you have some custom fields on a post and maybe some custom fields somewhere else or like a menu. Ideally, we want files to be able to handle fetching those or at least be able to provide utilities to help developers sort of lower that friction to getting started with WordPress and headless.

Doc Pop: And I see as part of the proposal, it’s saying that with the introduction of AppRouter, there is a new file called head.Js that has custom support for fetching metadata, which should help users with SEO. Can you talk a little bit about the benefits there?

Joe Fusco: We’ve been working on or just kind of brainstorming how we want to handle this. So SEO is a huge part of WordPress, lots of SEO plugins, and really on the headless side SEO is not, it’s not really prioritized, at least with headless WordPress. It’s kind of like roll your own sort of solution.

So we want Faust to be able to fill that gap and we think that this metadata API could definitely help us get there.

Doc Pop: And also as part of this change, you mentioned it would help keep Faust agnostic. And I’m seeing here that that’s going to help plugin developers and people who use plugins. Can you talk about what this change means? Why AppRouter support could help plugins work better with Faust?

Joe Fusco: Yeah, yeah, certainly. With this proposal, it’s somewhat of a paradigm shift. We don’t think so much like replacing how Faust is currently set up, but more so like just offering more utilities and a helper. So you can imagine a WordPress plugin has some custom settings. Faust provides a tool to just quickly grab those on the front end in your Next app. Yeah, just kind of help facilitate that connection between those two ecosystems of WordPress and Next.

Doc Pop: The WordPress Rest API was released in 4.7. I can’t remember if it was maybe 2016. And I’m just kind of curious about what GraphQL, ’cause we’re talking about that a lot with Faust.js. What does GraphQL offer that maybe people couldn’t get from the REST API that’s in WordPress core?

Joe Fusco: Yeah, yeah, great question. GraphQL allows, I would say the biggest thing, without getting too much into what GraphQL is, but I just shaping your data like how you want it. So I can decide like, hey, I only want X, Y, and Z to be returned from WordPress. I can send a request that just has those things in the order I want them.

And GraphQL through WP GraphQL plugin will provide that in the exact sort of shape that I want. So I’m not having to filter through a bunch of fluff in a response. That might be like REST. There’s a lot of extra stuff there.

Doc Pop: WordCamp US, I mentioned at the top of the show, WordCamp US is coming up, as far as when we’re recording, it’s next week. I’m just kind of curious if, first off, if you’re planning on going to WordCamp US and if people can reach you there. And secondly, if there’s going to be maybe any Faust or GraphQL representation there, like at the WP Engine booth, or any maybe new announcements coming out about that.

Joe Fusco: Yeah, yeah, certainly. So I will definitely be heading to WordCamp US. Pretty excited about that. This will be my second one. I think my other one was in Philadelphia in 2015. But yeah, I will be there, happy to answer any questions, I’ll be hanging around the WP Engine booth. There will be some other folks with me, I believe it’s Jeff Everhart and Jordan Maslin, so definitely come and say hi and pick our brains.

Doc Pop: WP Engine often has great swag. I haven’t seen any, but are there gonna be any stickers or anything for Faust? I don’t know if that community kind of has its own branding yet.

Joe Fusco: So, I don’t believe that we’ll have right now any Faust specific stickers. I do know that there will be other swag there, but yeah, we’re kind of at the beginning of just starting to somewhat brand Faust a little bit as it matures.

Doc Pop: On that topic, if people are interested, if they’re listening to this and they’re interested in Faust, what is maybe a good thing for them to do to learn about it and kind of dive in a little bit to try it out?

Joe Fusco: We would love to have y’all, anyone interested in trying it out. I would say the best way is to just visit our site, faustjs.org. You can head over there to the Getting Started section, and it’ll walk you through one of our example projects, where you can just set it up with a single command and get it running and see how the data flows and works there.

Doc Pop: For that sample project, it’s web based. Do you know if that’s the same as the WordPress, I think it’s called, I don’t know if it’s the WordPress sandbox, but like the kind of online web version of WordPress where you can kind of try it out without actually hosting it. Are y’all using the same thing there?

Joe Fusco: So we don’t have any of the WordPress Playgrounds set up on our current site, but that is something that I’m personally looking at and I’ve been geeking out about too. So I have a Code Pen I could share after this, with a link that has the Faust WordPress plugin set up with GraphQL in the WordPress Playground.

So that’s definitely a quick way to check out the WordPress side of things.

Doc Pop: On the website that you were just mentioning, can people also find a link to the GitHub? Or should we give them a quick link for that as well?

Joe Fusco: Yeah, I can add a link to that, but yeah, GitHub is WPEngine.Faustjs, and that houses our NPM packages and the WordPress plugin, so come and check it out,

Doc Pop: We’re going to take one more quick break, and when we come back, we’re going to wrap up our conversation with Joe Fusco about Faust.Js, GraphQL, and Headless WordPress, so stay tuned right after this short break. 

Doc Pop: Welcome back to Press This, a WordPress Community Podcast. I’m your host, Doc Pop. Today, we’re talking to Joe Fusco about Faust.js and some of the things that are coming. We’ve talked about the request for comments. We’ve talked about officially coming out of beta. We’ve talked about WordCamp US. And I guess the last thing I wanna ask Joe is I’m always curious when there’s new technology like this, if there’s ways for me to kind of see it in the wild.

Are there any good examples you can think of Faust.js being used in the wild for people to kind of play around with, or at least just hear about the story of how it’s being used.

Joe Fusco: Yeah, absolutely. So we’re really happy with the amount of adoption that Faust is getting so far. So much so that even WP Engine right now is utilizing Faust and hosted on our Atlas platform. So definitely check that out, see how blistering fast it is and yeah, it’s really cool. 

On faustjs.org, we are planning to add a little showcase section that highlights some of those awesome sites that are currently using Faust. And yeah, one of those being our main site, WPEngine.com, on the Atlas platform as well. 

You don’t need to be on WP Engine to use Faust. Just want to clarify that. It can be used with any sort of platform. But we do feel that Atlas is the best environment for Faust to kind of be hosted on.

Doc Pop: And we didn’t talk about Atlas in particular. Do you want to quickly tie in the difference between like Atlas and Faust? 

Joe Fusco: Yeah, so Atlas is WP Engine’s headless framework. So that’s like, if you want to host a WordPress site, and the Node side, the next step, Atlas is where you want to go. There’s also a bunch of other tools that are offered with that, such as Atlas Search. It’s pretty powerful, a lot of awesome features going into that and actively being developed.

Doc Pop: Well, that’s a great spot for us to wrap up this conversation with Joe Fusco. If you’d like to learn more about Faust.js, you can go to faustjs.org. You can also find them on GitHub. And I’m sure if you look around on Twitter and other places, you’ll be able to find people talking about it as well.

Doc Pop: Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.