Bachelor's Thesis

Reconstruction of Web Page Content in Blazor Server for Debugging Purposes

Final Thesis 1.15 MB

Author of thesis: Adam Kundrát

Acad. year: 2025/2026

Supervisor: Ing. Jan Pluskal, Ph.D.

Reviewer: Ing. Miroslav Šafář

Abstract:

This thesis is focused on the development of a software library for screen sharing within web applications built using the ASP.NET Core Blazor Server framework. Screen sharing is designed to assist developers and administrators with debugging and is built on top of the framework's existing internal rendering system. The introductory part of this thesis provides a detailed analysis of the Blazor Server architecture and describes its modules relevant to the process of mirroring. This is followed by a design overview that defines functional and non-functional requirements along with the key mirroring mechanism. The implementation section deals with the realization of individual components, including an administrative dashboard listing all active sessions and a dedicated page for viewing a copy of a selected user's screen. The resulting library is available for download as a package on the NuGet platform and its source code is hosted in a GitHub repository.

Keywords:

ASP.NET Core Blazor Server, ASP.NET Core Blazor, Blazor, .NET, ASP.NET Core, C#, debugging, screen sharing, administrator, library, open-source

Date of defence

18.06.2026

Result of the defence

Defended (thesis was successfully defended)

znamkaAznamka

Grading

A

Process of defence

Student nejprve prezentoval výsledky, kterých dosáhl v rámci své práce. Komise se poté seznámila s hodnocením vedoucího a posudkem oponenta práce. Student následně odpověděl na otázky přítomných. Komise se na základě posudku oponenta, hodnocení vedoucího, přednesené prezentace a odpovědí studenta na položené otázky rozhodla práci hodnotit stupněm A.

Topics for thesis defence

  1. Jakým způsobem je v aplikaci zajištěna anonymizace citlivých dat, se kterými může uživatel pracovat?
  2. Co přesně znamenají uvedená čísla v prezentaci výsledků měření výkonu?
  3. Je vyvíjený systém kompatibilní s mobilními zařízeními a počítá se s jeho provozem na těchto platformách? 

Language of thesis

Czech

Faculty

Department

Study programme

Information Technology (BIT)

Composition of Committee

prof. Dr. Ing. Jan Černocký (předseda)
doc. Ing. Zdeněk Vašíček, Ph.D. (místopředseda)
Ing. Jiří Hynek, Ph.D. (člen)
RNDr. Marek Rychlý, Ph.D. (člen)
Ing. Vojtěch Havlena, Ph.D. (člen)

Supervisor’s report
Ing. Jan Pluskal, Ph.D.

Student odvedl mimořádný kus inženýrské práce. Realizovaná knihovna BlazorLiveView svým záběrem výrazně překračuje rámec zadání. Nad samotné zobrazení kopie obrazovky student dodal nástroje pro vzdálenou asistenci (synchronizace velikosti okna, posunu stránky a obousměrné ukazovátko kurzoru), mechanismus selektivního skrývání citlivých dat na úrovni vykreslovacího systému ve dvou variantách (komponenta LiveViewHideInMirror a stejnojmenný atribut), souhlasový dialog reflektující požadavky GDPR, kompatibilitu s JavaScript Interoperability vč. konfigurovatelných pravidel přeposílání volání mezi okruhy, komponentu LiveViewWaitOnMirror pro řešení race condition při prvotním načtení, vlastní algoritmus překladu sekvenčních čísel ve vykreslovacím stromě a runtime modifikaci čtyř interních metod platformy Blazor prostřednictvím knihovny Harmony. Velmi kladně hodnotím také kvantitativní vyhodnocení vlivu knihovny na výkon ve třech scénářích s uvedením směrodatné odchylky a otestování knihovny ve více prostředích (Windows 10, Debian 12, Chrome, Firefox) včetně testu kompatibility s externí knihovnou BlazorLeaflet. Veřejná dostupnost dosáhla až k publikaci NuGet balíčků - to je úroveň, která se v bakalářských pracích vyskytuje jen výjimečně.


Přes drobné nedostatky (například zjednodušený statistický model výkonových měření o třech opakováních, drobný překlep v rozhodovací akci diagramu na obr. 4.12, kde se objevují dvě větve "ano", a samým studentem zmiňovaná omezení JS Interop přeposílání ve specifických scénářích) hodnotím celkovou úroveň práce jako vynikající. Bakalářskou práci Adama Kundráta hodnotím jako výjimečnou a navrhuji ji hodnotit stupněm A jako výbornou.

