Development of an angular components library to be used in micro-frontend architecture

• Main Author: Alas, Carina Raquel Ferreira
• Publication Date: 2024
• Format: Master thesis
• Language: eng
• Source: Repositórios Científicos de Acesso Aberto de Portugal (RCAAP)
• Download full: http://hdl.handle.net/10400.22/26487
• topic: Micro-frontend; Design System; Components Library; Atomic Design; Angular

The use of Micro-frontend architecture in the development of web applications has come to increase, as previously monolithic architectural structures are being replaced by a modular system composed of loosely coupled components. However, concerns regarding the consistency of user interface and user experience design arise since each micro-frontend acts as an independent service and implementation. The integration of a Design System within a project based upon a micro-frontend architecture becomes crucial and the use of a Components Library to share components can, not only, be the solution to the user interface consistency, but also promote lack of code duplication and improve maintainability. The use of the Atomic Design methodology can assist the creation and documentation of the design system components, further enhancing a modular structure to the components that will be integrated in the system. The solution entailed the development of an Angular web application within an architecture composed of a web API, several micro-frontends, a shell application and a components library that was integrated into the several frontend projects. Quality gate metrics and deployment frequency were used to qualify the project, that met expectations in regards to code duplication and maintainability. A user survey was used to gather data to evaluate the design consistency against hypothesis tests and a System Usability Scale test. It could be concluded that a Components Library can be used in order to provide design consistency and cohesion throughout a web application, built using current industry standards.