Interface de Usuário com Node.js e React.js Deixe um comentário

Na última década, com o aumento do número de usuários ativos na internet e com a popularização dos dispositivos eletrônicos entre a população geral, a criação de uma interface amigável, convidativa e útil passou a ser essencial para qualquer um que desenvolva aparatos que necessitam de interfaces de usuário. Não é somente no mercado que o design de uma interface agradável é importante, dentro do Cheetah E-Racing desenvolvemos com bastante cuidado as interfaces que utilizamos para monitorar certas características de nosso carro, todo o sistema supervisório que temos em nossa equipe foi desenvolvido usando o Javascript e suas bibliotecas (que serão comentadas logo menos), sempre pensando na melhor forma de dispor as informações para o usuário.

Sendo mais exato, uma UI (user interface – termo em inglês para interface de usuário) se trata do espaço onde usuários interagem com um site, dispositivo ou aplicativo. Sendo assim, muitas vezes os usuários se deparam com UIs boas e intuitivas sem nem mesmo reparar, mas notavelmente sentem falta dos mecanismos facilitadores de uma UI bem desenvolvida caso migrem para uma interface que não foi bem planejada.

Cada interface é única, carregando os gostos e características do seu desenvolvedor, mas isso não quer dizer que não existam regras a serem seguidas. A fim de facilitar no planejamento de uma UI, listamos a seguir os elementos essenciais que devem estar contidos em qualquer interface que deseja ser amigável com seu usuário:

• Controles de entrada: São elementos de UI interativos que permitem que o usuário insira os dados no sistema. Itens como botões, entrada de texto e caixas de seleção se encaixam perfeitamente como boas entradas
• Componentes de navegação: Itens como controle deslizante, paginação, tags, ícones e imagens informativas facilitam bastante a navegação do usuário por entre as informações de sua interface
• Componentes Informativos: Os elementos que ajudam a compartilhar informações com os usuários incluem caixas de mensagem, janelas pop-ups, displays e mostradores variáveis. Esse componente é ideal para interfaces tais quais painéis.

Em nossa equipe, utilizamos principalmente os componentes informativos, já que o uso é puramente em telemetria, ou seja, recebimento de dados e suas disposições para os membros. Como as aplicações de UI são diversas, não necessariamente todos os elementos citados devem ser realmente executados, apenas utilizam aqueles que se adequam com o conteúdo de seu projeto e aplicação.

Além dos elementos característicos, existem boas práticas importantíssimas a serem levadas em consideração quando se pensa no design de uma interface. A primeira e mais importante é a regra de todo e qualquer design, menos é mais, interfaces mais simples e com menos conteúdo são melhores, utilize apenas o essencial, pense sempre que o usuário busca por rapidez e simplicidade. Pense também na familiaridade, os usuários já estão acostumados com outras ferramentas presentes nas diversas UIs de apps ou sites, portanto, utilizar essas mesmas ferramentas é um atrativo, já que a curva de aprendizagem do usuário se torna menor, trazendo novamente mais simplicidade ao uso. Sempre utilize cores, texturas e fontes de forma inteligente, pensando na disposição em conjunto com o design e em algo chamativo, trazendo a atenção para o que é mais importante em sua interface. Finalmente, algo que muitos desenvolvedores não trazem a devida atenção, faça bom proveito das fontes de escrita! Uma boa fonte, que casa com as cores e o design é agradável aos olhos e atrai os usuários pela comodidade no visual, a Apple utiliza essa técnica em todos os seus aparelhos e softwares, atraindo sempre mais usuários para sua interface devido ao padrão e a simplicidade no design.

Você pode estar se perguntando, agora que sei o que levar em consideração na hora de projetar uma interface de usuário, como realmente posso desenvolver uma UI? É simples, para isso, basta utilizar as bibliotecas React e Node do próprio JavaScript!

O React.js é uma biblioteca front-end muito difundida no mundo do JavaScript e dos web designers, sendo uma biblioteca construída pensando na criação de UIs. Ela foi criada pelo time do Facebook (o que já demonstra sua grande potência perante ao mundo web), com o objetivo primário de otimizar as atividades simultâneas no feed do site. Seu funcionamento ocorre em forma de componentes, onde basicamente a tela é dividida em diversos componentes, com o React operando em cada um de forma particular, tornando a biblioteca uma tecnologia perfeita para a criação de interfaces já que os componentes são operados de formas separadas e não em conjunto como outros softwares e linguagens para a criação de interfaces de usuário

