Frontity Docs
  • Β» Welcome to Frontity
  • πŸš€Getting started
    • Quick start guide
  • πŸ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • πŸ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • πŸ—οΈArchitecture
    • Decoupled Mode
    • Embedded Mode
  • 🌎Deployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • πŸŒ—Isomorphic React
  • ⚑️ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • πŸ”ŽSEO
  • πŸ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • πŸ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Frontity features
  • Frontity features
  • βš™ Zero setup development
  • πŸš€ Lightning-fast loading
  • ⚑️ Instant in-app navigation
  • πŸ—„ Server Side Rendering
  • <> Extensible
  • πŸŽ– Battle-tested framework
  • πŸ“ˆ Serverless and horizontal scaling
  • { } First class TypeScript support
  • πŸ’» Support for ES6 in modern browsers
  • πŸ”— Support for WordPress.com & WordPress.org
  • ☝️ Support for multiple sites with a single installation
  • πŸ•Έ Code Splitting
  • 🌱 Smallest React bundle possible
  • βœ… Ready for React Concurrent and Suspense

Was this helpful?

  1. About Frontity

Frontity features

Frontity framework and its extensions will help save you a lot of development time while enjoying of all of the latest technology trends, already configured for you.

PreviousAbout FrontityNextBrowser support

Last updated 3 years ago

Was this helpful?

Here's a list of the main features included in Frontity's core:

Frontity features

Frontity features

βš™ Zero setup development

Everything is already wired up so that you can focus on building your site and spend less time worrying about tooling and configuration: React, Webpack, Babel, Server Side Rendering, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, and so on.

πŸš€ 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.

⚑️ Instant in-app navigation

Once React has loaded, our router prefetches other routes and data automatically. Users never have to wait when they navigate inside the app.

πŸ—„ Server Side Rendering

Frontity responds with a fully populated HTML file generated with React. This reduces the time required for the first contentful paint and ensures that it is optimized for search engines.

The content is retrieved using the WordPress REST API. Once React is loaded in the browser, it takes control of the page and does its magic.

<> Extensible

One of the most amazing things about Frontity is its extensibility, similar to that of WordPress itself. It allows you to easily add new functionality and expand the capabilities of Frontity via npm packages without having to create them from scratch.

Frontity packages and themes can also be activated and deactivated without code changes and are reusable across projects, helping reduce both development and maintenance times.

Frontity themes can also use any of the 80.000 React packages currently available in npm.

πŸŽ– Battle-tested framework

πŸ“ˆ Serverless and horizontal scaling

The Frontity server is so small it suits perfectly the serverless requirements. That means infinite scaling for the frontend.

{ } First class TypeScript support

Frontity has amazing TypeScript support. Actually, we like it so much that Frontity itself is built using TypeScript. But don’t worry, it’s absolutely optional: if you don’t know or don’t want to learn it you can use regular JavaScript without problems!

πŸ’» Support for ES6 in modern browsers

Frontity generates two bundles of JavaScript:

  • One in ES6 without transpilation or polyfills so it’s as small and fast as possible.

  • The other in ES5 for the old browsers that don’t support ES6.

Modern browsers that support ES6 modules will request the ES6 bundle, translating into a reduced bundle size and shorter evaluation time in the browser. This guarantees that performance is not harmed in the modern browsers while ensuring backwards compatibility with the old ones.

πŸ”— Support for WordPress.com & WordPress.org

☝️ Support for multiple sites with a single installation

This is something similar to WordPress multisite: Frontity allows you to serve any number of sites with just one installation. This can be really useful for users who manage different clients or those who want to create a network.

πŸ•Έ Code Splitting

🌱 Smallest React bundle possible

Frontity helps build sites which are fast to deliver better user experiences. That's the reason why we have tried very hard to make the core as small as possible. It has finally been reduced by 60% and only weights 60kb (gzipped).

βœ… Ready for React Concurrent and Suspense

Check out the to see a full list of Frontity packages (including themes) and learn more about the different types of packages.

In 2019 the Frontity team decided to open-source the internal React framework they had been using to power large WordPress news sites for the previous few years. Used by millions of readers, Frontity is proven and ideal for building engaging frontend experiences. Learn more .

All the server code is bundled in one file, ready to work with serverless services like (using its CLI now) or . Frontity is also prepared to scale horizontally in any Node.js server.

Frontity can work with different β€œsource” extensions. The 1.0 version includes a which works with the REST API of any and site. This way, whether you have a self-hosted site or it is hosted by Automattic, Frontity will suit your needs.

The framework has been designed so it can support other sources in the future (like the ).

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. Learn more about this feature in the section.

The React team is working hard to release , which is a set of features that will improve the user experience of React apps and Frontity will be compatible with it.

In addition to its feature set, there are many other reasons to use Frontity. Check them out .

πŸ“ƒ
API Reference docs
here
Vercel
AWS Lambda
wp-source package
wordpress.com
wordpress.org
GraphQL API for WordPress
Performance
Concurrent Mode
Zero setup development
Lightning-fast loading
Instant in-app navigation
Server-side Rendering
Extensible
Battle-tested
Serverless and horizontal scaling
First class TypeScript support
Support for ES6 in modern browsers
Support for WordPress.com & WordPress.org
Support for multiple sites with a single installation
Code Splitting
Smallest React bundle possible
Ready for React Concurrent and Suspense
here