Headless in the Spa? F7 workshop on new tech­no­lo­gies

What was normality before the pandemic is a small sensation at the end of 2022: the offices of F7 were almost full with the development crew! They had joined a 3-day workshop to develop first experiences and approaches to run TYPO3 "headless", to separate backend and frontend development and thus pave the way for elegant "Single Page Applications".

Headless and Spa

The web is evolving rapidly. For some time now, terms such as "Headless CMS" and "Single Page Application" have increasingly come into the discussion when it comes to web technologies.

Headless CMS means the radical separation of backend and frontend. Until now, the TYPO3 system was responsible for rendering the templates (server side rendering), which were then played out as the frontend. But computers are now so powerful that the rendering can be done by the browsers themselves (client side rendering). Javascript frameworks have evolved that make this possible. In addition, the nature of end devices has changed - what used to be just the desktop computer displaying the website can now be very different media to play out content (such as an app for the smartphone).

As a consequence, content management systems (CMS) like TYPO3 can only be used as a backend to create and manage content and have nothing to do with rendering the frontend. If frontend is called the "head" of a website, the CMS thus becomes "headless".

The use of Javascript frameworks for rendering now makes the frontend much more flexible. Whereas in the past a relatively static HTML was rendered and then styled and animated, nowadays so-called "Single Page Applications" (SPA) are possible. Here, the website consists of a single HTML document, with the actual content being dynamically reloaded. This makes browsing a much smoother experience for users.

Backend meets Frontend

What happened in the workshop? After a joint kick-off, the backend and frontend working groups were sent on their way to approach the question "how do we use TYPO3 as the basis for a Javascript frontend framework".

The backend crew was busy configuring the TYPO3 system to play out all data in a readable JSON format. Here, existing headless extensions were evaluated to learn from and test for practicality. So we pooled our expertise and developed a prototype, which so far is very precise and achieves its goal with little code: to provide the frontend with a data structure they can play with. Another challenge for the backend was to bring everything together and set up the server configuration so that the API server (TYPO3) can communicate with the node server of the frontend.

The task for the frontend was completely different: Here we had to choose the most suitable one for our purposes from the numerous JavaScript frameworks. The decision was made in favor of Next.js, which is based on React. Then we could start: first with dummy data, later (when the backend could deliver) with the data from the API server, version 0.1 of a new frontend was built.

The atmosphere during the whole workshop was great. The change from tinkering in the respective working groups and the coordinating meetings of backend and frontend was a lot of fun, it was always exciting to see what the other side had worked out in the meantime. The fact that we as an agency can take space for innovation away from the day-to-day business is something we find very enriching.

Where do we go from here?

The result is impressive for a proof of concept: the most important content elements in TYPO3 were built in such a way that they are output as a JSON structure. The frontend can access them and render a simple website.

Of course, this is just the beginning and there are more hurdles to overcome to create a sustainable product. But the beginning has been made and through the gained experience a roadmap has been created to offer elegant and efficient Headless / SPA solutions to our customers in the near future.

As a suitable test object, we will first equip our own website with the new technology. This will be our space station to navigate headless - but not mindless - through the new worlds of technology.