Evaluation criteria Verbal classification
Informace k zadání

Cílem práce bylo navrhnout a implementovat knihovnu pro platformu ASP.NET Core Blazor Server, která administrátorovi webové aplikace umožní zobrazit kopii obrazovky vybraného připojeného uživatele v režimu pouze pro čtení, a to bez nutnosti instalace klientského softwaru. Téma vychází z praktické potřeby vzdálené technické podpory a ladění produkčních aplikací postavených nad Blazor Server. Dle provedeného přehledu existujících řešení nebyla nalezena přímo srovnatelná alternativa - běžně používané nástroje typu TeamViewer řeší sdílení obrazovky obecně, nikoliv však na úrovni vykreslovacího systému frameworku.

Zadání považuji za nadprůměrně náročné. Studentovi se nelze opřít o veřejně dokumentované API, neboť většina relevantních tříd platformy Blazor (CircuitFactory, CircuitHost, RemoteRenderer, WebRootComponent, ComponentState) je deklarována jako interní. K tomu, aby zrcadlení vykreslovacího stromu vůbec mohlo fungovat, bylo nutné nastudovat zdrojový kód dotnet/aspnetcore (verze 10.0.1), zorientovat se v životním cyklu okruhů (circuits), pochopit binární reprezentaci stromu uzlů RenderTreeFrame se sekvenčními čísly a navrhnout řešení založené na kombinaci reflexe a runtime modifikace CIL kódu pomocí knihovny Harmony. Zadání tedy překračuje hloubkou i šíří nároky kladené na bakalářské studium a má reálný přesah do framework-level vývoje. S dosaženými výsledky jsem velmi spokojen, zadání bylo splněno beze zbytku a v řadě bodů výrazně rozšířeno.

Práce s literaturou

Student samostatně nalezl 18 zdrojů, kombinaci čtyř knižních publikací (Albahari, Himschoot, Price, Leloudas) a online dokumentace, normativních textů (GDPR) a dokumentace knihoven Harmony a Leaflet. Vzhledem k povaze tématu, které se opírá o nedokumentované interní prvky platformy Blazor, je převaha online zdrojů přirozená a relevantní. Hlavním "zdrojem" práce byl ovšem samotný zdrojový kód projektu dotnet/aspnetcore na platformě GitHub, jenž student analyzoval na úrovni jednotlivých tříd a metod a z této analýzy odvodil mechanismy, na které následně napojil svou knihovnu - tento přístup oceňuji a považuji jej za znak inženýrské zralosti, která se na úrovni BP vidí spíše vzácně.

Aktivita během řešení, konzultace, komunikace

Student byl aktivní od samotného začátku řešení. Konzultace s vedoucím i s konzultantem Ing. Viliamem Letavayem ze skupiny NES@FIT probíhaly pravidelně a iniciovány byly zpravidla na popud studenta. Na konzultace byl vždy velmi dobře připraven, měl nastudovanou problematiku, přicházel s vlastními návrhy řešení a diskuze byly konstruktivní a věcné. Vyzdvihl bych zejména mimořádnou míru samostatnosti - student dokázal samostatně identifikovat klíčová úzká místa návrhu, navrhnout alternativy a opakovaně předkládal funkční prototypy ještě před samotnou konzultací. Zpětnou vazbu od vedoucího zpracovával rychle, věcně a v každé další iteraci se odrážela v posunu jak v technické zprávě, tak v samotné implementaci.

Aktivita při dokončování

Práce byla dokončena v předstihu a její finální podoba byla řádně konzultována. Student si ponechal dostatečný čas na závěrečné testování, vyhodnocení vlivu knihovny na výkon a sepsání kapitol o testování a srovnání s alternativními nástroji. Připravenost na odevzdání byla vzorná.

Publikační činnost, ocenění

