Skip to main content
Categories
DevelopmentNews

Frontity, a React framework to create WordPress themes

  • Post Author
    By Reyes Martínez
  • Post Date
    Mon Apr 29 2019

These last months have been pretty intense here at Frontity. Back in March we decided to discontinue the development of our mobile theme for WordPress publishers (also known as Frontity PRO) to place all our focus on Frontity.org: an open source framework to create WordPress themes with React.

While we await the release of the beta version, let’s make a recap of what Frontity is and some of the features you can expect to see in the framework.

👉 Update: Frontity 1.0 is now live! Read about the release here.

Frontity, a React framework to create WordPress themes

Frontity is a free and open source framework to develop WordPress themes based on React.

In other words, it allows to build a React frontend for a headless WordPress site, which serves its data via the WordPress REST API.

This approach has plenty of advantages, but in order to build a WordPress theme with React there are a lot of things that developers need to learn and configure: bundling, transpiling, routing, server rendering, retrieving data from WordPress, managing state, or managing css, among many others.

Next.js and GatbsyJS are two great React frameworks that can work with WordPress but none of them is exclusively focused on this CMS. Therefore, there’s still some complex configuration and additional tooling left to the developer.

Frontity is an opinionated React framework focused on WordPress which aims to make everything simpler, even for those developers who are less familiar with React:

  • Focused on WordPress: each part of the framework has been simplified and optimized to be used with WordPress.
  • Opinionated framework: developers don’t need to figure out what tools to use for things like css or state management.

This all means that everything is ready so you can jump in and create a new amazing WordPress theme using React right away.

An alternative rendering engine for WordPress

Frontity can also be described as an alternative rendering engine for WordPress.

Traditionally WordPress generates HTML using a theme based on PHP template files.

When the REST API was merged into core in WordPress 4.7, developers were no longer limited to the PHP rendering engine. They could retrieve their WordPress content and use it wherever they want, which opened a new world of possibilities.

One of those possibilities is to create WordPress themes using React. That’s where Frontity comes into play.

Why WordPress and React?

As at time of writing this post (April 2019), WordPress powers over 33% of the web. Its market share has been growing over the last years and it shows no sign of slowing down.

With the shift to Gutenberg as well as the rise of headless CMS approaches, the WordPress community has started considering React for their projects. Beside this, modern libraries like React are growing popularity and becoming essential to rich user experiences.

If WordPress is great and React too, then why not combine the two? Especially if you want to build a CMS-powered site with modern web development tools.

We believe this JavaScript-based approach is gaining traction in the WordPress ecosystem, so there’s no better time to start getting familiar with it.

How does Frontity work?

With Frontity you still use your WordPress dashboard to edit and manage your content in exactly the same way that you are accustomed to. As you make changes content is automatically updated in your Frontity site, just as it is when using a traditional WordPress theme.

Frontity apps require a Node.js server to run on. This runs in tandem with the WordPress site which is now relegated to providing content to the frontend that is based on Frontity.

  • Frontity requests content from the WordPress REST-API and uses it to generate the final HTML that is displayed in the browser.
  • Frontity is also capable of generating AMP pages using the same React code and CSS.
Learn more about the Frontity Architecture in our docs.

Why a different Node.js server?

React is a JavaScript library. In order to generate HTML for site visitors or for Google AMP, the server needs to be able to run JavaScript as well.

Frontity is prepared to be hosted either in a regular Node.js server or in serverless services. That makes it super cheap and infinitely scalable.

Frontity features

These are some of the features you can expect to see in Frontity. However, please note that not all of them will be included in the beta version.

Zero setup development

Everything is already wired up: React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing…

Lightning-fast loading

Frontity sends an HTML that is ready to start navigating the site, so the initial load feels almost instant. No extra assets or round trips are necessary.

This HTML is fully functional and navigable without Javascript. Once React loads, it takes control of the app. Users don’t notice any change, it is 100% transparent.

Instant in-app navigation

Once React has loaded, our router prefetches other routes and data automatically. Users never have to wait when they navigate inside the app.

Serverless and horizontal scaling

The Frontity server is so small it suits perfectly the serverless requirements. That means infinite scaling for the front-end. Frontity is also prepared to scale horizontally in any Node server.

Extensible (via Frontity extensions and NPM packages)

Frontity has been designed to be extensible by default. Similar to how plugins work in WordPress, the framework provides a very flexible and easy to use package management interface that enables you to quickly extend the platform according to your needs.

You can create your own custom Frontity packages (extensions), or add new functionality by installing any of the existing packages without code changes nor having to build them from scratch.

There are already many created for Frontity which usually require custom engineering in headless WordPress implementations: Analytics, Google Ad Manager, Smart AdServer, WordPress comments, Contact Form 7, etc. These packages are reusable among projects.

Apart from these extensions, there are also other interface tools specifically created for Frontity: as context routing, swipe navigation, infinite scrolling, html-to-react, gutenberg-to-react, etc.

Lastly, our themes can use any of the 80.000 React packages currently available in npm.

Server Side Rendering

Frontity responds with a fully populated HTML file generated with React. This reduces the time required for the first contentful paint and ensures that the SEO is not harmed.

The content is retrieved using the WordPress REST API. Once React is loaded in the browser, it takes control of the page and does its magic.

Code Splitting

Frontity uses webpack to split the code and send the minimum code required for the app to work. Also allows developers to dynamically load components with the help of loadable-components.

Battle-tested

We’re open sourcing the internal framework we’ve been using to power big WordPress news sites during the last 2 years. Used by millions of readers, Frontity is proven for building engaging frontend experiences.

You can learn more about our story here.

Key differences from GatsbyJS

Frontity is in a sense similar to GatsbyJS, but there are some key differences:

  • 100% focused on WordPress: this means the number of concepts that you as a developer need to learn are minimal. No complex configuration is necessary to get started, and the queries to the APIs that deliver the content are pre-configured for the things that developers most frequently need.
  • Opinionated and extensible: Frontity has its own state manager and it uses Emotion for the CSS. Thanks to that developers do not need to learn the complexities of such technologies as Redux. At the same time it powers a very flexible extensibility pattern, more similar to that of WordPress itself, rather than that of other JavaScript frameworks. Themes and extensions can be activated and deactivated without code changes.
  • Rendered dynamically: the HTML does not have to be rebuilt each time the content is edited or new content is published. Our preferred approach is SPR, although there are other ways to configure it.

In addition:

  • There is no need to learn GraphQL or the REST API. The data is available to you using Frontity’s built in State Manager.
  • Frontity can output HTML suitable for Google AMP with exactly the same React codebase.

Wrapping up

I hope this post gives you a better understanding of what Frontity is and how it works. To learn more about it and how to get started, please visit our documentation.

If you still have any questions or just want to share your thoughts, feel free to join our community forum. One of our goals is to build a community of people interested in WordPress and React. Come join us, we’d love to learn how Frontity can help your projects.

To keep up with all things Frontity and the latest product updates, subscribe to our newsletter here.