DEV Community

Cover image for Announcing Frontity 1.0!
Reyes Martínez for Frontity Framework

Posted on • Updated on • Originally published at frontity.org

Announcing Frontity 1.0!

Today, we’re incredibly excited to introduce Frontity 1.0 to the world! 🎉

This is an important milestone for us here at Frontity but also for all of you, who have shown interest in this project and provided support in many different ways since the beginning.

WordPress + React made easy

Frontity is a free, open source React framework for WordPress. It allows you to easily build a React frontend for a headless or decoupled WordPress site, which serves its data via the WordPress REST API.

Combining WordPress and React has plenty of advantages, but there are a lot of things that developers need to learn and configure. Unlike other React frameworks, Frontity is an opinionated framework 100% focused on WordPress which aims to make everything simpler, even for developers who are not familiar with React. To learn more about it, check out the docs or this introductory post.

What’s new in Frontity 1.0

What is relevant about this release is that APIs are stable and no breaking changes are included. What follows is a summary of the features and the improvements we have made.

Features

  • Release of Html2React (contributor: orballo. Thank you!)
  • Add URL redirections (contributor: DAreRodz. Thanks!)
  • Add support for WP installed in subdirectories (contributor: DAreRodz)
  • Add support for using a page as the home and the blog somewhere else (contributor: DAreRodz)
  • Add setting to change category and/or tag base URL (contributor: DAreRodz)
  • Add Image component with lazy loading, including support for the upcoming native lazy load! (contributor: orballo)
  • Add hook to know if a component is inside the screen or not (contributor: orballo)
  • 100 Lighthouse score: Frontity is optimized to get the maximum score in Lighthouse, including performance, SEO and accessibility. Theme developers start with 100/100 and they just need to maintain it while they add features to their theme.
  • Perfect accessibility: as part of our mission to make building websites with WordPress and React easier, we also want to develop the framework focused on this aspect. Frontity is accessible by default and will provide tools that let the developers know if they break it.

Improvements

  • Open the browser automatically when running frontity dev (contributor: luisherranz. Thank you!)
  • Remove WordPress path from links retrieved from the REST API (DAreRodz)
  • Import CSS files as raw strings to use them with (luisherranz)
  • Add HMR to Frontity state (luisherranz)
  • Add support for lazy-loading plugins of WordPress (orballo)

Bug fixes

  • Fix certificates import when using https mode locally (luisherranz)
  • Make isFetching and isReady properties always present (DAreRodz)
  • Fix a couple of bugs with the es5 bundles (luisherranz)

Start building amazing sites!

It’s really easy to get started with Frontity.

  • The Quick Start Guide will take you from the very basics to feeling amazed at what you can do with Frontity!
  • To keep Frontity and its packages updated, you also can follow this guide.

As always, please feel free to share your feedback and questions in the community forum.

Bug reports and other type of contributions are also highly appreciated. Actually, there are lots of ways to help the project that go far beyond commits. Check out this guide to learn more.

We’re excited to hear your thoughts about Frontity 1.0 and see what you build!

What’s next

We will continue to develop Frontity, closing bugs and adding features that are in our roadmap. In addition, we have these two goals:

  • Documentation: make it clearer and improve it by adding new content and guides.
  • Demos: build different examples and projects to demonstrate how to achieve particular tasks using Frontity.

If you've already built something with Frontity, please share it with the community to help and inspire others.

Thank you

On behalf of all the Frontity team, a HUGE thank you to everyone who tested the beta version and the release candidate, gave us feedback, responded to issues, submitted pull requests, spread the word about the framework, or played a part in getting us to this point.

Special thanks for their contributions, support and help to:

Luis Herranz, David Arenas, Eduardo Campaña, Carlos Bravo, Óscar Mesa, Smit Patadiya, Marika Könönen, Imran Sayed, Carlos Azaustre and the OSW Community (Carlos Hernández, Theba Gómez, Ulises Gascón), Google for Startups Spain, Brandon Dove, Jordan Christie, Christopher Hyne, Janak Kaneriya, Anatoliy Dovgun, Sonicares, Konstantin, Ucan, Philip Ingram, Jesús Olazagoitia, Javier Serrano, and Pepe Martín.

Go ahead, try Frontity 1.0 out and start building something awesome! We think you’re going to love it. 💙

Additional resources

Originally published at https://frontity.org/blog/.

Oldest comments (21)

Collapse
 
mjraadi profile image
Mohammadjavad Raadi

Great job on the amazing work you guys have done. Is there any live app built with frontity?

Collapse
 
iamposti profile image
Pablo Postigo

Hello Mohammadjavad! Thanks for the cheers up :)

You can see a live demo of Frontity here mars.frontity.org

Now that the 1.0 is live, we will be working on more examples so people can get inspired :)

I can also tell you that we are working hand to hand with some agencies and big blogs helping them create their Frontity frontends, we will be showcasing them as well.

By the way, if you access our blog.frontity.org from a mobile device what you will see is a React site created with an older version of our framework, we will be upgrading it to Frontity 1.0 and sharing the code as well :)

Collapse
 
bbarbour profile image
Brian Barbour

Wow! I think I may try this out for my next project. Wordpress is very user friendly and familiar to many users--so coupling it with React for a fast modern front end is almost the best of both worlds.

Collapse
 
r_martinezduque profile image
Reyes Martínez

Thanks Brian! That's right. We do actually think this is the future of WordPress.

We'd love to get your feedback if you have the chance to try Frontity out for your project. If there is anything at all we can help with, please let us know :)

