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!

Akira Hanashiro 18 de dezembro de 2020

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 de React - Despertando o Poder dos Hooks
CONHEÇA 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
O Angular é utilizado por várias empresas em soluções de larga escala. Nesta formação vamos conhecer desde os fundamentos do Angular: como iniciar um projeto, o que são componentes e a trabalhar com o Angular CLI. Até conceitos mais avançados: componentes, diretivas, pipes, validação de formulários, rotas, internacionalização, modularização, carregamento sob demanda, criação de bibliotecas, API de animação e renderização no servidor com Angular Universal.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor 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.

    Posts desse Autor

Artigos relacionados