Useful Resources about Frontity

Hi there!

I’m opening this topic to share blog posts and other resources that might be helpful if you want to talk about Frontity in a conference or local meetup, or simply learn more about the framework.

About Frontity Framework

In this section of our docs we briefly explain:

  • What is Frontity?
  • Why WordPress and React?
  • How does the framework work?
  • Frontity features
  • Key differences with GatsbyJS

Docs - Learning Frontity

Frontity is designed to be as simple as possible, but you still need to familiarize yourself with some concepts. This guide will help you review these concepts and understand how it all works together.

Frontity features

Here’s a full list of the current and upcoming Frontity features.

Some key points:

  • Frontity is a React framework 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.

  • Zero setup development: everything is already wired up (React, Webpack, Babel, Routing… ) and optimized to be used with WordPress.

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

  • Extensibility: Frontity’s extensibility allows you to add features to your site without having to create them from scratch.

  • Server Side Rendering: implementing SSR on your own can be really tedious. Frontity does Server Side Rendering out of the box and takes care of common pitfalls. This approach works great with dynamic content and is good for SEO.

  • Frontity it’s rendered dynamically. this means people don’t have to rebuild the HTML each time they edit or publish something. Our preferred approach is SPR although there are many ways to configure it. It’s as fast as a static site: https://mars.frontity.org.

  • 100% Lighthouse: 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.

  • 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. More about Code Splitting here: What is Code Splitting and Frontity Docs - Code Splitting.

If you require any further information or have any questions, feel free to ask! We’ll be happy to help!

5 Likes

Looks good to me so far :+1:

About Server Side Rendering and why it’s important for SEO

For those interested, here are other resources about this topic that can help:

1 Like

Guides on how to build a React theme

How to create a web application with React and WordPress using Frontity

A series of video tutorials (in Spanish) on how to create a web application with ReactJS and WordPress using Frontity by Fran Gallardo.

1 Like