Biblioteca de componentes React inspirados no framework CSS Bulma

Abstract

No desenvolvimento Web, as linguagens CSS, HTML e JavaScript predominam no mercado como soluções para a criação de sistemas web dos mais variados portes, com a crescente adesão do JavaScript por parte dos desenvolvedores, diversos frameworks e bibliotecas foram criados para darem auxílio ao desenvolvimento de sistemas com essas tecnologias, ao observar que a integração das três linguagens para criação de um sistema web acarreta em uma quantidade considerável de repetição de código. O React é uma biblioteca JavaScript para construção de interfaces gráficas, que busca oferecer aos desenvolvedores que utilizam JavaScript um reaproveitamento dos códigos criados para a construção das interfaces. O Bulma é um framework CSS que predefine diversos elementos que podem ser utilizados pelos desenvolvedores JavaScript para manipular as aparências das aplicações desenvolvidas. Ao usar o Bulma em conjunto com o React é introduzido um problema, a grande quantidade de código HTML repetido na integração das duas tecnologias, contrapondo a ideia primária dos frameworks e bibliotecas de facilitar o reuso de software, com o intuito de melhorar o reuso de software ao utilizar o React e o Bulma em conjunto, desenvolveu-se no presente trabalho uma biblioteca open source de componentes React implementados especificamente para utilização com o framework CSS Bulma. Ao finalizar o presente trabalho, constatou-se que é possível diminuir consideravelmente o código HTML necessário fornecendo melhor produtividade ao utilizar React e Bulma.

In Web development, CSS, HTML and JavaScript predominate in the market as solutions for the creation of web systems of the most varied sizes, with the growing adhesion of JavaScript by developers, several frameworks and libraries were created to assist the development of systems with these technologies, when observing that the integration of the three languages to create a web system causes a considerable amount of code repetition. React is a JavaScript library for building graphical interfaces, which seeks to offer developers who use JavaScript a reuse of the codes created for the construction of interfaces. Bulma is a CSS framework that predefines several elements that can be used by JavaScript developers to manipulate the appearance of developed applications. When using Bulma in conjunction with React, a problem was introduced, the large amount of HTML code repeated in the integration of the two technologies, opposing the primary idea of frameworks and libraries to facilitate software reuse. In order to improve software reuse when using React and Bulma together, a library of React components developed specifically for use with the CSS Bulma framework was developed in the present work. At the end of this work, check if it is possible to considerably decrease the HTML code needed to improve the use of React and Bulma.