Neste artigo, vou falar de desenvolvimento ágil e organizado de interfaces web usando uma ferramenta que irá garantir qualidade, velocidade de desenvolvimento e documentação bem organizada.

Estamos acostumados a desenvolver subindo toda a aplicação, tanto back-end, quanto front-end. Desenvolver interface gráfica web dessa forma, irá exigir muitos recursos da sua máquina, dependendo do tamanho da sua aplicação, necessitará de muita memória e muito processamento para desenvolver apenas uma interface gráfica. Será que precisamos de tudo isso? Vou apresentar uma ferramenta excelente chamada Storybook, que vai ajudar você a desenvolver seus componentes UI de forma ágil, organizado e documentada.

O que é?

Storybook é um ferramenta que prepara um ambiente de desenvolvimento para componentes de UI. Ele permite que você desenvolva e projete suas interfaces gráficas de forma rápida, isolado e independente. Possibilitando definir diferentes estados para componente, assim documentando seu comportamento.

Também é possível adicionar ferramentas de test runner para trabalhar em conjunto com o storybook, mostrando na tela todos os testes criados para determinado componente. É uma ferramenta fácil de usar. Ela oferece uma interface gráfica para visualizar o que foi desenvolvido, assim, centralizando em um só lugar os componentes criados do seu projeto.

Vantagens em usar storybook

• Produtividade do desenvolvedor aumenta;
• Ele permite que você navegue por uma biblioteca de componentes;
• Permite criar e visualizar diferentes estados de cada componente;
• Ambiente de desenvolvimento isolado;
• O código mais limpo e modular, como é um ambiente que roda fora da sua aplicação, te força a escrever código mais modular, sem dependência;
• Uma melhor comunicação com desenvolvedor e QA;
• Também permite instalar addons, adicionando mais funcionalidade a ferramenta;
• Mostra na interface erros de sintaxe.

Algumas das vantagens para essa ferramenta simples que te oferece uma série de benefícios. Bom, parece muito bom para ser verdade. Vamos ver na prática como tudo isso funciona.

Como instalar e usar

Existe storybook para os frameworks mais usados no mercado atualmente. Tem storybook para React, React Native, Vue e Angular. React é o framework que mais uso no momento e vou usar ele como exemplo. A instalação deles são parecidas para todos os frameworks, mas vou deixar o link de todos no final do artigo.

Antes de tudo, você precisa instalar o storybook no seu projeto, no meu exemplo, novamente explicando, usarei o React.

npm i --save-dev @storybook/react

Para funcionar corretamente, você precisa também do react, react-dom e do babel-core.

npm i --save react react-dom

npm i --save-dev babel-core

Então adicione no scripts do seu package.json a seguinte linha:

{

...

  "scripts": {

    "storybook": "start-storybook -p 9001 -c .storybook"

  }

...

}

Você precisa apenas adicionar “storybook”: “start-storybook -p 9001 -c .storybook” em scripts, dessa forma criamos um comando storybook para rodar com npm run configurando a porta 9001 do server local e uma pasta de configuração com nome .storybook.

Agora, criamos uma pasta na raiz do projeto chamada .storybook e dentro da pasta, criamos um arquivo config.js com o seguinte código:

import { configure } from '@storybook/react';


function loadStories() {

require('../stories/index.js');

}

configure(loadStories, module);

Esse código, ele carrega o ../stories/index.js, que é onde ficarão todas as histórias documentadas. Agora, criamos uma pasta stories na raiz do seu projeto e um arquivo index.js com o seguinte código:

import React from 'react';

import { storiesOf } from '@storybook/react';


storiesOf('Button', module)

.add('com text', () => ( <button>Meu Button</button> ))

.add('com emoji', () => ( <button>? ? ? ?</button> ));

Na função storiesOf, você define como primeiro parâmetro o nome do seu componente e no segundo parâmetro a variable module. Em seguida, chamamos a função add, que tem como objetivo definir o estado do seu componente. Passando como primeiro parâmetro, o nome do estado e um callback chamando seu componente react. Podemos definir vários estados para um componente.

Usei como exemplo a tag html button, mas poderia ser componente feito em react. Costumo criar o componente dentro da pasta do projeto e importar no storybook, assim já crio o componente na pasta correta. E no momento de desenvolvimento, já escrevo os testes, e ai vem uma das vantagens de ter um ambiente isolado, porque faz você escrever componentes stateless, deixando seu teste simples e fácil de entender.

Agora é só rodar no terminal o comando:

npm run storybook

Vai iniciar, e assim que completar, pode acessar o link: http://localhost:9001

O storybook vai subir uma interface em um server local com as histórias e uma lista de estados definidos para respectivas histórias. Podemos criar várias histórias.

Conclusão

Não me aprofundei tanto em testes porque não é o foco do artigo. Mostrei quais as vantagens de usar o storybook, se você seguir o que a ferramenta está propondo, conseguimos bastante vantagens em tempo de desenvolvimento.

E é isso, espero que vocês aproveitem tudo o que essa ferramenta pode oferecer e obrigado por ler até aqui.

Referências

• https://github.com/storybooks/storybook – Storybook
• https://github.com/storybooks/storybook/tree/master/app/react – Storybook for React
• https://github.com/storybooks/storybook/tree/master/app/vue – Storybook for Vue
• https://github.com/storybooks/storybook/tree/master/app/angular – Storybook for Angular
• https://github.com/storybooks/storybook/tree/master/app/react-native – Storybook for React-Native