Use este identificador para citar ou linkar para este item:
https://repositorio.ufpb.br/jspui/handle/123456789/32555
Tipo: | TCC |
Título: | Desenvolvimento de um design system simplificado com react, typescript e material-UI: metodologias e implementação |
Autor(es): | Alves, Márcio Welben Montenegro Mariani |
Primeiro Orientador: | Batista, Carlos Eduardo Coelho Freire |
Resumo: | Este trabalho aborda a criação de um sistema de design simplificado utilizando ReactJS, TypeScript e Material-UI (MUI), com o objetivo de desenvolver interfaces de usuário consistentes e eficazes. O ReactJS é empregado para criar a camada de interação do usuário, proporcionando uma estrutura modular e reutilizável, enquanto o TypeScript adiciona tipagem estática ao JavaScript, aumentando a robustez e a manutenção do código enquanto que o Material-UI (MUI) oferece componentes prontos e personalizáveis, facilitando a criação de interfaces atraentes e funcionais. A análise da eficácia deste sistema de design foi conduzida por meio de sua aplicação em uma Single Page Application (SPA) desenvolvida com ReactJS e TypeScript. De acordo com a análise realizada neste trabalho, esta abordagem oferece uma coleção padronizada de componentes reutilizáveis que asseguram uma experiência de usuário coesa e uma identidade visual consistente, aspectos cruciais para a percepção positiva da marca. Além disso, promovem uma maior eficiência no desenvolvimento, uma vez que a existência de elementos predefinidos e testados reduz o tempo necessário para lançar produtos no mercado, permitindo que equipes foquem em inovação em vez de desenvolver repetidamente soluções básicas. A manutenção simplificada, outro benefício chave, permite que atualizações em um componente sejam automaticamente aplicadas a todos os projetos que o utilizam, minimizando a possibilidade de erros e inconsistências. Por fim, a escalabilidade é significativamente facilitada, já que o sistema pode se expandir de maneira controlada à medida que a empresa cresce, evitando a complexidade e os custos associados à adaptação de cada novo projeto de forma independente. Portanto, Sistemas de Design representam uma abordagem estratégica superior para organizações que buscam otimizar seus processos de desenvolvimento e manutenção de software. |
Abstract: | This paper discusses the creation of a simplified design system using ReactJS, TypeScript, and Material-UI (MUI), aimed at developing consistent and effective user interfaces. ReactJS is used to build the user interaction layer, offering a modular and reusable structure, while TypeScript enhances JavaScript by adding static typing, thus improving the robustness and maintainability of the code. Material-UI (MUI) provides customizable, ready-to-use components that ease the creation of attractive and functional interfaces. The effectiveness of this design system was evaluated through its implementation in a Single Page Application (SPA) developed using ReactJS and TypeScript. According to the analysis conducted in this study, this approach provides a standardized collection of reusable components that ensure a cohesive user experience and consistent visual identity, crucial for positive brand perception. Moreover, it promotes greater development efficiency, as the presence of predefined and tested elements reduces the time needed to launch products on the market, allowing teams to focus on innovation rather than repeatedly developing basic solutions. Simplified maintenance, another key benefit, enables updates to a component to be automatically applied across all projects that use it, minimizing the likelihood of errors and inconsistencies. Lastly, scalability is significantly facilitated, as the system can expand in a controlled manner as the company grows, avoiding the complexity and costs associated with adapting each new project independently. Thus, Design Systems represent a superior strategic approach for organizations seeking to optimize their software development and maintenance processes. |
Palavras-chave: | Desing system ReactJS Typescript Desenvolvimento de interfaces Desenvolvimento front-end |
CNPq: | CNPQ::OUTROS |
Idioma: | por |
País: | Brasil |
Editor: | Universidade Federal da Paraíba |
Sigla da Instituição: | UFPB |
Departamento: | Computação Científica |
Tipo de Acesso: | Acesso aberto Attribution-NoDerivs 3.0 Brazil |
URI: | http://creativecommons.org/licenses/by-nd/3.0/br/ |
URI: | https://repositorio.ufpb.br/jspui/handle/123456789/32555 |
Data do documento: | 16-Mai-2024 |
Aparece nas coleções: | TCC - Ciência da Computação - CI |
Arquivos associados a este item:
Arquivo | Descrição | Tamanho | Formato | |
---|---|---|---|---|
Márcio Welben Montenegro Mariani Alves_TCC.pdf | TCC | 3,61 MB | Adobe PDF | Visualizar/Abrir |
Este item está licenciada sob uma
Licença Creative Commons