From Spaghetti Code to a High-Performance PWA: Pizza Hut's Digital Transformation

Pizza Hut's web platform required a comprehensive update, prompting their collaboration with Tailr. This optimization was essential due to years of new code being layered onto outdated codebases, resulting into legacy and "spaghetti code." This spaghetti code negatively impacted the website's speed and performance, necessitating a complete backend update.

To gain insights into the project's technical aspects, we spoke with Toon Verwerft, Senior Developer & Architect at Tailr, and Bart Van Dyck, e-commerce Manager at Top Brands.

Toon gets right to the point, “We inherited the project from a previous software partner at Top Brands. Initially, our focus was primarily on maintaining the platform. However, as the demand for new features and designs grew, it became evident that the platform was reaching its limits. The structure of the codebase complicated the implementation of new features; any change we made could inadvertently trigger errors elsewhere. The code was poorly written, making it challenging - and undesirable - to continue working with it.”

“When we initiate or take over a project, we always begin with an audit. It’s essential to understand our starting point: what is the current state of the web platform, and which areas require improvement?” Toon explains. “We identified quite a comprehensive list of points for enhancement,” Bart adds, “Tailr presented this information in a very clear manner. They effectively outlined the pros and cons of the web platform for us. This analysis not only highlighted the need for a thorough update of the existing platform but also led us to decide on adopting a PWA.”

The process began with an audit, followed by the construction of the new website. “We opted to separate the backend (the business logic) from the frontend (the visual representation of the website) using an API,” explains Toon. This approach involves structuring and implementing server logic and functionality as a distinct backend Application Programming Interface (API). Consequently, the frontend can extract data from the API and visualize it.

This modular approach makes the codebase more modular. It simplifies the testing, development, and maintenance of various system components. Additionally, an API can be reused across different systems and applications, allowing for easy extensions to a mobile app and seamless integration with other systems. This enhances development speed and optimizes consistency.

“For the frontend framework, we chose NEXT.js, an open-source framework for React. We used it to build the user interface, leveraging its numerous features that enhance website design and significantly improve loading speed,” Toon continues. “More importantly, with minimal effort, you can convert this framework into a Progressive Web App (PWA).” The audit confirmed that a PWA would bring significant benefits to Pizza Hut.

Given Pizza Hut's unique corporate structure, the need for a Progressive Web App (PWA) was critical. With numerous branches deeply rooted in their local communities, many customers often place their lunch or dinner orders around the same time, leading to peak loads on their systems. Additionally, the ability for customers to customize their pizzas requires a wide range of toppings and configurations that need to be efficiently managed.

This is where PWAs excel. They provide a rich user experience with fast load times and exceptional performance on mobile devices. Users can easily install PWAs on their smartphone or tablet home screens. Another significant advantage is that PWAs feature fully indexable HTML pages, which not only contribute to fast loading speeds but also enhance SEO performance.

“The most significant challenge of this project was ensuring that the webshop remained online at all times,” Bart explains. “Unlike traditional e-commerce operations that ship orders from a central location, each Pizza Hut branch processes orders locally. This meant we had to maintain numerous critical connections.”

Toon illustrates the complexity by comparing it to a giant puzzle. “You start by mapping out all the pieces of the website, such as the addresses section, shopping cart, and checkout. Then, you need to identify the dependencies among them. By arranging them chronologically, you prioritize the website components with dependencies first.”

They approached this challenge with ingenuity. “We began by recreating all the existing content blocks from the current website using React. Then, we seamlessly integrated those React blocks into Next.js, which is straightforward since Next.js is a React framework.”

“To be honest, I’m not a fan of large batches of software releases,” Bart admits, “but in this case, we had no choice. The webshop had to remain operational, so we systematically replaced the old spaghetti code with new front-end components that communicated with the new API. It was an exhilarating experience, and the hard work clearly paid off: each release went smoothly, piece by piece!”

“It was a valuable cognitive exercise to consider whether we wanted a native application or a PWA. Thanks to the audit, it became clear that a PWA was the ideal solution for Pizza Hut,” Bart shares.

“Initially, we took a cautious approach by limiting functionalities at the start. Additionally, we opted for a soft launch to avoid drawing too much attention. At first, we wanted to ensure everything was working smoothly, so we only communicated the launch through our own channels.”

When asked about the PWA's success, Bart responds confidently, “The PWA has gained significant popularity, and we are seeing systematic growth in adoption rates. So yes, it is definitely a success!”

With the PWA proving to be a success, Pizza Hut plans to introduce additional features soon. They are particularly interested in further exploring integrated loyalty programs. And who do they prefer as a partner for this endeavor? Tailr!

When asked about the key ingredients for sustainable, long-term partnerships, Bart responds confidently: “Clear communication and the flexibility to adapt to planning and timelines! The longevity of our collaboration speaks volumes. We are very satisfied with the quality of work delivered and have seen a significant positive impact on our sales. Although the process took some time, it was well worth the wait.”

At Tailr, we take pride in our custom software projects. Our experts thrive on developing solutions that go beyond standard software packages, just like we did for Pizza Hut. As Toon explains, “On the surface, it seems like a simple webshop, but several factors turned it into a very complex project. For instance, the pizza configurator, the integration of online orders with the store's checkout, syncing with the pizza preparation times, and tracking the delivery driver—all of these elements require innovative, out-of-the-box solutions!”

Does your website need an audit? Are you looking for new functionalities? Or are you interested in exploring the possibilities of a PWA for your business? Don’t hesitate to reach out to our experts.