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.
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.
Using the AutoScout24 API on a client website
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
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.
Leave a Reply