Reyes Martínez for Frontity Framework

Posted on Jun 20, 2019 • Edited on May 17, 2021 • Originally published at frontity.org

Announcing Frontity 1.0!

#react #wordpress #javascript #webdev

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

Top comments (21)

Brian Barbour • Jun 21 '19

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.

Reyes Martínez • Jun 21 '19

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

Reyes Martínez • Sep 30 '19 • 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 :)

⚡️ • Jun 25 '19 • 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?

Reyes Martínez • Jun 25 '19

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

⚡️ • Jun 25 '19 • 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.

Eduardo Campaña • Jun 26 '19 • 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! 😄

Reyes Martínez • Sep 30 '19 • 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 :)

Alex Barashkov • Jun 21 '19 • 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?

Reyes Martínez • Jun 21 '19 • 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:

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

Reyes Martínez • Sep 30 '19

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

Eli Von • Dec 28 '19

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!

Reyes Martínez • Jan 7 '20 • 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....

Mohammadjavad Raadi • Jun 20 '19

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

Pablo Postigo • Jun 21 '19

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

Micemade • Oct 7 '19

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

Reyes Martínez • Oct 8 '19 • 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!

Micemade • Oct 12 '19

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