Sistematização do desenvolvimento de interfaces web

Abstract

Esta dissertação aborda o processo de implementação de interfaces web, mais concretamente, utilizando a framework React. As interfaces de utilizador são peças fundamentais de qualquer produto computacional interativo. Uma boa interface consegue conquistar o utilizador e fazer com que este utilize o produto, enquanto uma interface de menor qualidade pode ser a causa para a pouca utilização de um software. Por este motivo, existem abordagens e metodologias focadas na criação de interfaces, para proporcionarem uma boa experiência ao utilizador e fazer com que este utilize o software desenvolvido. Após a conceção da interface, é necessário proceder à sua implementação. Para isso existem diversas tecnologias e abordagens. Entre as diferentes tecnologias há ainda múltiplas frameworks de desenvolvimento, cada uma com as suas características específicas, o que dificulta, por exemplo, a transição de uma tecnologia para outra. O ideal seria tornar o processo de desenvolvimento de uma interface o mais independente possível da tecnologia a ser utilizada. Tendo em vista a resolução deste problema a dissertação apresenta duas contribuições principais. Um processo de interpretação do design e da sua divisão em componentes, com o objetivo de maximizar a reutilização de código e consequentemente a eficácia no processo de implementação. A divisão do design é feita através de uma abordagem atómica, onde componentes mais atómicos se juntam e formam componentes mais complexos. A criação de uma arquitetura genérica capaz de representar uma aplicação React, com o objetivo de fornecer uma visão de mais alto nível, mostrando todas as diferentes entidades que existem na arquitetura de uma aplicação, e também a forma como estas entidades se relacionam. Isto permite uma separação de responsabilidades, separando a definição da interface, da sua lógica de negócio, e da interação com serviços externos. Além disso, a arquitetura genérica serviu de ponto de partida para a criação de uma estrutura de organização do código capaz de suportar o crescimento dos projetos ao longo do tempo. Estrutura que facilita, e sistematiza, o trabalho dos programadores, dado que estes ficam a saber exatamente onde têm de inserir determinados novos ficheiros, ou onde está um qualquer ficheiro que precisa de ser alterado quando é necessário atualizar um componente da interface. Por último, para provar que os conceitos descritos anteriormente são aplicáveis, para ajudar os programadores a aplicá-los, e para sistematizar o processo de implementação, criou-se uma ferramenta de geração de código. A ferramenta permite criar diferentes partes da arquitetura genérica automaticamente. É também possível gerar um componente React partindo de um protótipo de uma interface.

This dissertation addresses the process of implementing web interfaces, more specifically, utilizing the React framework. The user interfaces are fundamental parts of any interactive computer product. A good interface is able to conquer its users and make them use the product, while a lesser quality interface may be the cause for the little usage of a software. For this reason, there are approaches and methodologies focused on the designing of interfaces, in order to provide a good experience to the user and make them use the developed software. After designing the interface, it is necessary to proceed with its implementation. For this, there are several technologies and approaches. Among the different technologies, there are also multiple development frameworks, each with its characteristics, which makes it difficult, for example, to transition from one technology to another. The ideal would be to make the process of interface development as independent as possible of the specific technology used. Intending to solve this problem, the dissertation presents two main contributions. A process of interpretation of the design and division into components, to maximize the reuse of code and consequently the efficiency of the implementation process. The division of the design is done through an atomic approach, where more atomic components come together and form more complex components. The creation of a generic architecture capable of representing a React application, with the goal of providing a higher-level view, showing all the different entities that exist in an application’s architecture, and also how these entities relate to each other. This allows a separation of responsibilities, separating the definition of the interface, its business logic, and the interaction with external services. Furthermore, the generic architecture served as a starting point for the creation of a structure for code organization, capable of supporting the growth of projects over time. A structure that makes the programmer’s work easier and more systematic, since they know exactly where to insert new files, or where to find a file that needs to be changed, when it is necessary to update a component of the interface. Finally, a code generation tool was created, to prove that the concepts described above are applicable, to help programmers apply them, and to systematise the implementation process. The tool allows pro grammers to create different parts of the generic architecture automatically. It is also possible to generate a React component starting from a prototype of an interface.