We’re thrilled to announce that Frontity's first beta is now live! 🎉
Frontity is a free and open source framework to develop WordPress themes based on React JS. This is the first React framework exclusively focused on WordPress, which means that each part of it has been simplified and optimized to be used with this CMS (as headless WordPress).
Our 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.
Everything is already wired up so you can focus on building an amazing site: React, Webpack, Babel, SSR, Routing, CSS-in-JS, WP REST API, TypeScript, Linting, Testing, etc. No extra configuration is necessary.
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.
Once React has loaded, our 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.
Themes made with Frontity are able to render an AMP compatible version with the same React code and CSS used for the HTML version.
Frontity responds with a fully populated HTML file generated with React. This reduces the time required for the first contentful paint and ensures that the SEO is not harmed.
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.
If you are curious to learn more about this, here's a more detailed explanation.
One of the most amazing things about Frontity is its extensibility. You can add new features to your theme via Frontity extensions and NPM packages.
We have already been working on a lot of extensions which will be available soon: Disqus comments, OneSignal push notifications, Adsense, Google Analytics, Google Tag Manager, Custom CSS, and more.
Apart from these extensions, there are many other interface tools specifically created for Frontity, such as context routing, swipe navigation, infinite scrolling, html-to-react, or gutenberg-to-react.
Frontity themes can also use any of the 80.000 React packages available in NPM.
Frontity helps build websites which are fast to deliver better user experiences. That's one of the reasons why we have struggled to make the core smaller. But hey! We finally achieved it! It has been reduced by 60% and only weights 60kb (gzipped).
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.
- 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.
This guarantees that performance is not harmed in the modern browsers while ensuring backwards compatibility with the old ones.
Frontity can work with different “source” extensions. This first release already 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.
Our framework has been designed so it can support other sources in the future like the GraphQL API for WordPress. We are discussing about all the possible supported sources in our forum. Feel free to join the conversation if you have any ideas!
You can serve any number of sites (with different themes and/or configuration) with a single Frontity installation. This can be useful for users who manage different clients or those who want to create a network.
The React team is working hard 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 2 years. Used by millions of readers, Frontity is proven and ideal for building engaging frontend experiences.
It's really easy to get started and test Frontity, we invite you to follow our documentation:
Once you try it out, please let us know how it goes. Your feedback is extremely valuable in shaping today’s beta as well as our final release. Please feel free to share it with us in our forum. You can join an existing conversation or open a new topic (thread). The more descriptive the title of the topic the better.
Bug reports and other contributions will be also highly appreciated. For more information on how to get involved, take a look at this guide. Active contributors will be eligible to receive free swag. 🎁
We can’t wait to hear what you think about the beta!
Don't forget to subscribe to our newsletter if you want to stay up to date with all things Frontity. You will receive the latest framework releases, new features, blog posts, tutorials, and other learning resources.
To get in touch with us or ask any questions about Frontity, please join our community forum at community.frontity.org. We'd love to know more about you and how Frontity can help your project(s).
Originally published at blog.frontity.org.