Desenvolvimento Front-end

Storybook - A melhor maneira de criar componentes

Conheça o Storybook e como ele pode te ajudar a criar componentes da melhor maneira possível, com incríveis benefícios para o seu projeto!

há 3 anos 3 meses

Formação Desenvolvedor Especialista Front-end
Conheça a formação em detalhes

Olá Web Developers! O Storybook é uma ferramenta incrível para o desenvolvimento de componentes que você vai usar em seu sistema, independentemente do framework ou biblioteca que você usa. Aqui nós vamos conhecer melhor sobre o Storybook e o porque você deveria usá-lo.

O que é Storybook?

Storybook é uma ferramenta que tem como objetivo servir de ambiente isolado para você criar seus componentes. Ou seja, você não precisa desenvolver seu componente diretamente no seu sistema.

Ele é utilizado por grandes empresas como: GitHub, Dropbox, airbnb, Mozilla, JetBrains, etc.

O Storybook funciona com várias bibliotecas e frameworks, como: React, Angular, Vue, Ember, etc.

React - Despertando o Poder dos Hooks
Curso React - Despertando o Poder dos Hooks
Conhecer o curso

Por que preciso de um ambiente isolado?

A ideia dos componentes é que eles precisam ser reutilizáveis. Se você cria diretamente no seu sistema, algum JavaScript ou CSS do sistema pode influenciá-lo. Além disso, você pode cair na tentação de integrar o componente com alguma fonte de dados para facilitar o acesso a algum dado. E isso já acaba com a possibilidade de reutilização.

Além disso, o componente corre o risco de ficar mais complexo, dificultando na hora de testá-lo.

Como o Storybook pode ajudar?

Um bom exemplo aqui na TreinaWeb é em nosso sistema de ensino, na parte do conteúdo. Há vários testes e validações a serem feitas, e também há vários tipos de exercícios que são embaralhados antes de serem exibidos ao aluno. Imagine o trabalho que eu tinha na hora de testar: procurar uma aula com o tipo de conteúdo que eu precisava e, se fosse necessário testar um exercício, precisava ficar procurando e ter a sorte dele aparecer para mim.

Painel TreinaWeb - Exercício de Completar Frase

Uma saída seria criar uma tela apenas para testes e chamar o componente que quero testar, passando dados mockados. Já fiz muito isso no passado, mas começava a dificultar conforme a quantidade de componentes aumentava.

Gauge - Embraer - MSG-3 - UI Kit

Já com o Storybook eu posso ter uma lista com os componentes e controlá-los para poder testar o que quiser sem muito esforço.

Storybook - Treinaweb - Completar Frase

Veja na imagem abaixo que você pode criar controles para modificar o seu componente em tempo real da maneira que quiser:

Storybook - Controles dos Componentes

Isso tudo é feito com o Storybook de maneira bem simples! Portanto, você vai ter um ambiente leve para criar seus componentes de maneira isolada, poder testá-los de maneira bem simples e ele também acaba servindo de documentação da sua biblioteca de componentes!

Além disso, o Storybook é completamente customizável e possui vários plugins que podem facilitar em várias tarefas, como testes em diferentes resoluções, mudança de tema, teste de acessibilidade, internacionalização, etc.

Desenvolvedor Angular
Formação Desenvolvedor Angular
Conhecer a formação

Autor(a) do artigo

Akira Hanashiro
Akira Hanashiro

Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos.

Todos os artigos

Artigos relacionados Ver todos