Front-end design webových aplikací

Tomáš Novák

Master's thesis

Web applications front-end design

Abstract:

Předmětem diplomové práce je Front-end design webových aplikací, kde se autor zaměřuje na analýzu nejpoužívanějších JavaScript a UI frameworků. Poznatky vzešlé z analýzy jsou následně uplatněny na ukázkové aplikaci z oblasti zdravotnictví, která nese pracovní název „HealthCare-App“. Práce je rozdělena na dvě části. V první části jsou popsána teoretická východiska. Jedná se tedy především o popis nejdůležitějších technologií a postupů týkajících se architektury moderních JavaScript frameworků. Následně jsou popsány nejdůležitější aspekty responzivního designu webových aplikací a možnosti usnadnění návrhu responzivních aplikací pomocí moderních UI frameworků. Na závěr této části je popsána vícekriteriální analýza variant, jejíž metodický postup je využit při analýze frameworků v druhé části práce. Druhá část je věnována vlastní práci. Zde jsou na začátku popsány funkční a nefunkční požadavky ukázkové aplikace HealthCare-App. Následně je provedena vícekriteriální analýza variant s cílem nalézt jak u JavaScript, tak i u UI frameworků kompromisní variantu – tj. nejvhodnější frameworky pro implementaci této ukázkové aplikace. Vícekriteriální analýza je provedena pomocí metody váženého součtu. Výsledkem této analýzy je, že jako JavaScript framework je vhodné použít Angular. A jako UI framework pak Twitter Bootstrap. Analýzou získané poznatky jsou následně prakticky uplatněny v ukázkové aplikaci HealthCare-App, která je následně otestována na různých typech koncových zařízení.

Abstract:

The subject of this master thesis isweb application front-end design. The author focuses on the analysis of the commonly used JavaScript and UI frameworks. The findings of the analysis are then applied to a sample application in the healthcare sector. This application has the working title "HealthCare-App". The work is divided into two parts.The first part describes the theoretical background. Above all, it is a description of the most important technologies and procedures related to the architecture of modern JavaScript frameworks. Subsequently, the most important aspects of web application responsive design and design facilitating options of responsive applications using modern UI frameworks are described. At the end of this part, a multi-criteria decision analysis of variants is described, and the methodological procedure is used in the analysis of frameworks in the second part of the work.The second part is focused on the work itself. The functional and non-functional requirements of the sample HealthCare-App application are described at the beginning. Subsequently, a multi-criteria decision analysis of variants is performed to find a compromise variant for both JavaScript and UI frameworks, resulting to the most suitable frameworks for the implementation of this sample application. Multi-criteria decision analysis is performed using the weighted sum method. As a result of the analysis, it is recommended to use Angular as a JavaScript framework and Twitter Bootstrap as a UI framework. The knowledge gained through the analysis is then practically applied in the sample application HealthCare-App. And finally, this application is tested on various types of devices.

Keywords

telemedicína, front-end, Mobile First, design, JavaScript, HTML, CSS, Angular, React, PrimeNG, Bootstrap, Foundation, dotazník, statistika

Keywords

telemedicine, questionnaire, front-end, Mobile First, design, JavaScript, HTML, CSS, Angular, React, PrimeNG, Bootstrap, Foundation, statistics

Language used: Czech

Date on which the thesis was submitted / produced: 30. 11. 2020

Thesis defence

• Supervisor: Ing. Petr Benda, Ph.D.

Czech University of Life Sciences Prague

Faculty of Economics and Management

Master programme / field:
Systems Engineering and Informatics / Informatics