Frontity–Theming WordPress with React

Written by David Rhoderick on October 17, 2020

WordPress powers almost 40% of the web because it is easy to use, customizable, and features an extensive ecosystem of enhancements. Using WordPress gives you, your content creators, and your marketing team the power to easily create and edit content on your website while opening a world of opportunities to developers to easily sculpt the website in code. However, until now, it’s been necessary to theme WordPress websites, which is the process of coding the appearance and often the behavior of WordPress, in PHP or related technologies. Enter Frontity, a ReactJS framework designed specifically for WordPress. Using ReactJS with WordPress gives you the performance of a single-page application, the modernity of ReactJS, and decouples the front end from the back end of the website, which provides an additional layer of protection as well as the freedom to leave WordPress in the future.

Where did Frontity come from?

After meeting with the founder of Frontity, I learned the story first-hand. Basically, a small web development company had to speed up a client’s WordPress website. They coded their first version of a React + WordPress theming solution custom fit to that client’s needs (it was actually originally supposed to end up a React Native solution). Next, the developed their following projects in a similar custom-fit style but eventually, Frontity was born as an open-source framework to solve the issue of combining React and WordPress.

Fast-forward to this year when Frontity received $1 million backing from Automattic and K Fund, the former of which is basically the commercial side of WordPress, and then sponsored JSNation 2020. Along with WordPress’s already dominant market-share and a growing community and user-base, the future of Frontity is looking pretty good enough to hang your hat on.

What is Frontity exactly?

Frontity uses Javascript packages and configuration files to quickly get React developers interacting with the data provided by PHP from MySQL into the Javascript environment. Of course it helps to know the WordPress side of things to modify WordPress’s output for React.  Then coding the website as a single-page application in React is easy.

In order to access the data from WordPress, Frontity provides several packages that expose the data. Then one more package, the website’s Frontity theme, uses that data to render the content. At the time of writing this article, coding the theme has some preferred practices but as the framework is quite young, there is some room for experimentation.

Why is Frontity better?

Even though you’d think that with the huge amounts of free and premium themes available and how theming in PHP is completely fine, there are plenty of reasons to be using Frontity.

Speed

One of the biggest advantages to a Frontity website is how fast it runs. Given that you can deploy with Vercel, it is possible to take advantage of their edge network (or CDN) and SSR, or server-side rendering. What this means is that when the website first loads, it loads as if it is a static HTML website, not a PHP website running a MySQL query, from the closest web hosting node to the visitor. Besides making the site faster from a usability point-of-view, this speediness will improve SEO ranking.

Frontity also utilizes styled-components from Emotion.sh, which is optimized styling of the website. In combination with the already bare-bones styling of the site, you’ll see improvements in site speed over a standard WordPress theme, which will load some often unused styles.

The single page application structure means that navigating the website within a browser window is lightening fast. Since different URLs go through React instead of querying PHP, the site loads just the one time and then queries WordPress for new data and saves it for the session. That way, after a user has visited a page once in a session, it loads instantly the next visit. Their developers just implemented link pre-fetching so that pages are loaded when hovering over links, after the browser loaded the current page’s data.

Security

One of the biggest issues with WordPress is security. Since it is so popular across the web, it’s an easy target for hackers and spammers to figure out. If a hacker or spammer can figure out a script that takes advantage of WordPress core, themes, or plugins, they’ll be able to hack some or all of the 40% of websites that use it. That’s why it is so important to keep plugins, themes, and WordPress core up-to-date.

However, with Frontity as the front end, it’s not necessary to keep your website at the same domain as your WordPress installation. In other words, you can use domain.com for your Frontity website and backenddomain.com for your WordPress back end. Hackers won’t be able to decipher the back end domain name from a Frontity website as easily as they can with a standard WordPress website.

You can also prevent search engines from scanning the back end of the website. This should hide the back end of the website from search engine bots, making it even harder to find. Because the front end is on a different domain, indexing the front end is still possible.

Lastly, search and other forms in WordPress can interact directly with PHP. This opens up a vulnerability to interact directly with the database and many have taken advantage of plenty of times. However, since the front end of a Frontity website is written in React, there are also no search forms that execute forms directly to PHP. Your React app can then santitize forms before sending requests to the back end, giving you another location to build a wall around your back end.

React’s Power

Beyond the many plugins that extend WordPress, React brings a ton of UX and UI enhancing components to the developer. It’s just as easy to implement modals, off-canvas menus, animations, and complex visualization libraries as in any other React app. This differs from traditional development in how much easier components are to include and configure. Writing the front end of the website in Javascript means you don’t have to worry about bundling together your vendor and application Javascript and trying to limit what pages run what scripts. This is all handled in React and makes coding a complex and extended website dead simple.

From a developer’s point of view, using React with WordPress opens up a world of knowledge. WordPress is already super well-documented and has a huge community of users who provide helpful solutions as well as its already well-established support team. React is the leading SPA library so developer’s won’t have trouble finding solutions to their library-related problems either.

Future Flexibility

Frontity’s core package basically interacts with the WordPress REST API to pull data from the WordPress backend. If one were to switch from WordPress to Laravel, Contentful, Django, or any other back end technology, as long as the back end can provide a REST API, only the connector needs to be replaced. Traditional WordPress theme development often requires a full rewrite in order to ported elsewhere.

Better than the Alternatives

Frontity was coded around WordPress specifically, it makes the setup much easier than using Gatsby or Next.js in tandem with WordPress. Check out their website for a more in-depth comparison.

The Drawbacks of Frontity

While it seems like this is a great solution to creating a modern WordPress theme, it comes with some caveats.

Knowledge Expensive

You essentially need a React developer to handle the Frontity side of the project and a PHP developer to handle the WordPress side. Some developers can handle both and that might be cheaper than hiring two developers but it’s apparent how this requires additional expertise.

Plugin Support

The Frontity team works hard to provide support for popular plugins but they are still a small team. Additionally, with the community still growing, you’ll find a couple plugins have community-written support but even those might have slow-to-respond maintainers. Additionally, some well-known plugins don’t yet have support, such as WooCommerce, where it’s necessary to built your own checkout in React (not that it is nearly as challenging as doing it in PHP). Of course, as long as growth continues, this should cease to be a problem.

Frontity is Still Young

Along the same lines, it’ll be hard to find too much Frontity-specific support right away. Stack Overflow still doesn’t have too much in the way of questions and answers yet. Also, with the community still pretty small, their official forum might be a bit understaffed at times, even though their development team often get right back to you. These are not huge issues for something so new but it’s something to consider starting your project right now.

Frontity is Opinionated

I’m not sure if this is a good thing or a bad thing. Frontity mention that it is a selling point in that they’ve studied React in-depth and have directed the framework to the best solutions for this use-case. It is helpful in taking a lot of the guess work out and speeding up development and website usability. However, it also means that you are forced to use things like Emotion.sh instead of React Styled Components or including CSS or SASS or their state management instead of Redux or similar. This increases the learning curve if you’ve never used those tools and means that rewriting a website might take a bit more work than simply coding the React components.

Conclusion

Frontity is a new way to code React themes for WordPress. In its infancy, its got a healthy future and growth looks pretty certain. Using React with WordPress results in modern themes that are faster, safer, and more flexible than traditional WordPress themes. If you are looking for a methodology to develop a custom WordPress theme that will probably outperform your competitions’ websites, Frontity is worth looking into.