Storybook – A melhor maneira de criar componentes

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

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.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200