loading...
Cover image for Announcing Frontity 1.0!
Frontity Framework

Announcing Frontity 1.0!

r_martinezduque profile image Reyes Martínez Updated on ・5 min read

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 and open source framework for creating WordPress themes based on React JS. In other words, it allows you to build a React frontend for a headless WordPress site, which serves its data via the WordPress REST API. Check out our introductory post to learn more.

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. This makes everything much easier (even for those developers who are less familiar with React) and optimized to be used with WordPress as a headless CMS.

» What’s new in Frontity 1.0

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

Features

  • Release of Html2React (contributor: orballo. Thanks 🙌).
  • 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/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 and more accessible, 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, we invite you to follow our documentation:

🚀 Quick Start Guide 🚀

You can update all your Frontity packages using npm update in your project folder.

As always, please feel free to give us feedback or share your questions on our forum. You can join an existing conversation or open a new topic (thread).

Bug reports and other type of contributions are also highly appreciated. Actually, there are lots of ways to help that go far beyond commits. Take a look at this guide to learn more about how to contribute (free swag coming soon!). If you want to get involved but not sure where to start, please don't hesitate to reach out to us.

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, such as the PWA compatibility. In addition, we have these two goals:

  • Documentation: make it clearer and improve it by adding new content such as videos or guides.
  • Demos: build different examples to showcase the framework and demonstrate how it can be used in real projects.

If you've already built something with Frontity, please share it with our community to help and inspire others. If you are thinking about using our framework for a professional project and need any help, let us know. We’ll be happy to help you out.

» Thank you

On behalf of all the Frontity team, a HUGE thank you to everyone who tested our beta and RC, 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. 💙

Frontity Framework Useful Resources

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

Posted on by:

r_martinezduque profile

Reyes Martínez

@r_martinezduque

Content and Communications at Frontity. When away-from-computer, I enjoy reading, traveling and photography.

Frontity Framework

Frontity is a free and open source framework for building amazing websites using WordPress and React.

Discussion

markdown guide
 

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?

 

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 :)

 

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.

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! 😄

 

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 :)

 

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.

 

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 :)

 

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 :)

 

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?

 

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!

 

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 :)

 

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!

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....

 

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

 

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 :)

 
 

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

 

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!

 

(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 :)

Thanks for your feedback! :)