Using React and WordPress to build an interactive, performant single-page application

More and more website development takes place using Javascript these days, whether within the WordPress CMS or as part of a streamlined frontend experience. I abandoned jQuery at the end of 2019 and began learning React in earnest. New projects in 2021 are allowing me to use these new skills for some interactive website features.

When Matt Mullenweg encouraged us to “learn Javascript deeply” in 2015, I already had over 15 years’ experience under my belt, with a major learning curve in the early 2000s. What Matt referred to was the future development of the WordPress administration area. The post and page editor was rebuilt using the React Javascript framework, which Facebook developers launched in 2011. The “Gutenberg” editor went live at the end of 2018 and I started working with it in early 2019. First using the ACF plugin, then learning to code for the editor using raw Javascript, then transitioning to React through the course of that year.

Screenshot of advanced editing in WordPress’ Gutenberg editor

I’ve realised that I’m entering into a completely new stage of my web development career. After working for over twenty years on sites built with static HTML or PHP coding, I’m currently working on a Javascript-heavy website – almost a web app, to be honest – which will be going live by early summer. Although much of the site’s content is created using the WordPress editor, and most of the page and navigation structures are generated as normal using PHP, a good part of the site’s content is being output by Javascript.

I’ve taken what I’ve learned over the past two years building for WordPress’ Block Editor and applied it to the front-end; building sortable and filterable list views using data fetched from the WordPress’ REST API. By completely separating the data logic (in the backend) and what the visitor sees (in the frontend), I am working with a foot in both camps. This is nothing new for me. The knowledge I have of preparing data continues to stand me in good stead for the “backend” work, and the knowledge I’ve gained from building for the Block Editor means that I can build the frontend interfaces quickly and efficiently.

Abandoning jQuery

Making the decision to move away from jQuery at the end of 2019 was the perfect preparation for delving more deeply into React. Writing vanilla Javascript throughout 2020 brought me up to speed with the massive improvements in the raw language. Two to three weeks after deciding to make the change, I’d abandoned jQuery for my own code-writing completely. If it weren’t for the fact that some third-party plugins on our clients’ sites need jQuery, none of the sites I’m building would use it.

My first single-page application

“Single page application” (SPA) is the term used to describe a website or application which loads a single page and then populates the content dynamically without needing to re-load. If you use Facebook, then you’ll be familiar with the process. You visit the website and then, when the list of posts is visible, you can click around, view photos and leave comments without leaving the page.

My first real experience of this approach was when I tried building a phone app way back in 2015. The frontend of the site used Cordova and worked well, but there was a lot of code to write to get the layout and interactive functions to play ball. Using React is infinitely easier and so, after re-learning JavaScript thoroughly in 2020 and getting comfortable with React, I got the chance to build an SPA for a client for the first time.

Using the AutoScout24 API on a client website

Screenshot of the SPA list view

A local garage keeps their stock lists up-to-date using the AutoScout24 website, and they wanted to have their vehicle listings available on their own website too. This meant fetching data from the AutoScout24 API and making it into an interactive SPA. First, I built a custom REST endpoint, which fetches new data from AutoScout24 at server-level and caches it in the WordPress database on an hourly basis. The front-end then pulls the data from the WordPress REST API and displays it in a list view. Clicking on a vehicle switches the view to show all of the vehicle details, including an image slider.

Instantaneous sorting and switching between list and detail views

Thanks to the manageable number of vehicles in the list, there was no reason not to load all of the vehicle data in one go. The result set totals around 110kb for all the data which the page needs, and images are lazy-loaded as required. This means that once the data is loaded, every interactive change of the page – from displaying the vehicles to sorting and filtering the list according to the visitor’s preference – is instantaneous. Switching to the detail view of a single vehicle is also instantaneous, as the data needed for the view is already loaded. You can see this in action by visiting the list view, then clicking on a vehicle and then navigating to the next one using the Nächstes Fahrzeug link.

The learning curve is less about the code and more about the organisation

Learning any new programming language takes time, but the strong basis on raw Javascript means that adopting React is quite easy for an experienced Javascript developer. What I found to be most time-consuming was organising the code into separate components. The list is made up of card components, a card is made up of image, title, description, button and so on. In total, this SPA, although comparatively simple to write, contains over 30 individual components. Some of them are re-used, like the vehicle price, in the list and in the single view. That’s one of the advantages of reusable components; if I’d created a unique component for every piece of information on the page, I’d have nearly twice as many to deal with.

This is the real “new land” when working with React, and I learned a great deal on how to organise my code during this project. I’m sure that each project I work on will be easier and developed more quickly; both thanks to the experience I’ve gained here and also because I will be able to reuse many of the individual components in future projects.

Comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.