The AlekSIS® project, a free and open school information system helping with digitisation of school organisation, originally had a frontend based on the server rendered Django template engine as a reliable and easy solution. As our frontends got more complex and we had to built interactive components like a timetable builder, we ran into limits of this system. In addition to that, the UI framework we had been using got out of support. So we decided to develop a completely new frontend as a single page application based on Vue.js and the UI framework Vuetify, connecting to the Django backend using a GraphQL API.

But because of our large, modular ecosystem with many different apps, we knew we never would be able to migrate everything to the new frontend within one release. Therefore, the team faced the challenge to integrate pages with the old frontend together with new pages in the new single page application. The core of this system is an abstraction layer that allows daisy chaining the Vuetify views with server-rendered pages, including sugar that lets legacy Django pages communicate with the client-side UI framework.

We would like to share our experiences about this complex migration and what problems to expect and how we solved them.

(Allergen declaration: May contain traces of JavaScript.)