Storybook: Sistema de desenho em desenvolvimento Frontend
Os guias de estilo existem há anos, mas não há muito tempo, designers e programadores começaram a trabalhar em conjunto numa ideia que está a dinamizar e a facilitar a utilização de Interfaces de Utilizador / Users Interface (UI), em muitos produtos de grandes empresas.
Quando criamos aplicações com React, Angular ou Vue podemos ter milhares de componentes na nossa aplicação e estrutura de ficheiros. Pode tornar-se um caos se as nossas pastas não estiverem bem organizadas e, mesmo assim, é difícil encontrar componentes específicos. Por isso, o facto de partilhar os componentes é mais que recomendável, assim como os sistemas de desenho e a sua consequência no desenvolvimento de software: bibliotecas de componentes.
O que é um sistema de desenho?
As interfaces de utilizador modernas são construídas a partir do zero de componentes UI que se são constantemente reutilizados para proporcionar diferentes fluxos de utilizador. Os sistemas de desenho catalogam todos os componentes reutilizáveis da Interface de Utilizador, permitindo a todas as equipas construir interfaces completas e consistentes entre vários projetos com maior rapidez.
Por sua vez, podem também conter informação sobre a sua utilização, como contruir as ditas interfaces ou qualquer informação relevante para a sua implementação ou instalação.
As vantagens dos sistemas de desenho, em comparação com as práticas mais antigas, são a sua escalabilidade, consistência e robustez
As vantagens dos sistemas de desenho, em comparação com as práticas mais antigas, são a sua escalabilidade, consistência e robustez, razão pela qual se converteram em pedras angulares das grandes empresas e projetos nas suas aplicações.
A reutilização poupa tempo e garante uma experiência de utilizador fiável em todos os produtos, gerando assim um ambiente homogéneo e de mais fácil manutenção.
Com esta situação e este novo paradigma surgiu a necessidade de ter uma ferramenta que catalise este conhecimento entre designers e programadores, gere documentação útil para ambos e também facilite o consumo destes componentes por parte dos projetos que queiram utilizar esse sistema de design. Foi exatamente por isso que Storybook chegou para auxiliar.
O que é o Storybook?
O Storybook é uma ferramenta de código aberto para construir componentes UI e páginas separadamente, gerando documentação e possibilitando tanto o desenvolvimento como o testing de componentes. Permite visualizar os componentes de uma maneira organizada e eficiente, interagir com os mesmos de forma dinâmica e testá-los como se estivessem implementados numa aplicação real.
Também consegue gerar uma página estática com toda a documentação relacionada com esses componentes, observar o resultado final do componente ou inclusive o código para poder extrair o próprio componente.
Além disso, dispõe de um grande número de addons ou extensões disponíveis, alguns deles incluídos por default, que fornecem informação adicionada como eventos emitidos pelo componente ou gestão da acessibilidade. A personalização é modular e deve de ir de encontro das necessidades do projeto.
Atualmente, suporta frameworks e bibliotecas como React, Angular, Vue, Web Components, Ember, Svelte, entre outros. Tornou-se o padrão para este tipo de projetos pela sua utilidade e o seu potencial. Podemos ver exemplos de bibliotecas de componentes completas, tais como as da: Audi, Shopify Polaris, JetBrains ou Carbon Components.
StoryBook revela outra forma de trabalhar
Em projetos em que se trabalha em equipa e em que o volume de tarefas é cada vez maior, é importante seguir uma ordem e uma estrutura muito clara e bem definida. Storybook permite-nos trabalhar assim, é uma ferramenta organizada e colaborativa, tornando simples a reutilização de componentes.
Permite que o fluxo de trabalho seja muito mais ágil entre equipas de design e de desenvolvimento. Ao permitir ver o resultado, é muito fácil e rápido identificar e compreender se é o que precisamos ou se é necessário aplicar alguma melhoria ou correção. Grandes empresas como Dropbox, GitHub, Airbnb, Atlassian, Lyft, JetBrains ou Microsoft confiam nesta ferramenta para criar os seus próprios projetos. Falamos?