A programação em React.js não utiliza somente o JavaScript como a maioria dos usuários pensa, mas sim utiliza uma extensão chamada JSX, que é a união do próprio JavaScript com o HTML, duas das mais poderosas ferramentas utilizadas para desenvolvimento front-end. Apesar de ser plenamente possível usar somente o JavaScript, é ideal que se use o JSX, já que com ele vem um dos pontos mais fortes do React, a simplicidade e rapidez. Confira a seguir a diferença:

Código Utilizado JSX

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Olá, {this.props.name}!
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

Código Utilizando apenas Javascript

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Ol\xE1, ",
      this.props.name,
      "!"
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));

Com o exemplo prático é possível ver a diferença de simplicidade de cada método e fica claro a simplicidade alcançada com o JSX.
Ambos os códigos implementam um componente simples que recebe dados de entrada e retorna o que deve ser exibido através do método render(). Seu retorno é uma caixa com a mensagem editada.

Para utilizar e editar códigos com React é possível usar editores de texto como o Atom em sua própria máquina ou então fazer tudo em um ambiente virtual como o CodePen, uma ferramenta no próprio navegador que permite a criação e visualização de UIs em React.

Falando um pouco do Node.js, essa seria uma biblioteca também desenvolvida usando o JavaScript, porém, com seu uso para o back-end, portanto, não espere sair desenvolvendo seu design e a disposição dos componentes de sua UI, o Node é o responsável por toda a lógica, comunicação e captura dos dados executados no background da UI, sendo perfeito para desenvolvimento de APIs, já que seu principal uso é o de processar requisições feitas pelo usuário.

Vamos imaginar uma aplicação para esclarecer o papel do Node nos sites e UIs. Pense em um site, com interface rebuscada, diversos acessos a requisições externas, como conexão a banco, pagamento online e acesso a informações exteriores. Agora, imagine também diversos usuários acessando ao mesmo tempo as diversas aplicações e chamando por várias vezes ao mesmo tempo as requisições externas. Um código JavaScript simples desenvolvido para o front-end dificilmente lidará com a quantidade de dados de forma rápida e satisfatória, uma grande quantidade de CPU e memória será utilizada para todas essas requisições. É nesse ponto que inserimos o Node, um código em JavaScript rodando 100% no back-end, ou seja, diretamente no servidor da aplicação! Com o Node, temos um programa dedicado a gerir as requisições, fazendo uma gestão de IO (Input/Output – Entrada/Saída no português) de uma forma diferente, utilizando o chamado Event Loop, que delega as requisições de IOs para threads isoladas destinadas exatamente a gerir isso, otimizando e muito o nosso site ou UI, economizando no hardware e tempo de execução de cada tarefa.

Agora que entendemos o papel e como utilizamos cada ferramenta nas aplicações, fica fácil enxergar para onde vamos. Criamos todo o design e “rosto” da nossa UI através do React e então, com o Node, otimizamos nossa back-end para o acesso às diversas informações externas que vamos inserir na nossa UI.

Na telemetria e no sistema supervisório que utilizamos dentro do Cheetah E-Racing fazemos a união dessas ferramentas poderosíssimas do JavaScript para criar sistemas com riqueza de detalhes acerca das informações de nosso carro, criando todo o design, dispondo os componentes, os temas e as fontes usando o React e então gerindo as IOs de forma a evitar problemas com tempo de requisição utilizando o Node. Em nosso sistema de telemetria capturamos mais de 100 informações sobre nosso carro, claro que não dispomos todas no Supervisório, mas esse número já demonstra o porquê necessitamos de uma boa gestão de requisições. Quanto maior o número de dados e informações que é liberada ao usuário, melhor terá de ser a gestão de IOs para evitar atrasos, ainda mais considerando a operação crítica que nosso sistema possui, precisamos de velocidade na informação para um bom monitoramento das características do veículo, portanto, demora na execução das tarefas que o usuário demanda é algo impensável!

E aí? Gostou de aprender mais sobre o tema e entender melhor o papel do Node e do React na criação de UIs? Se sim, basta utilizar todo conteúdo aprendido e se aventurar no mundo do JavaScript de forma mais fácil agora! Fique ligado, não perca nossos próximos conteúdos! Até a próxima!

Esse conteúdo é resultado da parceria da MakerHero com a Cheetah E-Racing. Curtiu o conteúdo? Então deixe seu comentário abaixo! E não esqueça de acompanhar a Cheetah E-Racing nas redes sociais.