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 from 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 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 powers a flexible extensibility pattern similar to WordPress. It 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.

  • 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

Frontity workshops

How to create a React theme in 30 min with Frontity - workshop by Luis and David at the WordCamp for Devs in Spain:

Crea un tema para WordPress con React (con Frontity) - Workshop in Spanish that JuanMa gave at Mowomo Conference:

How to build a React-based Theme for WordPress with Frontity - 3h workshop that Michael gave at JSNation Live 2020:

Series of video tutorials (in Spanish)

A series of video tutorials (in Spanish) on how to migrate a WordPress site to React using Frontity.

1 Like