Multiplatformní vývoj mobilní a webové aplikace pomocí React a React Native frameworků

Abstract

Tato práce se zabývá analýzou a porovnáním různých přístupů k multiplatformnímu vývoji aplikací pro web a mobilní platformy s důrazem na technologie React a React Native. Práce poukazuje na potenciál nové technologie React Strict DOM, která přináší alternativu pro tvorbu multiplatformních komponent mezi webem a mobilními platformami oproti React Native for Web. Cílem práce bylo provést detailní analýzu dostupných technologií pro multiplatformní vývoj, implementovat a porovnat tři různé přístupy k vývoji multiplatformní aplikace Trip Planner: oddělený přístup, sdílený přístup a hybridní přístup, které využívají tyto multiplatformní technologie. Pro objektivní porovnání aplikací byly stanoveny konkrétní kritéria hodnocení, včetně implementace funkcionality, subjektivního hodnocení práce s technologií, podílu sdíleného kódu, počtu řádků kódu, webové performance a velikosti výsledných balíčků. Výsledky ukázaly, že webové aplikace využívající jakýkoliv přístup a technologii prochází Google Lighthouse testy s nejvyšším možným výsledkem. Co se sdílení kódu týče, hybridní přístup dosáhl nejvyššího podílu multiplatformního kódu (80\%) a nejnižšího počtu řádků kódu (36\% méně než oddělený přístup), zatímco sdílený přístup představoval dobrý kompromis mezi velikostí produkčního balíčku a množstvím multiplatformního kódu - 57\%.

This thesis analyzes and compares different approaches to cross-platform application development for web and mobile platforms with an emphasis on React and React Native technologies. The thesis highlights the potential of the new React Strict DOM technology, which provides an alternative for creating cross-platform components between web and mobile platforms compared to React Native for Web. The aim of the thesis was to perform a detailed analysis of the available technologies for cross-platform development, to implement and compare three different approaches to the development of the cross-platform Trip Planner application: a decoupled approach, a shared approach and a hybrid approach that use these cross-platform technologies. Specific evaluation criteria were established to objectively compare the applications, including implementation of functionality, subjective assessment of how the technology works, the proportion of shared code, number of lines of code, web performance, and the size of the resulting packages. The results showed that web applications using any approach and technology pass the Google Lighthouse tests with the highest possible score. In terms of code sharing, the hybrid approach achieved the highest proportion of multiplatform code (80\%) and the lowest number of lines of code (36\% less than the decoupled approach), while the shared approach represented a good compromise between the size of the production package and the amount of multiplatform code - 57\%.