DEV Community

loading...
Cover image for Frontity, a React framework to create WordPress sites
Frontity Framework

Frontity, a React framework to create WordPress sites

Reyes Martínez
Content and Communications at Frontity. When away-from-computer, I enjoy reading, traveling and photography.
Originally published at frontity.org Updated on ・8 min read

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 you to build a React frontend for a headless (or decoupled) 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 Gatbsy.js 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, and as the use of headless CMS grows, the WordPress community has increasingly started considering React for their projects. Besides this, modern libraries like React are growing in 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?

In a Frontity project, WordPress is used as a headless or decoupled CMS, just for managing the content. Frontity uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React.

With Frontity you still use your WordPress dashboard to edit and create 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 both a Node.js server and a WordPress server (PHP) to run on. And there are two main Frontity Modes (architectures or configurations): Decoupled and Embedded Mode.

1. Decoupled Mode

In this mode Frontity fetches the data from the REST API of the WordPress server (PHP) and returns the final HTML to the visitor as an Isomorphic React App.

2. Embedded Mode

In this mode the Frontity Embedded Mode plugin replaces the PHP theme and makes a request to the Frontity / Node.js server to retrieve the HTML as an Isomorphic React App, which is returned to the visitor by WordPress.

Depending on the mode used, the main domain (e.g. www.site.com) will be connected either to the WordPress server (in Embedded mode) or to the Frontity server (in Decoupled mode).

Learn more in the Architecture page of the docs.

Why a different Node.js server?

React is a JavaScript library. In order to generate HTML for site visitors or for Google, 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.

Zero setup development

Everything is already wired up you can focus on building your site: React, webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, and so on.

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 and users don’t notice any change, it is 100% transparent.

Instant in-app navigation

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

Extensible (via Frontity 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 easily extend the framework to your needs.

Developers can create their own custom packages (extensions) or add new functionality to their website by installing any of the existing Frontity and npm packages without having to build them from scratch. Moreover, Frontity themes and packages can be activated and deactivated without code changes, and are reusable across projects.

As a consequence of its extensibility pattern, features are not coupled to the routing system in Frontity, leaving up to the developer the decision of what type of page to render and giving them full control of the layout, among other things.

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. It also allows developers to dynamically load components with the help of loadable-components.

Support for WordPress.com & WordPress.org

Frontity can work with different 'source' extensions. The first beta version includes a wp-source which works with the REST API of any WordPress.com or WordPress.org site.

Support for multiple sites with a single installation

This is something similar to WordPress multisite: Frontity allows you to serve any number of sites with just one installation. This can be really useful for users who manage different clients or those who want to create a network.

Serverless and horizontal scaling

The Frontity server is so small it suits perfectly the serverless requirements. That means infinite scaling for the frontend.

All the server code is bundled in one file, ready to work with serverless services like Vercel (using its CLI now). Frontity is also prepared to scale horizontally in any Node.js server.

Battle-tested framework

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

You can learn more about the story of the project here.

Key differences from other React frameworks

Frontity is in a way similar to, and can be compared with, Gatsby.js and Next.js. However, there are some key differences.

It's 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.

In short, you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration.

It's an opinionated framework

Frontity has its own state manager and CSS-in-JS solution. Thanks to that developers don't have to figure out how to configure these tools, or learn other technologies such as Redux or GraphQL.

It's extensible like WordPress

Frontity powers a very flexible extensibility pattern, more similar to that of WordPress itself, rather than that of other JavaScript frameworks. In order to add new functionality or expand the capabilities of Frontity, you can use any of the existing Frontity and npm packages without having to build them from scratch.

Moreover, Frontity themes and extensions can be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times.

It's rendered dynamically

In Frontity the HTML is rendered dynamically by a Node.js server or a serverless service. This means the HTML does not have to be rebuilt each time the content is edited or new content is published.

Frontity websites can be as fast as static sites as most of the requests are handled by intermediate cache layers. The static HTML is cached by a CDN, the same way that the dynamic HTML generated by Frontity is cached and served by a CDN.

Because of its dynamic approach, Frontity provides a great power and reliability when it comes to frequent and real-time content updates, making it a great fit for those projects with content that might change rapidly or that is expected to grow over time.

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

We 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 the documentation or the Learn Frontity page. If you're new to Frontity check out this step-by-step tutorial.

If you still have any questions or would like to get involved with Frontity, please feel free to join the community forum. One of our goals is to create an open place for sharing knowledge, where developers can help and get help from one another.

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

Originally published at frontity.org/blog.

Discussion (24)

Collapse
jel111 profile image
dumdumdev

This sounds incredible I can’t wait.

Collapse
r_martinezduque profile image
Reyes Martínez Author • Edited

Thank you! I'm glad to hear that. It would be great to get your feedback once we launch the beta :)

Collapse
r_martinezduque profile image
Reyes Martínez Author

Hey! Did you have the chance to try Frontity out? We'd love to hear your thoughts and know if we can be of any help :)

Collapse
dance2die profile image
Sung M. Kim

Just signed up for the notify email list :)

I'd love to try this out as I was trying to build a Gatsby frontend (as no batteries are included) as my current WordPress page is slow.

