Advantages and disadvantages of the use of web components for development of modern web applications

Thesis title: Výhody a nevýhody použití webových komponent při vývoji moderních webových aplikací
Author: Zemanec, Hynek
Thesis type: Bakalářská práce
Supervisor: Kosek, Jiří
Opponents: Vojíř, Stanislav
Thesis language: Česky
Abstract:
Práce mapuje možnosti aplikace znovupoužitelných komponent v kontextu webového vývoje se zaměřením na standard webových komponent a JavaScriptovou knihovnu React. Pro účely komparativní analýzy výhod a nevýhod byly implementovány 3 varianty vzhledově stejné webové aplikace, nejprve exkluzivně prostřednictvím každé technologie a následně jejich kombinací. Provedeným aplikačním a uživatelským testováním byla vyhodnocena nejvhodnější varianta, kombinující oba přístupy. Závěrem analýzy je poznatek, že technologie si vzájemně nekonkurují a při vhodné kombinaci vytvářejí komplementární vztah. Vytvořená webová aplikace slouží pro účely soukromé veterinární ambulance. Jejímu vzniku předcházela analýza funkčních a ne-funkčních požadavků, které byly zohledněny v grafickém návrhu, na jehož základech byly komponenty vymezeny a následně implementovány. Výsledkem práce je množina znovupoužitelných komponent pro každou z diskutovaných technologií a konfigurované prostředí pro snadnější vývoj webových komponent.
Keywords: React; Shadow DOM; webové komponenty; custom elements; HTML Templates; ES Modules
Thesis title: Advantages and disadvantages of the use of web components for development of modern web applications
Author: Zemanec, Hynek
Thesis type: Bachelor thesis
Supervisor: Kosek, Jiří
Opponents: Vojíř, Stanislav
Thesis language: Česky
Abstract:
The paper maps the possibilities of application of reusable components in the context of web development with a focus on the standard of web components and the JavaScript library React. For the purposes of comparative analysis of advantages and disadvantages, 3 variants of the same web application were implemented, first using each technology exclusively, followed by their combination. The most suitable variant, combining both approaches, was evaluated by the results of both application and user testing. The result of the analysis is a conclusion that technologies do not compete, but rather form a complementary relationship when suitably combined. Created web application is used for the purposes of a private veterinary clinic. Its creation was preceded by an analysis of functional and non-functional requirements, which were later taken into account in the graphic design, on the basis of which the components were outlined and subsequently implemented. The result of the implementation is a set of reusable components for each of the discussed technologies and a configured environment for easier development of web components.
Keywords: React; web components; custom elements; HTML Templates; Shadow DOM; ES Modules

Information about study

Study programme: Aplikovaná informatika/Aplikovaná informatika
Type of study programme: Bakalářský studijní program
Assigned degree: Bc.
Institutions assigning academic degree: Vysoká škola ekonomická v Praze
Faculty: Faculty of Informatics and Statistics
Department: Department of Information and Knowledge Engineering

Information on submission and defense

Date of assignment: 11. 10. 2019
Date of submission: 10. 5. 2020
Date of defense: 15. 6. 2020
Identifier in the InSIS system: https://insis.vse.cz/zp/71244/podrobnosti

Files for download

    Last update: