IGTI Blog
desenvolvimento web

Como desenvolver User Interfaces (UI) de forma granular?

Se você é um desenvolvedor web, é muito importante aprender a desenvolver interfaces web, modularizadas baseadas em componentes.

Se você é um iniciante no mundo do desenvolvimento , especificamente no desenvolvimento web, deve se perguntar qual caminho seguir: ser um Desenvolvedor Backend ou um Desenvolvedor  Frontend, ou até mesmo o famoso desenvolvedor FullStack. Independente de qual caminho seguir, você terá que aprender sobre algumas linguagens que fazem parte do desenvolvimento web, nesse contexto temos HTML, CSS e JavaScript. Você não precisa ser expert em HTML ou CSS, mas um Desenvolvedor Web atualmente deve conhecer pelo menos o básico de HTML e CSS e se possível dominar a linguagem JavaScript. Por que eu digo dominar essa linguagem?

Para explicar os motivos de estudar essa linguagem farei um breve histórico dela. JavaScript é uma linguagem de programação interpretada,  criada por Brendan Eich em 1995. Originalmente foi implementada como parte dos navegadores web para que scripts pudessem ser executados no lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido. Logo, era uma linguagem focada somente no frontend, mas com a evolução da linguagem e o surgimento do Node JS, a linguagem ganhou novo destaque no cenário de desenvolvimento web, sendo utilizada no lado do servidor, ou seja, no backend. Para quem não conhece Node JS é uma plataforma que permite a construção de aplicações rápidas e escaláveis usando JavaScript.

Nesse no contexto, surgiram vários frameworks JavaScript que permitiram desenvolver aplicações web rápidas, escaláveis e com grande produtividade. Dentre estes frameworks, temos: Aurelia, Ember, Angular e React. No caso do Angular, o framework utiliza TypeScript que é um superset, ou seja, um super conjunto de tipos que compila para JavaScript simples.

Apesar de inúmeros frameworks, sejam eles utilizados para desenvolvimento ou até mesmo para realizações de teste unitário, o foco aqui é apresentar o framework que vem ganhando grande destaque entre os desenvolvedores web. Vamos conhecer um pouco sobre o framework React, um framework que permite desenvolver interfaces web baseadas em componentes, ou seja, permitindo uma granularidade da interface, definindo melhor as responsabilidade de cada componente.

O React JS é um Framework JavaScript, desenvolvido pelo Facebook e Instagram. É um framework de open-source, que permite criar User Interfaces (UI), ou seja interfaces do usuário, de forma granular (baseado em componentes), onde cada item da interface é um componente.

React pode ser usado no desenvolvimento de aplicativos SPA, Single-Page-Application, ou seja, aplicações de uma única página e aplicativos móveis. Visa principalmente fornecer velocidade, simplicidade e escalabilidade. Como uma biblioteca de interface do usuário, React é frequentemente usado em conjunto com outras bibliotecas, como o Redux.

React foi criado por Jordan Walke, um engenheiro de software no Facebook. Ele foi influenciado por XHP, um componente HTML Framework para php. Foi lançado pela primeira vez no feed do Facebook em 2011 e mais tarde no Instagram em 2012, seu release open source ficou disponível em maio 2013. Em 2015, o Facebook disponibilizou o React Native, um Framework baseado no React para desenvolvimento de aplicações móveis.

Em aplicações React, os componentes respondem a eventos, é possível criar e manter os estados dos componentes, mantendo um fluxo unidirecional de dados.  Veremos a seguir como desenvolver os componentes em React. Neste ponto você precisa saber o que é necessário para poder desenvolver aplicações em React:

Basicamente você precisará conhecer a linguagem JavaScript, estar familiarizado com o padrão Common js e ES6 (ECMAScript 2015), ter conhecimentos em HTML e CSS, e para finalizar será necessário instalar o Node JS que instalará também o NPM, o utilitário de linha de comando para manipulação e desenvolvimento de aplicações em JavaScript.

Para desenvolver aplicação em React é necessário que você tenha instalado no computador: Node JS, um editor de Código (use o editor de sua preferência) e efetuar as instalação do React, usando o npm que é instalado juntamente com o Node. O npm é um gerenciador de pacotes, permitindo a instalação de dependências de seu projeto. Para a instalação do React use o comando a seguir npminstall -g create-react-app. Uma vez instalado, para criar um projeto, basta usar o comando create-react-app nome_app, no prompt do windows ou terminal Linux/mac que a aplicação será criado com a seguinte estrutura do projeto:

Figura 1: Estrutura de um projeto em React

desenvolvimento web