Collapse
r_martinezduque profile image
Reyes Martínez Author • Edited

Thanks Sung! That looks very cool!

I'd love to hear more about the challenges you've faced using WordPress as a headless CMS. If you could share your thoughts or experience in our community forum that would be really helpful :)

Collapse
dance2die profile image
Sung M. Kim

I've posted on the forum regarding the challenges here :)

Thread Thread
r_martinezduque profile image
Reyes Martínez Author

Our framework aims to make building sites with WordPress and React easier and this kind of feedback is always useful to improve. Thank you for sharing it with us!

Let us know how it goes when you have the chance to try out the beta :)

Collapse
kivabitar profile image
kivabitar

This is pretty cool! I have a semi-styled localhost version of another site up in less than an hour. Quick question, is there any way to pull in ACF fields via the normal WP RESTFUL API? github.com/airesvsg/acf-to-rest-api/ <-- The ACF fields ouput in JSON, directly after the content and meta info. I tried post.acf.field_title and a couple other ways of accessing that data, but no luck. Thanks!

Collapse
r_martinezduque profile image
Reyes Martínez Author • Edited

Hi! Thanks for reaching out! Although this topic of our forum addresses other issue, I think this answer can help you: community.frontity.org/t/acf-optio....

If it doesn't, please let me know and we'll be happy to look into it. Thanks :)

Collapse
kivabitar profile image
kivabitar

Thenk you Reyes, this is EXACTLY what I was looking for!

Thread Thread
r_martinezduque profile image
Reyes Martínez Author

Glad it helped! Feel free to reach out if you have any other questions or would like to share what you're building. We'd love to learn about your experience 😊

Collapse
viscosho profile image
Virginia Garcia Ortiz

Hi! I'm trying it out and I have two questions: Are there themes available already for it? And can I still use Gutenberg blocks and display them on the front?

Collapse
r_martinezduque profile image
Reyes Martínez Author

Hi Virginia! Right now, we have two starter themes which allow you to get your site running on Frontity easily: mars.frontity.org/ and twentynineteen.frontity.org/. They can be customized to fit your needs.

Regarding your second question: yes, I think you could still use Gutenberg blocks. However, we are thinking about releasing a @frontity/gutenberg npm package to make sure everything works fine. What this package does is to put the CSS that Gutenberg injects into PHP themes.

If you run into any issues or need a hand, feel free to ask in our forum: community.frontity.org/. We'll be happy to help! :)

Collapse
viscosho profile image
Virginia Garcia Ortiz

Thanks for the reply, I have tried both themes by now, and I have started experimenting myself with adding stylesheets that have the CSS for the gutenberg blocks, looking forward to see that new theme.

Thread Thread
r_martinezduque profile image
Reyes Martínez Author

That sounds great, Virginia! We've opened a new topic in our forum about the Gutenberg support: community.frontity.org/t/gutenberg.... Any feedback or thoughts that you'd like to share with us if you investigate further would really valuable!

Collapse
r_martinezduque profile image
Reyes Martínez Author

Hi Virginia!

Did you manage to get Frontity working? We would love to hear more about your experience and know if we can be of any help :)

Collapse
sumit2201 profile image
sumit2201

I am very new in both the technologies (React & Wordpress) but planning a huge content community website with frontity, will I be able to use wordpress multisite and all its related plughins If I choose frontity?
I am also planning to use mongo db (For users and other business logic data) and S3 storage (for storing images & videos).
Do you think it will make sense to use all of them together?

Collapse
r_martinezduque profile image
Reyes Martínez Author

Hi! Thanks for reaching out :)

I'm not sure about the WordPress multisite, but if the REST API is the same, it should work. Would you mind to share your questions along with the URL of the multisite on our forum (community.frontity.org/) so the dev team can take a look at it? I'm pretty sure they'll give you a better answer than me and advice on the best approach :) We'd love to help out!

Collapse
sumit2201 profile image
sumit2201

Thank you so much for your reply, I will surely ask this on your forum after preparing some more information and will try to be more specific while asking on your forum :)

Thread Thread
r_martinezduque profile image
Reyes Martínez Author

Sounds great, we look forward to hearing from you :)

Collapse
aravindajith profile image
Aravind Ajith

Frontity helped us to build a super slick website! It makes it very easy to set up, build and maintain a headless WordPress site. Just sharing our case study here - awsm.in/frontity-case-study/

Collapse
r_martinezduque profile image
Reyes Martínez Author

Thanks for sharing this, Aravind! 🙂

Collapse
adovgun profile image
Anatoliy

From my personal experience:
I have been working with WordPress for a very long time, there were different dynozres in my combat practice;): WP + AngularJs, WP + Vue.js, and it was React time, I also, like other guys, paid attention to GatsbyJs. And purely by chance, I joined the Frontity development team as a tester.

Frankly, I really like the circle of people who create this framework. Yes, much remains to be done, but the pace and persistence with which they do it gives every reason to expect the best.

Well done, we look forward to the release and are ready to support you with claps of hands and harsh criticism.

Collapse
r_martinezduque profile image
Reyes Martínez Author

Thank you for your kind words and your continued support Anatoliy! We are happy to have you in our community! 🤗