Collapse
 
r_martinezduque profile image
Reyes Martínez • Edited

Hi Brian, I am wondering if you finally had the chance to try Frontity out for any of your projects. We are constantly looking for feedback to improve the framework and would love to hear your thoughts :)

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Congrats and good luck 💯

Collapse
 
r_martinezduque profile image
Reyes Martínez

Thank you Ahmad!☺️

Collapse
 
alex_barashkov profile image
Alex Barashkov • Edited

Thank you for that nice project! Could you tell me about why is it better or "when" is it better to use Frontity with WordPress and not Gatsby with WordPress?

Collapse
 
r_martinezduque profile image
Reyes Martínez • Edited

Hi Alex! Thanks for your comment. That's a very good question :)

We think Gatsby is an amazing framework, we've learned a lot from it, and the things it does it does really really well. But Frontity has a different approach in certain aspects:

  1. It's 100% focused on WordPress. This means the number of concepts to learn are minimal, it doesn't need any complex configuration to get you started and the APIs that WordPress developers use to create themes are tailored for the things they usually need.

  2. It's rendered dynamically. This means people don't have to rebuild the HTML each time they modify or publish something. Our preferred approach is SPR (zeit.co/blog/serverless-pre-rendering) although there are many ways to configure it. It's as fast as a static site: mars.frontity.org/.

  3. It's opinionated. It has its own state manager and CSS solution. Thanks to that people don't need to learn things like Redux and at the same time it powers a very flexible extensibility pattern, more similar to the one of WordPress itself than to the rest of JS frameworks.

Hope it solves your doubt!

Collapse
 
r_martinezduque profile image
Reyes Martínez

Hey Alex, did you have the chance to try Frontity? We are actively looking for feedback to improve the framework and would love to learn from your experience. Let me know if you want to chat. Thanks :)

Collapse
 
alijaffar profile image
Eli Von

Trying it right now and looking to create my first page with it! I Googled and landed here when checking if Frontity supports pages, and this release does. So far it's a good experience, just wish there was more details around the SEO bit (I know you are working to release @frontity/head-tags package), as well as docs for page template creation. Cheers!

Thread Thread
 
r_martinezduque profile image
Reyes Martínez • Edited

Hi Ali! Many thanks for your feedback! You're totally right, we have to keep working on our docs to address more details about the SEO. Feel free to reach out in the meantime if you have any questions about it (Christian Oliveira, our technical SEO expert, will be happy to help).

P.S. In case it helps, we also wrote this post about SEO for headless WordPress a few months ago: blog.frontity.org/seo-for-headless....

Collapse
 
matthijsewoud profile image
⚡️ • Edited

Looks awesome. I’m going to try this in a bit, for sure. I’ve already implemented a fast navigation using Swup, but I’ve run into a bit of a snag that I think is inherent with this type of thing: Plugins.

Many WordPress plugins require execution of JS, or are otherwise dependent on having a page load in its entirety. Does Frontity do anything to deal with that?

Collapse
 
r_martinezduque profile image
Reyes Martínez

Thanks! These are websites built entirely in React. You can get a similar result using transition libraries with React like react-spring.

However, if you use Frontity, as it uses the WordPress REST API to populate the site, you won’t get any JS code from your WP plugin unless that code is part of a post/page content.

Let me know if you still have any doubts :)

Collapse
 
matthijsewoud profile image
⚡️ • Edited

Thanks for the reply. Let’s say I want a contact form, or something more special (something like activity submissions), I’d have to put that code into Frontity (or the theme?) yeah? I suppose custom made Gutenberg blocks would fit this as well, since they’re rendered inside the post content.

Analytics, if one wants those, would also have to be adapted to be triggered per rest-request.

Thread Thread
 
orballo profile image
Eduardo Campaña • Edited

Yes, everything that is not exposed in the REST API and/or requires some kind of logic, will need to be replicated on our end with Frontity. In the case of analytics, we are planning on releasing a plugin as we had in our previous version of the framework.

Regarding Gutenberg blocks, right now, they are rendered in the content as simple HTML code, so what you can do is to use @frontity/html2react and create a processor that will identify that HTML belonging to the block and render on its place the React component of your choice.

We try to make Frontity completely extensible, so if somebody creates a solution for a Gutenberg block, or an analytics library, it can be reused by the community.

I hope this solves your doubts! 😄

Collapse
 
r_martinezduque profile image
Reyes Martínez • Edited

Hey Matthijs! Were you able to try Frontity out? We are continuously looking for feedback to improve the framework and would love to hear any input that you have :)

Collapse
 
micemade profile image
Micemade

Hi folks!
Just recently I learned about Frontity, and I was wondering - what about WooCommerce support?

Collapse
 
r_martinezduque profile image
Reyes Martínez • Edited

Hi!

Thanks for your question :) We plan to add a source to work with WooCommerce sites but don't know yet when we'll be able to implement this feature. We are still working on other core features and have a lot of items in our roadmap. If more people start requesting it, we'll push it up.

Do you have any specific project in mind? We'd love to understand the problems you're facing (if any) and your needs. Thank you!

Collapse
 
micemade profile image
Micemade

(sorry for delayed reply)
Nothing specific, really. I believe that future looks good for headless WP (especially as PWA), so I'm learning how to do it. Since I created WP/WC store themes for years, but I'm new to React and "headless CMS world". My goal would be to create WP/WC PWA's :)

Thread Thread
 
r_martinezduque profile image
Reyes Martínez

Thanks for your feedback! :)