Cílem bakalářské práce je porovnat vývoj demonstrační aplikace ve frameworcích Angular, React a Vue za pomoci rozšiřujících knihoven pro tvorbu uživatelských rozhraní. Úvodem práce pojednává o problematice návrhu uživatelského rozhraní. Dále práce obsahuje představení jednotlivých frameworků a rozšiřujících knihoven. Následně se práce věnuje vývoji tří variant demonstrační aplikace, vždy se jedná o framework a jeho rozšiřující knihovnu. Poslední část se pak věnuje shrnutí vývoje všech aplikací a porovnání výhod použitých nástrojů.
Anotace v angličtině
The aim of the bachelor thesis is to compare the development of a demonstration application in Angular, React and Vue frameworks with the help of extension libraries for creating user interfaces. The introduction deals with the issue of user interface design. Furthermore, this thesis contains an introduction to individual frameworks and extension libraries. Subsequently, this thesis deals with the development of three variants of the demonstration application, it is always a framework and its extension library. The last part then summarizes the development of all applications and compares the benefits of the tools used.
Klíčová slova
Uživatelské rozhraní, Angular, Angular Material, React, Material UI, Vue, Vuetify
Klíčová slova v angličtině
User interface, Angular, Angular Material, React, Material UI, Vue, Vuetify
Rozsah průvodní práce
69 s
Jazyk
CZ
Anotace
Cílem bakalářské práce je porovnat vývoj demonstrační aplikace ve frameworcích Angular, React a Vue za pomoci rozšiřujících knihoven pro tvorbu uživatelských rozhraní. Úvodem práce pojednává o problematice návrhu uživatelského rozhraní. Dále práce obsahuje představení jednotlivých frameworků a rozšiřujících knihoven. Následně se práce věnuje vývoji tří variant demonstrační aplikace, vždy se jedná o framework a jeho rozšiřující knihovnu. Poslední část se pak věnuje shrnutí vývoje všech aplikací a porovnání výhod použitých nástrojů.
Anotace v angličtině
The aim of the bachelor thesis is to compare the development of a demonstration application in Angular, React and Vue frameworks with the help of extension libraries for creating user interfaces. The introduction deals with the issue of user interface design. Furthermore, this thesis contains an introduction to individual frameworks and extension libraries. Subsequently, this thesis deals with the development of three variants of the demonstration application, it is always a framework and its extension library. The last part then summarizes the development of all applications and compares the benefits of the tools used.
Klíčová slova
Uživatelské rozhraní, Angular, Angular Material, React, Material UI, Vue, Vuetify
Klíčová slova v angličtině
User interface, Angular, Angular Material, React, Material UI, Vue, Vuetify
Zásady pro vypracování
Popište teoreticky základní principy a problematiku tvorby webového uživatelského prostředí.
Nastudujte a popište javascriptové frameworky Angular, React a Vue.
Pro každý z výše uvedených frameworků vyberte a popište rozšiřující knihovnu pro vývoj uživatelského prostředí.
Vytvořte demonstrační aplikaci v každém z vybraných frameworků a zaměřte se zejména na způsob tvorby uživatelského rozhraní pomocí rozšiřujících knihoven.
Porovnejte vývoj uživatelského prostředí mezi jednotlivými frameworky a zhodnoťte přínosy vybraných rozšiřujících knihoven.
Zásady pro vypracování
Popište teoreticky základní principy a problematiku tvorby webového uživatelského prostředí.
Nastudujte a popište javascriptové frameworky Angular, React a Vue.
Pro každý z výše uvedených frameworků vyberte a popište rozšiřující knihovnu pro vývoj uživatelského prostředí.
Vytvořte demonstrační aplikaci v každém z vybraných frameworků a zaměřte se zejména na způsob tvorby uživatelského rozhraní pomocí rozšiřujících knihoven.
Porovnejte vývoj uživatelského prostředí mezi jednotlivými frameworky a zhodnoťte přínosy vybraných rozšiřujících knihoven.
Material UI. Material UI [online]. Francie: Material-UI SAS, 2014 [cit. 2021-9-27]. Dostupné z: https://mui.com/
Vuetify. Vuetify [online]. USA: John and Heather Leider, 2016 [cit. 2021-9-27]. Dostupné z: https://vuetifyjs.com/en/
BANKS, Alex a Eve PORCELLO. Learning React: functional web development with React and Redux. Sebastopol, CA: O'Reilly Media, 2017. ISBN 9781491954621.
MOHAMMED, Zama Khan. Angular Projects: build nine real-world applications from scratch using Angular 8 and TypeScript. Birmingham: Packt publishing, 2019. ISBN 1838559353.
MACRAE, Callum. Vue.js: up and running : building accessible and performant web apps. Sebastopol: O'Reilly, 2018. ISBN 1491997249.
Material UI. Material UI [online]. Francie: Material-UI SAS, 2014 [cit. 2021-9-27]. Dostupné z: https://mui.com/
Vuetify. Vuetify [online]. USA: John and Heather Leider, 2016 [cit. 2021-9-27]. Dostupné z: https://vuetifyjs.com/en/
BANKS, Alex a Eve PORCELLO. Learning React: functional web development with React and Redux. Sebastopol, CA: O'Reilly Media, 2017. ISBN 9781491954621.
MOHAMMED, Zama Khan. Angular Projects: build nine real-world applications from scratch using Angular 8 and TypeScript. Birmingham: Packt publishing, 2019. ISBN 1838559353.
MACRAE, Callum. Vue.js: up and running : building accessible and performant web apps. Sebastopol: O'Reilly, 2018. ISBN 1491997249.
Přílohy volně vložené
-
Přílohy vázané v práci
-
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Student v prezentaci seznámil komisi s výsledky své bakalářské práce. Po přečtení posudků vedoucího a oponenta následovala diskuze, ve které byly položeny následující dotazy:
doc Chramcov:
- Který framework je vhodnější a na co je vhodnější?
Student na položené dotazy odpověděl a reagoval pohotově.