tillbaka till startsidan

32. Ett bibliotek med komponenter

Lyssna på Spotify lyssna! Lyssna på iTunes

I dagens avsnitt snackar vi om komponentbibliotek. Vad det är för något, hur vi använder dem, vilka komponenter vill vi ha i ett bibliotek och mycket annat. Anton har en förkärlek för komponentbibliotek som är “headless” där det inte följer med någon styling vilket leder in på diskussioner om när man faktiskt vill att stylingen ska följa med, avvägningen mellan att hålla komponenter små och att tillhandahålla alla användningsfall som behövs, samt hur den avvägningen förändras beroende på vem användaren är.

Dessutom en hel del om Atomic Design, att hitta ett gemensamt språk, koda först och tänka sen samt såklart en liten liten parantes om TypeScript.

Om du gillar podden blir vi väldigt glada för en liten recension i iTunes eller en prenumeration på Spotify. Följ oss och säg hej på @asdfpodden på Instagram eller Twitter (Anton, Therése) <3

Länkar

Avsnittets skämt:

Vad kallar programmeraren ett misslyckat bankrån?
En cache-miss.
Inskickat av Erik
Skrapa här!!
Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
Dagens skämt, inspirationen kommer från vår lyssnare Erik men jag har gjort om det lite lite grann.
00:00:10
Vad kallar programmeraren ett misslyckat bankrån?
00:00:15
Ingen aning.
00:00:18
En cash miss.
00:00:21
Ja, absolut, absolut. Bra jobbat Erik.
00:00:28
Tack Erik.
00:00:30
För att du också fick förklara för mig vad en cash miss är. Men jag lärde mig något nytt.
00:00:37
Ja, men det är ju toppen ändå. Det är ändå alltid något som man säger.
00:00:42
Verkligen. Förfrågar vi inte vad det betyder bara.
00:00:46
Nej, det ska vi absolut inte göra. Det lämnar vi till ett annat avsnitt så kan vi bara gå in på det.
00:00:51
på det. Välkommen till ett nytt avsnitt av ASTF.
00:00:55
Idag kommer jag i alla fall ihåg att säga välkomna till avsnittet, vilket känns bra.
00:01:00
Det glömde jag ju lite förra gången när det var lite exalterat om något ämne.
00:01:04
Vem vet vad det var. Hur mår du i värmen, Therese?
00:01:10
Jag är på toppen. Nej, det är väldigt varmt.
00:01:16
Så jag känner mig lite extra långsam.
00:01:21
Hur mår du?
00:01:23
Det är så fruktansvärt varmt.
00:01:26
Det har varit ett lite återkommande inslag i det här.
00:01:29
När vi spelar in så brukar vi bygga en liten studie och hänga upp lakan och grejer.
00:01:33
Men idag så gick det absolut inte att göra det där.
00:01:35
För det är så sinnessjukt varmt.
00:01:37
Så nu sitter jag bara med lite kuddar runt omkring mig och lite allt möjligt.
00:01:40
Ljudkvaliteten kanske inte på topp, men det får man stå ut med eftersom det är sommar och varmt.
00:01:46
- Jag har stängt min balkongdörr på första gången på, jag vet inte hur länge.
00:01:54
Det märks, jag känner det så att säga.
00:01:57
- Ja, jag kan verkligen tänka mig det.
00:02:00
Så avsnittet kanske är lite långsammare än vanligt, men det vi tänkte prata om är väl lite så här
00:02:05
med typ komponentbibliotek eller designsystem.
00:02:08
Det finns ju så jävla många termer och jag har fan inte facit på vad alla betyder.
00:02:11
Men typ ett komponentbibliotek var väl utgångspunkten.
00:02:14
Och jag kom att tänka på det här för att jag satt med ett litet HAL-projekt för ett tag sedan.
00:02:20
Fick äntligen lite inspiration igen efter allt flyttande och bytt uppdrag och allt möjligt.
00:02:25
Men så satt jag med det och drog in ett komponentbibliotek som heter Radix, eller Radix UI.
00:02:34
Som är...
00:02:35
De har både ett komponentbibliotek, men det var också något som de kallade för primitives.
00:02:39
Vilket är typ...
00:02:40
Ostylade, eller headless.
00:02:42
Det vill säga, du får bara massa komponenter och sen får du styla dem själv.
00:02:47
Och annars har de bara default styling.
00:02:48
Och sen har de väldigt bra stöd för accessibility, eller tillgänglighet.
00:02:54
Och allt annat man egentligen vill ha funktionsmässigt.
00:02:58
Men just stylingen får man göra helt själv.
00:03:00
Då kom jag på att det här kan jag prata med Therese om och se vad du tycker.
00:03:06
För vi har ju varit in på det lite tidigare att du har suttit med material UI.
00:03:11
Är det du har suttit med?
00:03:13
– Ja, på olika ställen faktiskt.
00:03:18
Jag har suttit just nu väldigt mycket med material UI.
00:03:24
Men har även suttit en del på projekt där man valt att bygga egna komponentbibliotek.
00:03:31
Så att en hel del sådana har det ändå blivit.
00:03:36
Jag har aldrig hört talas om RADx.
00:03:38
- Nej det känns som att det är ganska nytt faktiskt.
00:03:41
Alltså de har liksom så här, det finns inte alla komponenter och de utvecklar nya grejer hela tiden och sånt där.
00:03:47
Men jag tycker det verkar riktigt, riktigt nice.
00:03:51
Och jag vet inte om vi ska definiera komponentbibliotek.
00:03:54
Det känns som att man kan dela in en massa olika saker i det.
00:03:58
För mig är komponentbibliotek bara en samling med färdigbyggda komponenter.
00:04:05
I varierande grad kanske.
00:04:07
Som jag var inne på tidigare med de här Headless, där man designar dem själva.
00:04:10
Men bara en samling komponenter som man kan återanvända och som gör sin lilla grej väldigt bra.
00:04:20
Sen finns det ju en massa andra designsystem som jag nämnde tidigare.
00:04:23
Det är väl kanske mer när man drar in även färger och vilka typsnitt man ska ha och
00:04:28
allting sånt och applicerar det på komponenterna så att säga.
00:04:34
Ja, för jag kan ju ha det helt runt om bakfoten.
00:04:38
Men just som du säger designsystem tänker jag är allt som ligger runt omkring.
00:04:44
Där skulle jag även kanske kunna stoppa in
00:04:47
grid-system och även vilka breakpoints man vill jobba med för de olika skärmstorlekarna och så vidare.
00:04:54
Så att det verkligen är en komponent.
00:04:56
Och här tänker jag att man också ofta kan komma in på atomic design.
00:05:01
Att en komponent ofta är väldigt små saker.
00:05:05
Det börjar med, nu känns som jag har nämnt mycket saker, så först atomic design då.
00:05:09
Det är ett designsystem som är av en person och jag kommer inte ihåg hans namn nu.
00:05:15
- Men det kommer säkert att påverka sen. - Kan det vara "bread frost" kanske?
00:05:20
- Ja, det kan det nog vara, ja. Just det.
00:05:23
Men i alla fall att det är hur du bygger upp sidor, att du har atomer som är de minsta beståndsdelarna vi kan ha,
00:05:32
och med hjälp av dem så bygger du ihop molekyler, precis som det funkar i kemin, och all materia som vi har.
00:05:38
Sen kan du använda det av atomer och molekyler för att bygga organismer.
00:05:42
Och sen kan du använda dem för att bygga helasidor.
00:05:45
Så det är verkligen att bryta ner det till de minsta möjliga beståndsdelarna och göra dem återanvändbara.
00:05:50
Så att en atom är till exempel kanske en knapp.
00:05:54
Och den knappen kan du ta och stoppa in var du behöver den.
00:05:58
Men den knappen kommer alltid vara en komponent du kan använda en atom.
00:06:03
Och den ser alltid ut på samma sätt.
00:06:05
Eller den fungerar på samma sätt.
00:06:07
och sen kan du välja hur den ska se ut.
00:06:09
Jag babblar.
00:06:12
- Nej, men det är så att jag också stött på atomic design lite grann.
00:06:17
Jag tycker det är ett ganska vettigt sätt att tänka på för att det blir väldigt tydligt
00:06:23
så att det blir tydligt hur komponenterna eller hur de olika strukturerna ska interagera med varandra.
00:06:28
Sen tycker jag alltid att det blir svårt att säga, okej, men vad är en atom?
00:06:32
Och vad ska vara en molekyl, till exempel?
00:06:36
och när blir det en organism och så vidare.
00:06:38
Så på så sätt tycker jag att det kan vara lite småklurigt ibland.
00:06:42
Men när det är gjort bra så tycker jag att det funkar väldigt, väldigt bra.
00:06:45
Och det är ett sätt att tänka och prata om sina komponenter på ett sätt som inte är
00:06:50
bara "det här är en knapp", "det här är en text".
00:06:55
– Ja, precis. Men just också att när man pratar om komponentbibliotek
00:07:02
då hoppar jag ofta till just den här typen, alltså atomic design i huvudet,
00:07:07
och jag ser det ofta som att ett komponentbibliotek för mig brukar ofta dra gränser i just atomer och molekyler,
00:07:14
men egentligen inte så mycket mer.
00:07:16
För att jag tycker att ett komponentbibliotek är som allra bäst när det är simpelt,
00:07:25
eller så simpelt som det går att göra det,
00:07:26
När man börjar bygga väldigt komplexa saker så får de ofta väldigt mycket edge case.
00:07:32
Du vill tillgodose dom edge casen och sen bygger du på det och så blir det mer komplexitet.
00:07:38
Och sen så om någon går in och råddar och ändrar den då kan du förstöra saker på många andra ställen.
00:07:43
Så jag tycker det är svårt att skapa bibliotek som innehåller jättemycket komplexitet.
00:07:53
Ja, verkligen. Det är verkligen en gränsdragning. Vad ska ingå i komponentbiblioteket?
00:08:00
Jag tycker att Radix, som jag nämnde tidigare, där har jag egentligen bara använt deras primitives.
00:08:06
Där är det verkligen grundläggande saker.
00:08:10
Sedan har de ett extremt stort fokus på just tillgänglighet.
00:08:15
Vilket gör att de har typ såhär, ja men, Radio Group.
00:08:19
Som är en grupp med radio-knappar som verkligen har bra stöd både för att bli stylade.
00:08:29
För att radio-knappar är ganska notoriskt svåra att styla.
00:08:32
Man måste ju hålla på med en massa ful saker.
00:08:35
Men de har både bra stöd för att styla dem och då bra stöd för att det fortfarande stöds av alla guidelines för att tillgängligheten ska vara bra.
00:08:43
Det är en grundläggande grej som finns.
00:08:45
Sen finns det lika mycket, om vi tar några mer exempel, typ en drop-down-meny.
00:08:51
Det är definitivt ett steg upp, men jag tycker fortfarande att det passar in.
00:08:57
Det är fortfarande väldigt komponentbaserat. Det är en komponent och så drar du in fler komponenter i den för att bygga ut den här menyn.
00:09:05
Och då tycker jag också att det ändå passar in i ett komponentbibliotek, även om det är på gränsen till att det är mycket mer interaktivitet och lite mer komplicerad komponent.
00:09:18
- Ja, jag har lite... för att hur mycket... jag antar att du bygger all logik själv, eller vad man ska kalla det.
00:09:29
- Nej... - Vad du vill ska hända när man klickar på menyn och sånt, eller får du en...
00:09:34
- Nej, alltså det beror lite... - ...skickar du in det?
00:09:36
- Ja, exakt. Om vi tar fallet, liksom drop-down-menyn, då är det liksom att du har en komponent som är en root-komponent
00:09:44
I den skickar du in en trigger som är själva knappen som ska trigga det här.
00:09:53
Sen skickar du också in en som är själva menyroten.
00:09:59
Alltså det som ska visas.
00:10:00
Och i den innehåller varje rad i den här dropdown-menyn.
00:10:03
I och med att det är helt ostajlat så får man ju stajla allting själv.
00:10:07
Men det är fortfarande de elementen man förväntar sig att det ska vara.
00:10:12
Och sen att du får även med att du kan styra det med tangentbord och att det blir rätt saker som sägs när du kör skärmläsare.
00:10:24
Så all den logiken finns ju där.
00:10:28
Sen såklart att vad som ska hända när du klickar på en specifik val i menyn, det måste man ju kanske styra själv.
00:10:36
Men som standard så har de att det är en komponent som heter "dropdownmenu.trigger"
00:10:42
Och den kommer att rendera en knapp för dig som öppnar menyn.
00:10:48
Sen kan man såklart köra, för de här komponenterna är "uncontrolled"
00:10:52
Som är på samma sätt som du kan köra med formulär till exempel.
00:10:55
Men du kan också skicka in en "open state" eller "open bool"
00:11:00
Som säger att "nu vill jag styra om den här ska vara öppen eller stängd"
00:11:03
Så att du kan göra lite som du vill.
00:11:05
av standard så skulle jag säga att de rekommenderar att man kör
00:11:08
dem "uncontrolled" för att då blir det verkligen rätt med skärmläsare och allt annat sånt runt omkring.
00:11:15
Det är jäkligt nice att få med det här med accessibility, bra accessibility
00:11:24
för det är jäkla lätt att trampa bort från stigen i den djungen.
00:11:31
Ja verkligen.
00:11:32
Och även om man bara tittar på den här radioknapparna.
00:11:35
De är så här, ja det kanske är lite enklare.
00:11:37
Men sen ska man börja styla dem själva.
00:11:39
Så blir det så här, man måste göra några workarounds för att man inte kan styla radioknappar.
00:11:42
Blablabla.
00:11:43
Och då blir det rätt liksom.
00:11:44
Men samtidigt också de här mer komplexa komponenterna.
00:11:46
Som till exempel en dropdown.
00:11:48
Att den, eller bara så här okej men jag vet att den här kommer funka om jag kör med tangentbord eller om jag kör med en skärmläsare eller vad det nu kan vara.
00:11:57
Så att på så sätt är det ju sjukt skönt att använda det.
00:12:01
Och sen älskar jag ju att det är helt ostylat.
00:12:03
För att det känns också som en grej som har kommit mycket på sistone.
00:12:07
Att förr var det väldigt mycket, liksom...
00:12:10
Att komponentbibliotekar kom med sin egen styling och sen fick man skriva över den.
00:12:15
Och så blev det ofta lite konflikter.
00:12:18
Man bara "Åh nej, nu har det blivit så här, här och jag vet inte vart jag är riktigt."
00:12:21
Medans nu för tiden tror jag att fler och fler erbjuder att det är "headless".
00:12:26
Det vill säga att du har inget utseende som bandlas med dem.
00:12:30
Jag kan tänka mig att det är väldigt nice att man får styla det själv.
00:12:36
Jag kommer ihåg det när man kollar på CSS bootstrap.
00:12:43
När det här kom så såg man verkligen att det här är en bootstrap app.
00:12:51
Den har dragit in bootstrap CSS för att alla såg exakt likadana ut.
00:12:57
Du kunde välja färg, men utseendena var fortfarande de samma.
00:13:03
Det tänker jag att man vill bortifrån.
00:13:09
Men därmed känns det som att man fastnar lite för den grejen, just om man kör material UI.
00:13:16
För det finns ju såklart möjlighet att styla om det, men det är ju väldigt ändå...
00:13:22
Alltså det ser ju ut på ett visst sätt ändå, speciellt om man inte stylar om det på vägen så har den ju verkligen en stil som man känner igen om man har suttit med det i taget. Eller sa jag bara suttit alldeles för mycket med det? Jag vet inte.
00:13:39
Och det är ju väldigt schysst om man till exempel vill ha ett hobbyprojekt, vill ha upp det fort eller man bryr sig inte om styling eller kanske till och med om det är interna projekt och sånt.
00:13:51
Men om det är extern webb så finner jag det ändå lite knöligt liksom. För då blir jag mer så här, men om man vill ha ett speciellt utseende och Car faktiskt har i Trumman en hel design, ett designsystem för man vill att saker ska se ut.
00:14:05
Då känns det så himla svårt att ta in existerande saker som Material.UI och sedan verkligen lägga tid på att forma om dem.
00:14:16
Då tänker jag att det är bättre att göra det från början.
00:14:18
Nu har jag inte varit i en sån här situation, men jag skulle gärna inte vilja hamna i en sån heller.
00:14:23
- Ja, precis.
00:14:25
För att gå in på det här lite grann.
00:14:26
Det var ju en period när det kändes som att alla nya hemsidor som gjordes såg ut som bootstrap.
00:14:34
Det var verkligen standardutseende från BoosterShop.
00:14:37
Sen lade de till att man kunde ändra lite färger, så var det folk som gjorde det.
00:14:40
Men jag håller verkligen med dig om att det användningsområde finns fortfarande kvar.
00:14:46
När man verkligen säger att det är en intern grej, vi bryr oss inte hur det ser ut.
00:14:49
Eller det är ett litet hobbyprojekt.
00:14:51
Jag vill inte hålla på och styla, utan jag vill kanske testa att bygga en backend.
00:14:55
Då vill jag bara slänga upp en snabb frontend, eller vad det nu kan vara.
00:14:58
Då finns det definitivt fortfarande nytta av de här färdigstylade biblioteken.
00:15:04
Absolut. Eller också att det här är ett jättestort komplext system som har mycket mer fokus på funktionen på utseende.
00:15:18
Ja, exakt. Och då vet man ju också att man får saker som är väl testade helt enkelt.
00:15:26
I och med att så många använder dem.
00:15:27
Och då kan man också vara säker på att vi inte kommer få några konstiga visuella buggar om vi kör det här rakt upp och ner.
00:15:34
Nej. Men ibland så blir jag ändå lite fundersam på, eller fundersam på, men jag tycker ibland att det känns så blåtat eller vad man ska kalla det, eller stort, när man drar in en hyfsat liten komponent, kanske till och med hyfsat simpel komponent, men som man vet i bakgrunden är enorm för att kunna täcka alla specialfall och alla extra lösningar och du kan skicka in,
00:16:03
Du har ett enormt API för att skicka in olika proppar om man snackar React-komponenter för att du ska kunna tillgodose alla möjliga scenarion eftersom du är ett publikt komponentbibliotek.
00:16:16
Då blir det så här, när blir det snarare svårare att jobba med beroende på vad du har för egen,
00:16:23
vad du vill uppfylla med dina komponenter på det du bygger?
00:16:30
Var tänker man att den gränsen är?
00:16:33
Finns det en gräns där det blir jobbigare?
00:16:35
- Ja, det är ju definitivt en bra fråga för att det känns ju verkligen lite samma sak som,
00:16:41
alltså det handlar ju oavsett vad man bygger nästan, att man bara bygger på saker
00:16:46
och bygger på saker och bygger på saker och till slut så är det så här, oj nu är det ingen som har tänkt på helheten här
00:16:51
att det blir supersvårt att använda.
00:16:53
Jag vet, det var något bibliotek jag använde som hette typ AG Grid tror jag.
00:16:59
Och API-ytan på den var så oerhört stor.
00:17:04
Det var verkligen en komponent som hette AG Grid som man drog in för alla möjliga användningsområden som fanns.
00:17:11
Det spelar ingen roll vad för typ av tabell eller något sånt skulle det vara.
00:17:16
Det var verkligen typ Excel i webbläsaren.
00:17:19
Och du kunde använda den för allt.
00:17:23
Det fanns hur många proppar som helst.
00:17:27
De flesta proppar var att du skickade in ett optionsobjekt som var hur stort som helst.
00:17:32
Det var så sjukt mycket grejer.
00:17:34
Och där kände jag att där har man misslyckats lite grann.
00:17:38
Det måste vara vettigare att bryta ut det.
00:17:40
"Okej, men vi har separata komponenter för vissa saker som gör vissa grejer väldigt bra."
00:17:45
Men det här att man inte behöver fundera på.
00:17:47
"Okej, behöver jag använda en av de här 150 propparna nu bara för att göra den här grejen jag vill?"
00:17:53
Och vilka proppar är kompatibla med varann och allting sånt.
00:17:56
Så att...
00:17:57
Nej, det måste verkligen vara att man får hålla tillbaka om man gör något externt.
00:18:01
Eller liksom publikt, kanske man ska säga.
00:18:03
Som ska användas av många.
00:18:05
För det gäller att den här komponenten ska bara göra det här.
00:18:08
Om det kommer en person som vill ha till use case så kanske de kan bygga det själva.
00:18:12
Det gäller att man vänder på kontrollen av komponenten.
00:18:17
Det finns många sådana sätt.
00:18:19
Vi kommer ihåg när vi pratade om det tidigare, men det finns render props eller hooks nu för tiden.
00:18:23
Eller higher order components förut till exempel.
00:18:26
Som gör att du kan ge användaren av komponenten mer kontroll över vad den gör.
00:18:32
utan att på det viset lägga till en till prop som gör det du ska göra.
00:18:39
Så jag tror också att precis som du säger, till slut så blir det kanske lite mer för svåranvänt för att det kanske ska vara värt det.
00:18:47
Men det beror ju såklart också på kvaliteten på komponenterna.
00:18:52
- Ja, men just också ibland att vara hur mycket kod drar du in egentligen för att göra en liten sak om du inte tar tillvara på alla de här superkomplexa sakerna dessutom.
00:19:06
- Ja, men verkligen. Det är ju definitivt en ganska svår avvägning tror jag. Jag har inte slutat gjort det här själv någon gång.
00:19:14
Men det känns ändå som att det är en väldigt svår avvägning.
00:19:17
Och särskilt, jag tror att det kanske är en ännu svårare avvägning
00:19:20
om man sitter internt på ett bolag.
00:19:23
Alltså om du sitter på ett större bolag så ska du utveckla deras komponentbibliotek
00:19:26
och så kommer det en massa folk från olika ställen
00:19:29
och vill använda det här och har lite olika krav på alla.
00:19:31
Och då blir det helt plötsligt liksom så här
00:19:33
då är det inte någon random på internet som säger åt dig att göra det här.
00:19:35
Utan då är det istället, okej det är någon i bolaget som har ett krav som behöver det här
00:19:40
och det kommer ge oss värde, men hur ska vi hantera det?
00:19:44
- Ja, för det där är jag lite svår också, för jag tycker det är en så otrolig skillnad på något sätt att bygga komponenter i ett komponentbibliotek.
00:19:56
Man måste verkligen tänka, alltså jag kan ju ofta känna mig väldigt så här, okej, men jag ska bygga det här, jag ska lösa det här problemet, det ska se ut så där.
00:20:04
Och då sätter jag mig ner och sen så börjar jag bygga på ett sätt som kanske inte alltid är så generiskt från början, utan verkligen är gjort för att vara i det kontextet jag tänkte använda det i.
00:20:18
Men när man bygger ett komponent i ett komponentbibliotek så är det snarare så att du ska kunna se, okej, vart skulle det här eventuellt kunna användas?
00:20:27
Hur ser till att den kan vara helt isolerande och fungerande av sig själv? Hur hanterar jag eventuella edge cases?
00:20:32
Edge Cases. Man måste verkligen hitta alla eventualiteter innan den på något sätt har börjat användas.
00:20:43
Och det är jättesvårt.
00:20:45
Ja, verkligen. Man måste välja, ska vi bygga för att komponenten ska vara så flexibel som möjligt?
00:20:57
"Nu förutspår vi att det här use caset kommer komma så vi ska bygga den här komponenten så flexibla att den klarar av det."
00:21:08
Eller bygger man först och främst "Okej, vi har det här use caset. Om vi bygger det nu, då funkar komponenten åt nu."
00:21:16
Men sen om det kommer till use case, då måste vi bygga och lägga på det ytterligare.
00:21:22
Ja, och då kanske man verkligen använder en funktion som man verkligen gjort innan.
00:21:25
Då måste man börja typ versionshantera eller lägga till flera olika proppar.
00:21:30
Sen måste man deprecate den.
00:21:31
Sen helt plötsligt så sitter man verkligen i smeten, så att säga.
00:21:35
Eller vad man ska säga.
00:21:37
Ja, nämen exakt.
00:21:39
Och det här är ju liksom också i och för sig,
00:21:41
alltså det är ju inte ett annorlunda problem mot när man bygger komponenter i en app
00:21:46
utan att tänka att det är ett komponentbibliotek.
00:21:48
Alltså det är liknande fråga man ställer sig,
00:21:50
även om det kanske är på en mindre skala när man bygger bara lokalt.
00:21:55
– Ja, det beror ju på hur bråttom man har, tänkte jag säga.
00:22:03
– Ja, det är i och för sig alltid en bra brasklapp att lägga in.
00:22:06
"Okej, det beror lite på hur bråttom det är."
00:22:09
– Ja, för ibland så kanske man... eller kanske man och man...
00:22:16
Jag kanske till exempel bara bygger någonting som jag vet är extremt till skräddarsytt i just den situationen som jag bygger det till.
00:22:29
Till exempel att stylingen kanske har en massa extra, om vi nu ska säga att man har styling också, kanske har en massa extra whitespaces som man absolut inte vill ha om det skulle vara en jinglerisk komponent.
00:22:38
komponent för det kommer en paja massa andra grejer och man kanske inte gör det super flexibel.
00:22:42
Det kanske inte är att bara lyfta ur den komponenten ibland.
00:22:45
Alltså det finns ju ganska många sådana genvägar som jag tar speciellt när jag har bråttom som man absolut inte kan göra i ett
00:22:52
komponentbibliotek liksom.
00:22:53
Så det är därför jag känner att det blir, jag är väl kanske en sån som kodar före och tänker sen, men i ett komponentbibliotek så måste man
00:23:02
verkligen tänka först.
00:23:04
Ja.
00:23:05
Nej, men absolut. Så är det ju verkligen. Där har du helt rätt i.
00:23:10
Det är nog relativt stora skillnader ändå.
00:23:16
Även om man kanske tänker samma banor när man har tid.
00:23:20
Men jag tänker också, ur ett användarperspektiv,
00:23:26
så tycker jag också att det är så här extremt skönt när det är så tydliga komponenter.
00:23:34
Jag har varit med några gånger, om man har vissa komponenter i ett bibliotek som man tar upp och så vet man inte riktigt vilken man ska använda till vad.
00:23:41
De har ungefär samma use case, men de har liksom splittats på dem.
00:23:50
Det kanske har varit en komponent som de har splittat på för att nu ska den användas på lite olika sätt.
00:23:55
Men att de är nästan lite för nära varandra.
00:23:58
Då blir det istället åt andra hållet att jag försöker använda den här och bara "Okej, vilken ska jag använda?"
00:24:01
Jag kommer inte ihåg om det var någon bibliotek eller om det bara var någon fristående komponent som någon hade släppt.
00:24:09
Men det är liksom att man skulle använda en och så fanns det två.
00:24:13
Och så började man bygga en för det såg rätt ut.
00:24:15
Och så kom en halvverk som bara "Nu funkar inte det där" och så googlade man lite grann.
00:24:18
"Ja, men använd den andra" fast det stod liksom ingenstans.
00:24:20
Eller det förklarades inte riktigt bra och så blev man bara irriterad istället.
00:24:24
Och det är också en grej som kanske kommer med att om biblioteket blir för stort eller att man splittar det för mycket
00:24:32
och då är det istället ett problem åt andra hållet jämfört med att man har en komponent som är skitstor.
00:24:37
Ja, och om man inte har en tydlig, lättläst dokumentation så kan det ju verkligen vara döden.
00:24:46
Ja, dokumentationen känns ju superviktig.
00:24:49
Just för att där kan man både förklara hur det är tänkt att användas, men även vilka proppar som finns och hur det ska fungera.
00:24:56
Och det är också för att cirkla tillbaka till något tidigare som vi har sagt, komponensbibliotek utan typescript.
00:25:02
Det skulle jag kanske inte använda idag.
00:25:07
Det är fan det bästa. Autosjälvdokumenterande, det är en riktig dröm.
00:25:15
Men är allt bara självdokumentation? Är allting så självklart när man bara läser saker? Jag gråter ju ofta inombords på jobbet när jag läser dokumentation eller typescripttyper för att jag förstår ingenting.
00:25:34
sen så känner jag mig jättetrög.
00:25:36
- Ja, vissa TypeScript-typer kan man verkligen riva sitt hår över.
00:25:41
Men jag tänker att oftast är det väldigt skönt att bara kunna se att
00:25:45
okej, det här är de propparna som finns. De förväntar sig det här.
00:25:48
Det syns direkt i VS Code och inga konstigheter.
00:25:53
- Ja, som jag har sagt i tidigare avsnitt, jag förstår helt klart poängen med det.
00:26:02
mitt inre barn fortfarande lite grinig.
00:26:07
- Jag kanske ska sluta ta upp typeskriften och förstöra stämningen.
00:26:11
- Jag orkar inte ens vara upprörd i den här värmen.
00:26:16
- Det är det jag ska passa på.
00:26:21
- Hur generiska är de här biblioteken?
00:26:27
De kan väl inte vara det, tänker jag. Och då säger jag det som kanske är lite nöjvt, men jag har ju befunnit min React-världen väldigt, väldigt länge.
00:26:35
Så jag har ju egentligen inte stött på komponentbibliotek i andra ramverk. Har du jobbat med det?
00:26:44
- Nej, när du säger det nu så tror jag inte det. Eller undrar om jag kanske använde något när jag satt i Vue för massa år sedan.
00:26:54
Men inget som jag kan referera till direkt.
00:26:59
- Vi blir ju lite nischade sådär va? Båda React-nerds.
00:27:07
- Det är ju verkligen lätt hänt.
00:27:09
Det kanske vi kan prata om i ett avsnitt och vara generalist eller specialist.
00:27:12
- Ja, det kan vi absolut göra.
00:27:16
- Jag tänker att det här avsnittet börjar dra sig mot sitt slut.
00:27:21
utan att ha stenkoll på tiden, men jag tror att vi är uppe i vår vanliga tid ungefär.
00:27:27
Har du något mer kul att tillägga om komponentbibliotek i ditt liv?
00:27:33
Nej, jag tänker att vi kan bara avsluta på att vi vet ingenting om det utanför React-världen
00:27:40
och så får vi återkomma helt enkelt.
00:27:43
Om någon har jämförelser så är det superintressant.
00:27:46
Om man har upplevt att det är superstora skillnader mellan View och Reacts komponentbibliotek
00:27:51
eller ännu längre ifrån varandra, även om det inte är View och React utan React och P&P.
00:27:57
Skicka gärna något till oss och berätta hur mycket som skiljer sig.
00:28:05
Med det sagt tackar vi för den här gången och hoppas att ni inte har det lika varmt som oss.
00:28:12
Vi finns som vanligt på Twitter, länkarna ligger i beskrivningen.
00:28:17
Och med det så säger vi hej då för den här gången!
00:28:21
- Hejdå! - Bye bye!
00:28:23
[Outromusik]
Tillbaka upp