Výsledná knihovna je publikována jako open-source projekt pod permisivní licencí na platformě GitHub (https://github.com/i123iu/BlazorLiveView) a zveřejněna ve formě tří balíčků na platformě NuGet (BlazorLiveView jako meta-balíček, BlazorLiveView.Core s implementací a BlazorLiveView.Dashboard s výchozím administrátorským rozhraním). Tím je výsledek práce přímo přístupný širší vývojářské komunitě i bez znalosti zdrojového kódu, což je v případě bakalářské práce nadstandardní výstup. Knihovna byla také prakticky vyzkoušena ve vývoji softwaru řešeného týmem NES@FIT a na základě této zkušenosti považuji její použitelnost za potvrzenou v reálném prostředí.

Points proposed by supervisor: 95

Grade proposed by supervisor: A

Reviewer’s report
Ing. Miroslav Šafář

Student ve své bakalářské práci zpracoval obtížnější zadání zaměřené na analýzu interních mechanismů platformy Blazor Server a návrh knihovny umožňující zrcadlení uživatelských relací na straně administrátora. Zadání považuji za splněné ve všech bodech. Práce prokazuje velmi dobrou orientaci studenta v řešené problematice, schopnost analyzovat zdrojový kód rozsáhlého aplikačního rámce a navrhnout nad ním prakticky využitelné rozšíření.


Za nejsilnější část práce považuji realizační výstup. Implementovaná knihovna je funkční, vhodně strukturovaná a zveřejněná ve formě balíčku NuGet, což významně usnadňuje její integraci do aplikací založených na platformě Blazor Server. Pozitivně hodnotím také podrobný popis interního fungování platformy, použití názorných diagramů a celkovou technickou úroveň řešení.


Dílčí slabiny spatřuji především v současné potřebě převážně manuálního testování, v omezenější analýze výkonnostních dopadů různých typů komponent a v dlouhodobé udržitelnosti řešení, která je ovlivněna závislostí na interních rozhraních platformy Blazor Server. Tyto nedostatky však nesnižují skutečnost, že se jedná o velmi kvalitní inženýrský výstup s praktickým přínosem. Práci proto hodnotím stupněm A.

Evaluation criteria Verbal classification Points
Náročnost zadání

Evaluation level: obtížnější zadání

Zadání vyžadovalo hloubkovou analýzu mechanismů rychle se vyvíjející technologie, které nejsou prakticky pokryty veřejně dostupnou dokumentací. Student proto musel vycházet především z analýzy zdrojového kódu rozsáhlého aplikačního rámce. Následně bylo nutné navrhnout a implementovat způsob, jak tento aplikační rámec obecně rozšířit prostřednictvím knihovny tak, aby umožňoval zrcadlení uživatelských relací na straně administrátora. Zadání této bakalářské práce proto hodnotím jako obtížnější.

Prezentační úroveň technické zprávy

Práce je logicky strukturována a jednotlivé kapitoly na sebe adekvátně navazují. V úvodních částech je nejprve popsáno interní fungování aplikační platformy Blazor Server, které je nezbytné pro následné pochopení návrhu a implementace samotného zrcadlení. Text je vhodně doplněn diagramy a ukázkami zdrojového kódu, které čtenáři napomáhají porozumět komplexnějším aspektům řešené problematiky.

90
Formální úprava technické zprávy

Typografická i jazyková úroveň práce je velmi dobrá; v textu jsem neshledal žádné významnější formální nedostatky.

100
Realizační výstup

Výsledek hodnotím jako velmi kvalitní inženýrský výstup. Za slabinu považuji současnou potřebu převážně manuálního testování a také problematickou dlouhodobou udržitelnost řešení, která vyplývá ze závislosti na interních rozhraních platformy Blazor Server. Měření výkonnosti by dále mohlo být rozšířeno o analýzu vlivu různých typů komponent na výkon aplikace.

95
Využitelnost výsledků

Implementovaná knihovna je zveřejněna jako balíček NuGet, díky čemuž ji lze snadno integrovat prakticky do jakékoliv aplikace založené na platformě Blazor Server. Realizační výstup proto považuji za velmi užitečný a prakticky využitelný.

Rozsah splnění požadavků zadání

Evaluation level: zadání splněno

Student splnil zadání ve všech jeho bodech.

Rozsah technické zprávy

Evaluation level: je v obvyklém rozmezí

Rozsah práce přesahuje 60 normostran.

Práce s literaturou

V seznamu literatury jsou uvedeny čtyři knižní zdroje, které jsou v textu citovány vždy včetně konkrétní strany. Přestože převažují online zdroje, považuji jejich využití u takto úzce zaměřeného tématu za opodstatněné. Student navíc ve značné míře vycházel z vlastní analýzy zdrojového kódu aplikační platformy Blazor Server.

90
Points proposed by reviewer: 90

Grade proposed by reviewer: A

Responsibility: Mgr. et Mgr. Hana Odstrčilová