Modernizace Webové Aplikace Flagis.com

Abstract

Tato práce se zaměřuje na modernizaci webové aplikace Flagis, která čelí významnému technologickému dluhu. Hlavním cílem byla aktualizace knihovny React z verze 16 na verzi 18. Pro dosažení tohoto cíle byl proveden postupný proces modernizace. Prvním krokem v tomto procesu byla migrace ze šablonového řešení react-boilerplate na rychlý a moderní bundler Vite. Dalším klíčovým krokem byla aktualizace balíčků. Tento proces zahrnoval pročištění používaných knihoven, nahrazení problémových a neudržovaných knihoven a aktualizaci verzí knihoven, aby byly kompatibilní s poslední verzí React 18. Během aktualizace byl proveden také přepis návrhového vzoru HOC na Hooks a do projektu byl zaveden Typescript místo JavaScriptu. Následovaly kroky k odstranění knihovny Redux z projektu. Tento proces byl složitý, ačkoli se podařilo omezit závislost na knihovně Redux a změnit komunikační technologii na GraphQL. Pro tento účel byla zvolena kombinace knihoven ApolloClient a Zustand jako alternativa k Reduxu. V práci byl také navržen budoucí postup pro úplné odstranění knihovny Redux. Výsledkem této práce je modernizovaná aplikace využívající nejnovější technologie a přístupy, které zlepšují udržitelnost aplikace a podporují vývoj nových funkcionalit.

This thesis focuses on the modernization of the Flagis web application, which is facing significant technology debt. The main goal was to upgrade the React library from version 16 to version 18. To achieve this goal, a gradual process of modernization was carried out. The first step in this process was to migrate from the React-boilerplate template solution to the fast and modern Vite bundler. The next key step was to update the packages. This process included cleaning up the libraries in use, replacing problematic and unmaintained libraries, and updating library versions to be compatible with the latest version of React 18. During the update, the HOC design pattern was also refactored to Hooks and TypeScript was introduced to the project instead of JavaScript. This was followed by steps to remove the Redux library from the project. This process was complex, although it was possible to reduce the dependency on the Redux library and change the communication technology to GraphQL. For this purpose, a combination of ApolloClient and Zustand libraries was chosen as an alternative to Redux. The paper also proposed a future procedure for the complete removal of the Redux library. The result of this work is a modernized application using the latest technologies and approaches that improve the sustainability of the application and support the development of new functionalities.