Waarom comp-hub
comp-hub lost een simpel maar universeel probleem op: hergebruik van componenten makkelijk maken.
Waar ontwikkelaars tegenaan lopen
Kom je in je dagelijkse werk deze situaties tegen:
- Je hebt een grafiekcomponent nodig voor een nieuw project, weet dat je iets vergelijkbaars in je vorige project hebt geschreven, maar kunt het na lang zoeken niet terugvinden
- Je hebt een tabelcomponent uit een ander project gekopieerd, een half uur besteed aan het aanpassen van paden en styles, en ontdekt dan dat de dependencies niet zijn geïnstalleerd
- Je hebt een mooie component gemaakt, maar collega's weten niet dat hij bestaat en bouwen hem opnieuw
- Je neemt een nieuw project over en vindt drie of vier functioneel vergelijkbare "gebruikersselectors", maar elk heeft wel iets mis
Deze problemen lijken klein, maar ze kosten ontwikkelaars elke dag tijd en energie.
De oplossing van comp-hub
De kern van comp-hub is simpel:
- Componenten makkelijk uploaden — dependencies worden automatisch uitgelezen, previews worden gegenereerd
- Online previewen wanneer je wilt — bekijk het resultaat voordat je beslist of je het gebruikt
- Met één klik naar je project downloaden — volledige structuur blijft behouden, direct te gebruiken
Geen ingewikkelde processen, geen extra leercurve, net zo vanzelfsprekend als het gebruik van npm-pakketten.
Ontwerpfilosofie
comp-hub is gebouwd op een simpel maar krachtig principe:
Alleen componenten die direct kunnen draaien zijn het waard om te lezen.
De traditionele pijn
Als ontwikkelaars vandaag componenten zoeken, ziet de typische workflow er zo uit:
Zoeken → README lezen → Ziet er veelbelovend uit → Dependencies installeren → Werkt niet → Andere proberen → Weer README lezen → Werkt nog steeds niet → Opgeven en zelf schrijven
Dit proces kost enorm veel tijd: je steekt moeite in het lezen van documentatie en het begrijpen van de API van een component, om er dan achter te komen dat hij niet compatibel is met de tech stack van je project.
Hoe comp-hub het omdraait
comp-hub draait deze flow om door eerst compatibiliteit te controleren en pas daarna aandacht te vragen:
comp-hub openen → Niet-compatibele componenten worden automatisch eruit gefilterd → Alles wat je ziet kan echt draaien → Bekijk de live component direct ter plaatse → Tevreden? Downloaden en meteen gebruiken
De vraag "kan het draaien?" wordt vooraf beantwoord — niet pas nadat de gebruiker al tijd heeft gestoken in het leren kennen van de component.
Live preview + documentatie, naast elkaar
Op de detailpagina van een component zie je twee dingen tegelijk:
- Boven: de daadwerkelijk draaiende component — een echte, interactieve instance die in je lokale omgeving wordt gerenderd
- Onder: de volledige README-documentatie — gebruikshandleiding, props, events, slots en voorbeelden
Eén pagina lost zowel "het effect zien" als "de documentatie lezen" op. Je hoeft niet meer te gokken of een component echt werkt.
Waarom dit belangrijk is
Dit ontwerp gaat uit van een kernwaarheid: een component is alleen waardevol als hij aansluit op jouw project.
Als een component afhankelijk is van een UI-bibliotheek die jij niet gebruikt, of van een frameworkversie die jij niet kunt ondersteunen — dan is er geen reden om hem te bestuderen. Het dependency-matching-systeem van comp-hub doet dit filteren automatisch, zodat je alleen componenten ziet die echt bruikbaar zijn in je huidige project.
Vergelijking met Monorepo en NPM-publicatie
Vergeleken met Monorepo
| Vergelijkingspunt | Monorepo | comp-hub |
|---|---|---|
| Koppeling tussen projecten | Alle projecten moeten in dezelfde repository staan | Projecten zijn volledig onafhankelijk, elk project kan het gebruiken |
| Beperkingen in tech stack | Vraagt meestal om een uniforme tech stack en buildtools | Ondersteunt het delen van componenten tussen projecten met verschillende tech stacks |
| Integratiekosten | Vraagt om herstructurering van bestaande projecten | Geen aanpassingen nodig, bestaande projecten kunnen direct worden gebruikt |
| Versiebeheer | Componentversies zijn nauw verbonden met projecten | Componenten hebben eigen versies, downloaden wanneer nodig |
| Toepasselijke situatie | Grote teams die aan dezelfde productlijn samenwerken | Hergebruik van componenten tussen teams en tussen projecten |
Samenvatting: Monorepo past bij grote projecten met nauwe samenwerking, terwijl comp-hub beter past bij losjes gekoppelde scenario's voor het delen van componenten.
Vergeleken met NPM-publicatie
| Vergelijkingspunt | NPM-publicatie | comp-hub |
|---|---|---|
| Publicatieproces | Vereist een account, package.json-configuratie en het uitvoeren van publish-commando's | Uploaden met één klik, dependencies en metadata worden automatisch uitgelezen |
| Versiebeheer | Strikte semantische versienummering, upgrades vragen voorzichtigheid | Flexibel itereren, zonder bestaande gebruikers te raken |
| Preview-ervaring | Eerst installeren, dan het resultaat zien | Online previewen, downloaden als je tevreden bent |
| Privacy | Private pakketten vragen betaling of een zelf gehoste Registry | Direct bruikbaar binnen het team |
| Toepassingsgebied | Geschikt voor basisbibliotheken en algemene componenten | Geschikt voor business componenten en projectspecifieke componenten |
Samenvatting: NPM is geschikt voor het publiceren van openbare basisbibliotheken, comp-hub voor het snel verzamelen en hergebruiken van business componenten.
Verhouding tot AI en low-code
Sommigen vragen zich af: AI kan nu toch direct componenten genereren, hebben we comp-hub dan nog nodig?
Het antwoord is: Juist dan is het nodig.
AI genereert componenten snel, maar als de gegenereerde componenten verspreid raken over allerlei projecten, zijn ze binnenkort weer "onvindbaar en onbruikbaar". comp-hub werkt perfect samen met AI:
- Gebruik AI om de basiscode van een component te genereren
- Preview, debug en verfijn op comp-hub
- Upload en bewaar ze zodat het team ze kan hergebruiken
Low-code platforms lossen het probleem op van "snel pagina's bouwen", terwijl comp-hub het probleem oplost van "business componenten vastleggen"; de twee vullen elkaar aan.
Voor wie is het bedoeld
| Scenario | Waarde |
|---|---|
| Frontendteams | Een teamcomponentbibliotheek opzetten, dubbel ontwikkelwerk voorkomen |
| Zelfstandige ontwikkelaars | Persoonlijke componenten beheren en hergebruiken tussen projecten |
| Uitbestedingsbedrijven | Snel componenten uit eerdere projecten hergebruiken en de opleversnelheid verhogen |
Als je ooit tijd hebt verspild aan "een component zoeken" of "een component kopiëren", dan is comp-hub voor jou gemaakt.