| Name: | Description: | Size: | Format: | |
|---|---|---|---|---|
| 9.78 MB | Adobe PDF |
Authors
Advisor(s)
Abstract(s)
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.
O uso da arquitetura Micro-frontend no desenvolvimento de aplicações web tem aumentado, à medida que estruturas arquitetónicas anteriormente monolíticas vêm a ser substituídas por um sistema modular composto por componentes fracamente acoplados. No entanto, surgem preocupações quanto à consistência da interface gráfica e do design da experiência do utilizador, uma vez que cada micro-frontend atua como um serviço e possui uma implementação independente. A integração de um Design System dentro de um projeto baseado em uma arquitetura micro-frontend torna-se crucial e o uso de uma Biblioteca de Componentes para compartilhar componentes pode, não só, ser a solução para a consistência da interface, mas também para promover a diminuição de duplicação de código e melhorar a capacidade de manutenção. A utilização da metodologia de Design Atómico pode auxiliar na criação e documentação dos componentes do design system, potencializando ainda mais uma estrutura modular aos componentes que serão integrados no sistema. A solução implicou o desenvolvimento de uma aplicação web em Angular, numa arquitetura composta por uma web API, vários micro-frontends, uma aplicação shell e uma biblioteca de componentes que será integrada nos vários projetos de frontend. Métricas de qualidade e de frequência de deployment foram utilizadas para qualificar o projeto, que atendeu às expectativas em relação à duplicação de código e manutenibilidade. Um questionário respondido por usuários da aplicação foi usado para adquirir dados para avaliar a consistência do design em relação a testes de hipóteses e um teste de Escala de Usabilidade do Sistema. Pode-se concluir que uma Biblioteca de Componentes pode ser utilizada para fornecer consistência e coesão de design numa aplicação web, construída usando os padrões atuais da indústria.
O uso da arquitetura Micro-frontend no desenvolvimento de aplicações web tem aumentado, à medida que estruturas arquitetónicas anteriormente monolíticas vêm a ser substituídas por um sistema modular composto por componentes fracamente acoplados. No entanto, surgem preocupações quanto à consistência da interface gráfica e do design da experiência do utilizador, uma vez que cada micro-frontend atua como um serviço e possui uma implementação independente. A integração de um Design System dentro de um projeto baseado em uma arquitetura micro-frontend torna-se crucial e o uso de uma Biblioteca de Componentes para compartilhar componentes pode, não só, ser a solução para a consistência da interface, mas também para promover a diminuição de duplicação de código e melhorar a capacidade de manutenção. A utilização da metodologia de Design Atómico pode auxiliar na criação e documentação dos componentes do design system, potencializando ainda mais uma estrutura modular aos componentes que serão integrados no sistema. A solução implicou o desenvolvimento de uma aplicação web em Angular, numa arquitetura composta por uma web API, vários micro-frontends, uma aplicação shell e uma biblioteca de componentes que será integrada nos vários projetos de frontend. Métricas de qualidade e de frequência de deployment foram utilizadas para qualificar o projeto, que atendeu às expectativas em relação à duplicação de código e manutenibilidade. Um questionário respondido por usuários da aplicação foi usado para adquirir dados para avaliar a consistência do design em relação a testes de hipóteses e um teste de Escala de Usabilidade do Sistema. Pode-se concluir que uma Biblioteca de Componentes pode ser utilizada para fornecer consistência e coesão de design numa aplicação web, construída usando os padrões atuais da indústria.
Description
Keywords
Micro-frontend Design System Components Library Atomic Design Angular