Fonte: Elaborado pelo Autor

Criando o projeto desta maneira, o projeto React será criado baseado na última versão disponível do React. Ao utilizar o método acima, uma estrutura prévia do projeto será criada auxiliando o desenvolvedor nessa tarefa. Poderíamos criar um projeto utilizando o comando npm init -y, para criar um projeto com arquivo package json, a flag -y serve para responder sim para as perguntas básicas de criação de um projeto. Uma vez criado o projeto, poderemos trabalhar em nosso projeto React especificando qual versão queremos utilizar. Para isso basta digitar no propmt ou terminal, o seguinte comando: npminstallreact@versão-desejada –save-dev, a flag –save-dev força a inclusão das bibliotecas instaladas no arquivo package.json como dependência de desenvolvimento.

Agora veremos um pouco sobre componentes, que basicamente é o coração das aplicações desenvolvidas em React. Para criar um componente em React, basta criar um arquivo com a extensão .js ou jsx. Esse arquivo conterá o código responsável por renderizar o componente no Frontend. A ideia é que cada arquivo contenha um único componente, seguindo assim a ideia de granularidade de componentes na interface e que cada componente tenha uma única responsabilidade. A seguir temos uma figura com um trecho de código da criação de uma componente:

Figura 2: Componente React

desenvolvimento web

Fonte: Elaborado pelo Autor

Observe que no topo do código do componente estamos importando React do pacote React, permitindo assim que esse componente possa utilizar as funcionalidades do React. Em seguida criamos o componente como função, podemos também criar o componente como classe, lembrando que o conceito de classe não existe em JavaScript, isso seria apenas um artifício do Padrão ECMAScript 6.

Continuando a falar sobre componente, podemos definir que a criação de um componente em React se divide em três elementos: o componente .js ou .jsx, o componente .html e o elemento root que irá renderizar o componente .js ou .jsx, lembrando que o componente root, também possui a extensão .js ou jsx.

Podemos ver o fluxo de renderização de componentes em React na figura a seguir:

Figura 3: Fluxo de renderização de componentes em React

desenvolvimento web

Fonte: Elaborado pelo Autor

Basicamente o componente Button.jsx, é instanciado pelo componente Root, index.jsx que será injetado no index.html pela tag <div id=”app”></div>, sendo apresentado para o usuário que poderá interagir com essa interface.

Observação importante que devemos fazer aqui é: no componente root, além de realizar o import do React o Component,  realizamos o import também do ReactDOM, responsável pela Renderização do componente.

Uma vez criados os componentes, eles podem se comunicar por meio de propriedades conhecidas no React como props. Elas são propriedades/atributos passados para os componentes filhos. É a forma de passar parâmetro para componente. Vamos ver um trecho de código para exemplificar isso.

Figura 4: Passagem de parâmetros via props

desenvolvimento web

Fonte: Elaborado pelo Autor

Observe que temos a <div>Hello {this.props.name} </div> no componente e logo abaixo chamamos a função render por meio do ReactDOM e passo o parâmetro name = “Taylor”, ao ser Renderizado o parâmetro é concatenado com string Hello, apresentando no navegador a frase Hello Taylor.

Agora para finalizar irei falar sobre os tipos de componentes existente no React.Em React temos dois tipos de Componente, componentes que apenas renderiza uma elemento na interface sem passar nenhum estado que chamamos de componentes Stateless (Presentational), ou seja, um componente apenas de apresentação e temos também os componentes que devolve o estado do componente, que chamamos de componentes StateFull (Container). Basicamente em desenvolvimento o Web o estado de um componente é o nucleo da aplicação, pois por meio dos estados podemos apresentar a evolução dos componentes na interface.

A seguir veremos duas figuras que apresentará componentes stateless e statefull.

Figura 5:Componente StateLess

desenvolvimento web

Fonte: Elaborado pelo Autor

Observe que o componente acima apenas retorna uma frase na tela que não sofrerá mudanças ao longo do tempo.

Figura 6: Componente StateFull

desenvolvimento web

Fonte: Elaborado pelo Autor

Já neste componente acima, temos um constructor que permite manipular a props e o state. Observe que se construíssemos um componente, onde tivéssemos um input para receber um novo valor do state, teríamos uma alteração da dinâmica do state. Logo, a ideia é permitir que por meio de interações com o usuário ou outros componentes, possamos alterar o estado do componente.

Fico por aqui e  espero que tenham gostado de conhecer este framework, o que foi apresentado aqui é apenas um pedacinho do framework, existe um mundo de novidades a respeito dessa ferramenta.

Professor autor: Wanderson Leandro de Oliveira