Use Frontity if you want a faster, more secure website based on a WordPress backend that works well across all devices and replaces the need for having a separate mobile app and website. This could have time, money and conversion rate benefits for your website.
Table of Contents:
What is the use of Frontity?
Frontity is a software that allows you to convert a WordPress site to REACT based app (Frontity is based on REACT). A headless CMS is a method of separating the backend code from the front end code which comprises a traditional website. Doing this has certain advantages in speed, security and user experience which we will discuss below but also has great ability with Search Engine Optimization (SEO) just like a traditional website.
How does Frontity work?
Frontity is a REACT based framework specifically designed to work with a WordPress backend. In a Frontity project the WordPress CMS will still be accessible on the internet as per normal. You can edit and manage pages and posts here in the CMS just as you would in a normal WordPress site.
The only difference is that the public pages that your users browse will now not be shown by WordPress but instead will be shown by Frontity. It is this separation which gives rise to the phrase ‘headless CMS’. We have removed the traditional WordPress ‘head’ or theme (HTML, CSS, JS) and replaced it with a set of code (Frontity) that can live on a different server. That’s right the code for your WordPress site and the code for the Frontity project can, if you want, be housed on different servers.
This is because the Frontity project which will replace the theme can still talk to the WordPress CMS and database via a JSON API that is specific to Frontity. Frontity ‘exposes’ posts, pages, ACF fields and everythign else you would need to create a site via an API. the REACT based Frontity site simply gets the data from the API instead of directly from the database like a traditional WordPress site would.
Because of this unique ‘headless’ nature Frontity can be a very useful way to create a WooCommerce (e-commerce in WordPress) website with large amounts of products, very fast page load time, great product SEO, and that has a great user experience on mobile devices and larger tablet and desktop devices.
How do you use Frontity?
From a coding point of view you can create a Frontity project as follows,
- Install Node.
- Make sure your WordPress site is set up and working.
- Open up your command line interface.
- During the below commands you’ll be asked to select a theme. You can use the default Mars theme if you haven’t got a custom one. You can customize it as you like and use as a base.
- Then run these commands separately but one after another (replace my-frontity-project with whatever you want to name the project).
- npx frontity create my-frontity-project
- cd my-frontity-project
- npx frontity dev
- Inside my-frontity-project of the is a ‘packages’ folder where all the project code is kept.
- This is also where the all important, frontity.settings.js, file is which is where you can set up your project and connect it to your WordPress CMS so that you can get the live data from your site.
What is the difference between Frontity and Next.js?
Next.js is another popular Javascript Framework but the key differences between these two are,
- Frontity is specifically made to work with WordPress and Next.js is not. That means that set up is quicker and also building the site is a lot faster also because you don’t have to create custom API endpoints and troubleshoot many of the problems of connecting WordPress to an API. The Frontity team has done the work for you to a large degree.
- One specific example of this is that Frontity has its own package management area which means you can turn on and off traditional WordPress Plugins without having to make code changes.
- PROTIP: If you didin’t know a Frontity project is ‘built’ and then launched and if it didn’t have this package manager then you would need to rebuild your Frontity app each time you wanted to implement a plugin or remove one.
- Frontity has built in routing to display various different pages based on the URL whereas Next.js is more appropriate for a single page app. It could be done in Next.js but why bother when Frontity ahs already done this for you.
- Routing is also something that you want because it means each page will be SEO friendly as it is able to be crawled by Google and indexed in search results. This is not the case with single page app type frameworks because there is only one URL.
How is Frontity faster than regular WordPress?
Frontity is a REACT based Javascript framework which is specifically built to work with WordPress. REACT is inherently faster to load than a traditional WordPress website because,
- it uses JSX as opposed to HTML in a WordPress site which has speed advantages when rendering to the browser,
- it creates a Virtual DOM as opposed to a real one in WordPress which is iteratively added to as its rendering to screen. A Virtual DOM renders all at once and is ready faster because it is prepared in advance.
- When a page is loading in REACT only those parts of the page which are necessary to change are re-loaded. In regular WordPress all of the page is loaded again even if it isn’t necessary.
- WordPress often comes with a lot of bloat from plugins and themes and these would not be included in a REACT project.
Frontity, given that it is based on REACT, also gains these same advantages over a regular WordPress site.
How is Frontity more secure than regular WordPress?
A regular WordPress site is vulnerable to hacks and security vulnerabilities because it uses a lot of ‘other peoples code’ in the form of themes and plugins. These sets of code may or may not be coded very well and require updating to secure holes that the developers find over time. In addition to that WordPress is the most popular website software on the planet and hence has more scrutiny than other softwares.
Frontity on the other hand does not have plugins for you to install and hence has less chance of ‘insecure code’ being utilized. Also, given it is not so common as WordPress less hackers are looking to take advantage of it.
How does Frontity replace the need for a separate mobile app?
Frontity is based on REACT which has the native iOs and Android kinds of ‘components’ like buttons, lists, menus and other display aesthetics that can display on mobile phones without any user issues. In the past, people used to create an additional native mobile app to have a better user experience on mobile devices but this is no longer necessary that we have Javascript Frameworks like Frontity and REACT.
An added advantage to this is that your one Frontity project can replace the need to have two sets of code to maintain which would increase time and cost of launching a project. Instead your Frontity site (one set of code) can be used with great user experience on all devices and without the need for the user to download the separate mobile app.
