frontity-framework-featuredimage

in Development

Frontity, a React framework to create WordPress themes

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 build WordPress themes with React.

Our next milestone was to get a beta version ready in one month. Although the launch has been a bit delayed, we are still working hard to release it in the coming weeks! 💪

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

Frontity, a React framework to create WordPress themes

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

Building a React theme for WordPress has never been easier

GET STARTED

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 explained as an alternative rendering engine for WordPress.

In the past, the only way to get HTML out of WordPress was to use its PHP rendering engine.

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 of April, WordPress powers over 33% of the web.  Its market share has been growing over the last years and it shows no signs of slowing down.

Usage of content management systems

Source: w3techs.com

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, 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 already accelerating things in the WordPress ecosystem. There’s no better time to start getting familiar with it.

How does Frontity work?

Frontity apps live in a Node.js server tailored for WordPress.

  • It uses the WP API to retrieve content and generate the final HTML.
  • It is also capable to generate AMP pages with the same React code and CSS.

How Frontity works

Frontity is prepared to be hosted either in a regular Node.js server or in serverless services like AWS Lambda, Now, Netlify, Google Functions, and so on. 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 first beta version. We’ll post a full list of coming features soon.

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.

Google AMP with the same codebase

Themes made with Frontity are able to render an AMP compatible version with the same React code and CSS used for the HTML version.

Best Lighthouse score

Frontity is optimized to get the maximum score in Lighthouse, including performance, SEO and accessibility. Theme developers start with 100 and they just need to maintain it while they add features to their theme.

PWA and offline support

Our themes work with the WordPress manifest to get full PWA compatibility out of the box. They also work offline without any extra configuration via service workers.

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)

There are lots of Frontity extensions already available: AdSense, SmartAds, DoubleClick for Publishers, OneSignal Push Notifications, Disqus, Google Analytics, Google Tag Manager, ComScore, Yoast SEO, etc.

Apart from extensions, there are many interface tools specifically created for Frontity: context routing, swipe navigation, infinite scrolling, html-to-react, gutenberg-to-react…

Frontity themes can also 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.

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 million readers, Frontity is proven and ideal for building engaging frontend experiences.

Key differences with GatsbyJS

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

  • 100% focused on WordPress.
  • Opinionated: it has its own state manager and it uses Emotion for the CSS.
  • Extensible like WordPress: themes and extensions can be activated and deactivated without code changes.
  • No need to learn GraphQL or the REST API, you get the data using the state manager.
  • It’s not only an static site generator, it also works with server side rendering.
  • It can output Google AMP html created with the same React codebase.

Wrapping up

I hope this post gives you a better understanding of what Frontity is and how it works.

If you still have any doubts or just want to share your thoughts, please feel free to post them as a new topic in our community forum. One of our goals is to build a community of people interested in WordPress and React, so we’d love to meet you and learn how Frontity can help your project.

You can also follow the beta progress and roadmap here.

To get notified at launch, subscribe to our mailing list here.

Building a React theme for WordPress has never been easier

GET STARTED