Applying a styled component to modern web applications
Ho, Hung (2020)
Ho, Hung
Åbo Akademi
2020
Julkaisu on tekijänoikeussäännösten alainen. Teosta voi lukea ja tulostaa henkilökohtaista käyttöä varten. Käyttö kaupallisiin tarkoituksiin on kielletty.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi-fe2020091669783
https://urn.fi/URN:NBN:fi-fe2020091669783
Tiivistelmä
Modern websites are made of small components which are then composed into bigger components. Often these are divided into presentational and container components.
Presentational components do not have much logic, they are mostly reusable visible UI components, such as buttons, text fields, menus, etc. Container components do not have visible parts themselves, but instead, use presentational components to render themselves and they contain all the business logic. An example of a component played as the container would be a login form, it uses text fields, buttons, checkboxes as presentational components and then ties them together to handle login.
Styling is a large issue with presentational components, so it is a challenge to reuse them. If the button has an on-click behavior for some specific purpose, it’s not reusable.
The proposed solution in this master’s thesis is a way of defining a design system, revising website look, and implementing new features related to branding support for both web and mobile use.
Presentational components do not have much logic, they are mostly reusable visible UI components, such as buttons, text fields, menus, etc. Container components do not have visible parts themselves, but instead, use presentational components to render themselves and they contain all the business logic. An example of a component played as the container would be a login form, it uses text fields, buttons, checkboxes as presentational components and then ties them together to handle login.
Styling is a large issue with presentational components, so it is a challenge to reuse them. If the button has an on-click behavior for some specific purpose, it’s not reusable.
The proposed solution in this master’s thesis is a way of defining a design system, revising website look, and implementing new features related to branding support for both web and mobile use.