The decision to move away from jQuery at the end of 2019 was the perfect preparation to dive deeper into React. Writing vanilla JavaScript throughout 2020 allowed me to familiarise myself with the huge advances in the language. Just a few weeks after making the decision, I completely abandoned jQuery for my own code.
My first single-page application
The term single-page application (SPA) refers to a website or application that only loads a single HTML page and updates the page content dynamically – without the need for a complete reload. Anyone who uses Facebook will be familiar with the principle: you call up the page, can browse through posts, view photos and leave comments without the page ever being reloaded.
I had my first real contact with this approach back in 2015 when I built a mobile app. The frontend was based on Cordova and worked well, but writing the necessary layout and interaction logic was time-consuming. This is now much easier with React. After an intensive JavaScript refresher and a ever-increasing routine with React in 2019, I finally had the opportunity to develop an SPA for a customer for the first time.
Use of the AutoScout24 API on a customer website
A local garage maintains its vehicle stock via the AutoScout24 website and wanted to make it available on its own website. To do this, the AutoScout24 interface had to be connected and the data transferred to an interactive single-page application (SPA).
First, I developed my own REST endpoint that retrieves new vehicle data from AutoScout24 every hour at server level and stores it temporarily in the WordPress database. The frontend then accesses this data via the WordPress REST API (interface) and displays it in a clear list view. Clicking on a vehicle loads the detailed view – including an interactive image gallery.
Immediate sorting and switching between list and detail view
Thanks to the manageable number of vehicles, there was no reason not to load all the data at once. The entire data set comprises around 110 KB – enough for all the information required by the site. The images are loaded lazily (as required) in order to improve performance.
As a result, every interactive change on the page – from displaying the vehicle list, sorting and filtering to the detailed view – takes place immediately. Switching to the detailed view of an individual vehicle is also instantaneous, as all the necessary data is already available.
You can try this out live: simply call up the list view, select a vehicle and click on the “Next vehicle” link to move on to the next one.
The learning curve is less about the code itself
Learning a new programming approach takes time, but those who already have experience with pure JavaScript will find it comparatively easy to get started with React. What proved to be particularly time-consuming, however, was structuring the code into individual components. The vehicle list consists of card components, whereby a card in turn is made up of an image, title, description, button and other elements.
Although this SPA was relatively simple to implement, it consists of over 30 individual components. Some of them are used several times – for example, the display of the vehicle price, both in the list view and in the detailed view. This is precisely one of the great advantages of reusable components: If I had built a separate component for each information element, I would have had to manage almost twice as many elements.
This is the real “uncharted territory” when beginning work with React – and it was precisely thanks to this project that I learnt a lot about how to structure code efficiently. I’m sure that future projects will be easier and faster to implement as a result: on the one hand because of the experience gained, and on the other because many of the components developed can be reused in the future.
