We’re thrilled to announce that today we released the first Frontity framework beta!
Frontity is a free and open source framework to develop WordPress sites based on React. This is the first React framework exclusively focused on WordPress – each part of it has been simplified and optimized to be used with it (as a headless or decoupled CMS).
What’s part of Frontity’s beta version
Frontity Framework is beginner friendly: it aims to make building websites with WordPress and React easier and more accessible to all developers, even for those who are less familiar with React.
Here’s a list of what is included in this first beta version.
Zero setup development
Everything is already wired up you can focus on building your site: React, webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, and so on. No extra configuration is necessary.
This means you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration.
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.
Instant in-app navigation
Once React has loaded, Frontity’s router prefetches other routes and data automatically. Users never have to wait when they navigate inside the app.
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 it here.
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 is good for SEO.
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.
Developers can create their own custom packages (extensions) or add new functionality to their website by installing any of the existing Frontity and npm packages without having to build them from scratch. Moreover, Frontity themes and packages can be activated and deactivated without code changes, and are reusable across projects.
Besides these extensions, there are other tools and features specifically created for Frontity, such as the infinite scroll hooks and the auto prefetch, which are also part of Frontity’s extensibility.
First class TypeScript support
Smallest React bundle possible
Frontity helps build websites which are fast to deliver better user experiences. That’s the reason why we have struggled to make the core smaller. But hey! It has finally been reduced by 60% and only weights 60kb (gzipped).
Serverless and horizontal scaling
The Frontity server is so small that it suits perfectly the serverless requirements. That means infinite scaling for the front-end. Frontity is also prepared to scale horizontally in any Node server.
Support for ES6 in modern browsers
- 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
Frontity can work with different ‘source’ extensions. This first release includes a
wp-source which works with the REST API of any wordpress.com or wordpress.org website. This way Frontity can work without any additional WordPress plugin.
The framework has been designed so that it can support other sources in the future like the GraphQL API for WordPress.
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.
React Concurrent and Suspense
The React team is working to release an async, “no-CPU-blocking” version and Frontity will be compatible with it. It is expected for Q2 2019. Once it is released, we expect to see a rise in the use of the React animation libraries available that will get the user experience to the next level.
We’re open sourcing the internal framework we’ve been using to power big WordPress news sites during the last two years. Used by millions of readers, Frontity is proven and ideal for building engaging frontend experiences. Read the full story here.
Help improve Frontity
Once you try it out, please join the community forum and let us know how it goes. Your feedback is extremely valuable in shaping today’s beta as well as the final release. You can join an existing conversation or open a new topic (thread).
Bug reports and other contributions will be also highly appreciated. For more information on how to get involved, take a look at this guide.
We can’t wait to hear what you think about Frontity!
Never miss an update
Don’t forget to subscribe to the Frontity newsletter if you want to stay up to date with all things Frontity. You will receive the latest framework updates, learning resources, and community news.
If you have any other questions about the framework, please share them in the community forum. We’d love to know more about you and how Frontity can help your project(s).