Mijn eerste kennismaking met de Storybook-bibliotheek was tijdens een project waarin we een progressieve webapplicatie bouwden. We ontwikkelden deze applicatie met een team van twee front-end engineers, twee back-end engineers en twee UI/UX engineers. Met dit geweldige team overwogen we om een componentenbibliotheek te maken om de ontwikkeling van componenten die we op de meeste van onze pagina's en projecten gebruiken te versnellen. Dus we besloten Storybook een kans te geven!
Storybook is a tool used to create and maintain UI components. It allows developers to develop, document, and visualize components in isolation from the rest of an application. Storybook also helps with testing, development workflow, and collaboration between teams.
Lees meer over Storybook hier ➡
Voordat we onze eerste verhalen creëerden, hebben we ons ontwerp opgesplitst in componenten om te beslissen wat we als algemene en pagina-specifieke onderdelen zouden opnemen. Vervolgens gebruikten we Angular om onze componenten en onze componentenbibliotheek voor onze applicatie te maken.
Om Storybook te installeren, hebben we de Storybook CLI gebruikt, wat ons veel tijd bespaarde, omdat het een proces van slechts drie stappen was. We hadden al de startbestanden die nodig waren voor de CLI.
De officiële documentatie van Storybook ➡
Dit zijn enkele nuttige add-ons die we hebben gebruikt binnen onze verhalen. Dit heeft onze communicatie met de teams en andere ontwikkelaars vergemakkelijkt. Deze integraties zijn noodzakelijk om het maximale uit je componentenbibliotheek te halen, en dit wordt de enige bron van waarheid voor elk component..
Voorbeelden van component libraries ➡
Voordat je verhalen gaat maken, heb je een afzonderlijk en herbruikbaar component nodig om optimaal gebruik te maken van alles wat Storybook te bieden heeft. Vervolgens moet je enkele verhalen maken voor je componenten. Je kunt een "stories" map maken aan de hoofdmap van je project en een *.stories.ts bestand toevoegen voor elk component dat je wilt documenteren. Importeer je component en eventuele benodigde modules in elk verhaalbestand. Maak vervolgens een reeks verhalen voor het component met behulp van de storiesOf() functie uit het @storybook/angular pakket.
Dit zijn enkele nuttige add-ons die we hebben gebruikt binnen onze verhalen. Dit heeft onze communicatie met de teams en andere ontwikkelaars vergemakkelijkt. Deze integraties zijn noodzakelijk om het maximale uit je componentenbibliotheek te halen, en dit wordt de enige bron van waarheid voor elk component.
Bij het ontwikkelen van onze eerste verhalen zag ik aanzienlijke voordelen van Storybook voor ons project. Een daarvan was het creëren van verschillende lijsttypen binnen dezelfde component door te kijken naar de grootte van de items binnen de lijst. Bovendien moesten we een ervaring ontwikkelen die leek op mobiele apparaten, dus de mogelijke lijsten waren ofwel een rasterweergave of lijstweergave waarin je eindeloos kon scrollen.
Onze geavanceerde webapplicatie was ontworpen voor een televisiescherm in portretmodus. Vervolgens hoefden we alleen maar wat opties toe te voegen, en daar was het. We hoefden geen gekke capriolen uit te halen in onze Chrome-browser. We konden gewoon de snelkoppeling op de webpagina gebruiken, die werd aangepast naar het juiste formaat!
Nadat elke veelvoorkomende component was ingesteld, had ik het gevoel dat we er niet meer zoveel aandacht aan besteedden als voorheen, en concentreerden we ons meer op het oplossen van kleine bugs bij het wijzigen van sommige items. Dit was prima, maar het was iets waar we iets dieper op hadden moeten ingaan. Ik heb meer schermen en componenten ontwikkeld in Storybook dan in de daadwerkelijke applicatie. Als resultaat hiervan heeft dit mijn ontwikkeling aan mijn kant versneld.
Ik vind Storybook een essentieel hulpmiddel voor ons team. We hadden veel componenten, en het was een uitstekend gebruiksscenario om Storybook te gebruiken. Echter, ik zou Storybook niet gebruiken voor een kleinere applicatie. Dit zou geen extra betekenis geven aan de applicatie, aangezien je meer tijd zou besteden aan het maken van verhalen dan aan het daadwerkelijk afronden van de applicatie.
Hoewel ik zeker de voordelen van Storybook zie, heb ik het gevoel dat we zijn volledige potentieel niet volledig hebben benut in dit project. Je kunt veel meer doen dan ik hier heb beschreven. Bijvoorbeeld, de dingen die ik wou dat we binnen onze Storybook zouden hebben gebruikt, waren de unit testing en de End-to-End testing. Misschien de volgende keer!