Integração de web componentes em frameworks modernos: um estudo de caso

Abstract

O presente trabalho de graduac¸a˜o abordou o desafio da interoperabilidade entre projetos frontend que fazem uso de frameworks web baseados em Javascript. O problema central reside na complexidade de integrar diferentes tecnologias e estruturas, dificultando a comunicac¸a˜o eficiente entre sistemas desenvolvidos com abordagens distintas. O objetivo principal da pesquisa foi identificar e analisar os pontos positivos e negativos de duas abordagens espec´ıficas: a utilizac¸a˜o de Web Components e a adoc¸a˜o da tecnologia e estrutura inerentes a cada framework. Ale´m disso, buscou-se determinar se existe uma abordagem superior em termos de interoperabilidade, considerando os desafios enfrentados pelos desenvolvedores. Para atingir esse propo´sito, foi desenvolvido o projeto “BookShelf”, que se fundamenta em uma API gratuita de livros. Este projeto serviu como um ambiente de teste, permitindo a avaliac¸a˜o pra´tica das abordagens propostas. Apo´s a implementac¸a˜o, foram coletadas métricas utilizando a ferramenta Lighthouse, proporcionando uma base objetiva para a análise comparativa. A resoluc¸a˜o do problema foi guiada pela identificac¸a˜o das vantagens e desvantagens de cada abordagem. O levantamento minucioso desses aspectos foi complementado pela análise de cena´rios específicos nos quais cada abordagem se destacou. Essa investigac¸a˜o aprofundada permitiu a compreensa˜o de contextos nos quais uma abordagem se mostrou mais eficaz que a outra, contribuindo para a definic¸a˜o de diretrizes pra´ticas na escolha de estratégias de interoperabilidade. Dessa forma, este trabalho proporciona insights valiosos para desenvolvedores enfrentando desafios de interoperabilidade em projetos frontend. Ao entender as nuances das abordagens analisadas, os profissionais estara˜o mais capacitados para tomar deciso˜es informadas, escolhendo a estratégia mais adequada a`s demandas espec´ıficas de seus projetos. Este estudo visa contribuir para o avanc¸o cont´ınuo da eficieˆncia e colaborac¸a˜o no desenvolvimento de sistemas frontend complexos e diversificados.

This undergraduate thesis addressed the challenge of interoperability among frontend projects utilizing web frameworks based on Javascript. The central problem lies in the complexity of integrating different technologies and structures, complicating efficient communication between systems developed with distinct approaches. The main objective of the research was to identify and analyze the strengths and weaknesses of two specific approaches: the use of Web Components and the adoption of the technology and structure inherent in each framework. Additionally, the goal was to determine if there is a superior approach in terms of interoperability, considering the challenges faced by developers. To achieve this purpose, the “BookShelf” project was developed, which relies on a free book API. This project served as a test environment, allowing for the practical evaluation of the proposed approaches. After implementation, metrics were collected using the Lighthouse tool, providing an objective basis for comparative analysis. The resolution of the problem was guided by identifying the advantages and disadvantages of each approach. The thorough examination of these aspects was complemented by the analysis of specific scenarios in which each approach excelled. This in-depth investigation allowed for an understanding of contexts in which one approach proved more effective than the other, contributing to the definition of practical guidelines in choosing interoperability strategies. Thus, this work provides valuable insights for developers facing interoperability challenges in frontend projects. By understanding the nuances of the analyzed approaches, professionals will be better equipped to make informed decisions, choosing the strategy most suitable for the specific demands of their projects. This study aims to contribute to the ongoing advancement of efficiency and collaboration in the development of complex and diverse frontend systems.