Skip to content

Introductie

Wat is comp-hub

comp-hub is een multi-framework platform voor het previewen en delen van componenten (Vue & React) dat ontwikkelteams helpt om business componenten te verzamelen en te hergebruiken.

Waarom comp-hub

In moderne frontend-ontwikkeling is componentisering de norm geworden. Toch lopen we in de praktijk vaak tegen deze problemen aan:

  • Componenten zijn moeilijk te vinden: goede componenten uit oude projecten zijn lastig terug te vinden, waardoor je het wiel opnieuw uitvindt
  • Hoge kopieerkosten: als je componentcode direct kopieert, moet je daarna dependencies, paden, styles en meer zelf oplossen
  • Lastige versiesynchronisatie: als meerdere projecten dezelfde component gebruiken, kunnen updates niet op tijd naar alle projecten worden doorgevoerd
  • Onhandige preview: om het effect van een component te zien moet je een heel project opstarten, wat inefficiënt is
  • Onvolledige documentatie: componenten missen gebruiksaanwijzingen, waardoor andere ontwikkelaars er moeilijk snel mee aan de slag gaan

comp-hub maakt hergebruik van componenten simpel en efficiënt met de gesloten cyclus "upload-preview-download".

Kernmogelijkheden

  • Online preview: bekijk het effect van een component zonder te downloaden, met preview in een klein venster en op volledig scherm
  • Downloaden met één klik: download direct naar de opgegeven map, met behoud van de volledige bestandsstructuur en verwijzingen naar resources
  • Versiebeheer: ondersteuning voor semantische versienummering, zodat je op elk moment historische versies kunt bekijken en omschakelen
  • Dependency-afstemming: intelligente matching van lokale dependency-versies zodat componenten normaal werken in de lokale omgeving
  • Documentatie-integratie: ondersteuning voor Markdown-documentatie, zodat functies en gebruik van componenten in één oogopslag duidelijk zijn

Hoe het werkt

comp-hub gebruikt een hybride architectuur van "lokaal uitvoeren + opslaan in de cloud":

  1. Component-preview: componenten worden in je lokale project gerenderd, zodat de omgeving overeenkomt met het echte gebruik
  2. Component-opslag: componentcode en metadata worden in de cloud opgeslagen, zodat ze makkelijk terug te vinden en te delen zijn
  3. Dependency-detectie: dependencies van componenten worden automatisch geanalyseerd en afgestemd op de lokale omgeving

Dit ontwerp garandeert zowel de betrouwbaarheid van componenten tijdens het draaien als het delen van resources tussen projecten.

Gebruiksscenario's

  • Binnen het team: bouw een teamcomponentbibliotheek en maak standaarden voor business componenten uniform
  • Persoonlijke ontwikkeling: beheer je eigen verzamelde componenten en voorkom dubbel werk
  • Uitbestede projecten: hergebruik snel componenten uit eerdere projecten en verbeter de opleversnelheid

Volgende stappen

Door gebruikers geüploade componenten zijn open source