Building React frontends for WordPress

Hello, everyone. I am Pablo Postigo, co-founder and CEO of Frontity. I founded this company five years ago, and I had one obsession. Make it easier to create modern user experiences with WordPress.

So first, let me give you a bit of context about WordPress. WordPress is the most popular content management system on the web. It powers 30% of it. It is also one of the biggest open source communities out there, with over 15,000 themes and more than 55,000 plugins. And it's also the platform of choice for marketers and content creators.

But I guess that you will be asking yourselves, why is this guy talking about WordPress on a JavaScript conference, right? Well, it is because after years of working hand-to-hand with WordPress publishers and developers, we have found a way to combine WordPress in the back end and JavaScript in the front end. So please let me explain to you how we can combine React and WordPress.

There are three main points to keep in mind. The first one is, the first reason is to create a great UI and user experience for the web visitor. At the same time, we wanna maintain a great developer experience for the tech team in charge of creating and maintaining the website. And last but not least, we also have to keep in mind that we need to provide with a great content management experience for the team in charge of managing the content of the website.

So how can we achieve this golden triangle using React and WordPress? It's easy. Since 2016, WordPress includes a REST API. This REST API opens a world of possibilities. And now we can use WordPress as a headless CMS. Using WordPress as a headless CMS means that we use WordPress only in the backend to manage the content and expose it using our REST API in a JSON format. With this REST API, any technical team can choose the technology they want for the frontend. So for example, they can build the frontend with a React application.

Actually, this approach is not new to us. We've been working with this architecture since 2017. With some WordPress publishers came to us with one request. They wanted to improve the user experience of their mobile sites with one goal. They wanted to improve the user engagement of their websites. So in order to help them achieve this goal, we developed a product called Frontity Pro, which was a mobile theme with instant navigation and swipe. This mobile theme was program using React because with PHP and jQuery, it was really difficult to accomplish these features.

This is Gudo, one of these big customers that wanted to use Frontity Pro.

This is their website. You can navigate it yourself using your mobile phones, but please let me go and do a quick demo. So this is their website. It might look like a normal website, but as I said, it has some cool features like the swipe between categories. It also has instant loading in the articles and also has swipe between articles. Our goal was to provide a user experience that was as close as possible to a native mobile app, but on the mobile browser. And as you can see, this website performs just great.

This website, this project was a success and it achieved great results for this publisher. GoodLock saw an increase in every KPI that they were measuring, including their page views, their organic traffic, the time spent in the website, and also an increase in the user acquisition. After helping dozens of publishers, we decided to release all of our technology and open-source our project. And the result was Frontity framework.

Frontity is the easiest way to create lightning-fast websites using WordPress and React. These are some of the key features of the framework. Frontity is really easy to use. It comes with a zero-situp architecture and a suite developer experience. Babel, Webpack, the Routine, the State Manager, everything is configured and works just out of the box. It is also an SEO-friendly framework. We have solved the server side rendering of the app. It is also an extensible framework, which means that you can easily reuse parts of your code among different projects. And not only your own code, but also include themes and extensions created by the community. And as I said, we have been using this framework with Frontity Pro, helping those of publishers and it's battle tested. Frontity Pro has served millions of page views all around the world and is ready for production. Before I finish, I wanna make a quick recap. We have built a solid bridge between two worlds that were totally disconnected, WordPress and React. And we are really confident about the possibilities of this new combination. The WordPress ecosystem is already excited about starting using React in the front end. And we hope that the React community also embraces the possibility of using WordPress in the back end, as I said, to provide a great developer experience, a great user experience and a great content management experience. If you're curious and you wanna start looking and investigating Frontity, I invite you to take a look at our website, frontity.org. You can also take a look at our documentation where we have a really easy step-by-step getting started guide. And I also wanna invite you to join our community where you will be able to start a conversation with the Frontity creators, the community, people using the framework and share all of your feedback. We will be happy also to keep the conversation on Twitter. So feel free to ping us there. And thank you very much for being here with us in the conference.