Porovnání knihovny Redux a React Context API pro sdílený stav aplikace

Pavel Hampl

Bachelor's thesis

Comparison of Redux library and React Context API for shared state of application

Abstract:

Tato bakalářská práce se zabývá problematikou spojenou s webovými aplikacemi. Hlavním cílem práce je popsat a porovnat mezi sebou knihovny Redux a React, jaké mají výhody a nevýhody a způsob použití.Teoretická část srozumitelným způsobem objasňuje informace a pojmy, které setýkají konkrétních pojmů MVC, Fluxu, Reduxu, Reactu, JavaScriptu, HTML, CSS a API. Také poskytuje informace o možnostech konkrétních pojmů a vysvětluje jejich využití v praxi. V práci se předpokládá, že čtenář se s pojmy vyskytujícími v práci alespoň trochu setkal a ví k čemu patří. Případně má nějaké základní znalosti týkající se oblasti vytváření webových stránek nebo programování. Po přečtení práce by měl čtenář, pokud možno něco vědět o konkrétních pojmech a měl by být schopenminimálně vytvořit nějakou webovou aplikaci.V praktické části jsou uvedeny technologie, které jsou využity k implementaci dvou aplikací řešících stejnou sadu problémů. Jedna aplikace je implementována s využitím knihovny React s Redux, a druhá s využitím React Context API. Jsou dále uvedeny postupy při vytváření těchto aplikací s ukázkami z kódu. Je také uveden návrh a definice vlastního postupu měření výkonnosti aplikací. Nakonec je provedeno měření a vyhodnocení výsledků těchto dvou aplikací.

Abstract:

This bachelor thesis deals with issues related to web applications. The main goal of this work is to describe and compare the Redux and React libraries, what are the advantages and disadvantages and how to use them.The theoretical part clearly explains the information and concepts related to MVC, Flux, Redux, React, JavaScript, HTML, CSS and API. It also provides information on the possibilities of specific concepts and explains their use in practice. The thesis assumes that the reader has met the terms occurring at least a little and knows what they belong to. Or has some basic knowledge about creating websites or programming. After reading the work, the reader should, if possible, know something about specific concepts and should be able to at least create a web application.The practical part lists the technologies that are used to implement two applications solving the same set of problems. One application is implemented using the React library with Redux, and the other using the React Context API. Here's how to build these code sample applications. The design and definition of your own application performance measurement procedure is also presented. Finally, the measurement and evaluation of the results of these two applications is performed.

Keywords

Flux, Redux, React, Javascript, HTML, CSS, API, webová aplikace

Language used: Czech

Date on which the thesis was submitted / produced: 29. 4. 2022

Thesis defence

• Date of defence: 24. 5. 2022
• Supervisor: doc. Ing. Filip Malý, Ph.D.
• Reader: prof. RNDr. PhDr. Antonín Slabý, CSc.

University of Hradec Králové

Faculty of Informatics and Management

Bachelor programme / field:
Aplikovaná informatika / Aplikovaná informatika