Översikt

Denna vecka lugnar du ner dig lite! Du samlar ihop dig, repeterar och fokuserar på hur komponenter kan samarbeta. Veckans tre artiklar introducerar ingen ny teknik, utan sätter ihop det du redan kan om webbkomponenter: vad som gör en komponent bra, hur en komponent byggs av andra och hur komponenterna kommunicerar utan att bli beroende av varandra. Information om veckans upplägg annonseras löpande i kursens Zulip-kanal.

2024-11-25 41:38

Vill du ändå se en gammal "Stå-upp"-vlogg med Mats & Mikael, inspelad under en tidigare kursomgång?

Veckans artiklar och exempel

Veckans teori finns samlad i tre artiklar. Läs dem i ordning; varje artikel bygger på den föregående. Mellan den andra och den tredje ser du de två sätten att bygga ihop komponenter sida vid sida, på samma komponent.

1. Bra komponenter – liten och med ett ansvar, att härma de inbyggda elementen med attribut, metoder och händelser, att hålla sig inom komponenten och att ta hand om fel.

2. Komponenter i komponenter – barn i light DOM via <slot> eller barn i shadow DOM, hur föräldern hittar sina barn och hur den märker att de ändras.

3. Exemplet Klickräknaren – komposition fortsätter där klickräknaren från kursvecka 11 slutade. I två steg, ett per tagg, hamnar <click-counter> i en <score-board>, först som innehåll i tavlans light DOM och sedan som delar i dess shadow DOM. Du ser hur tavlan hittar räknarna och hör deras händelser i de båda fallen, vem som registrerar dem, och varför tavlan bara kan summera poängen när den äger räknarna själv.

4. Kommunikation mellan komponenter – varför komponenter inte anropar varandra, hur föräldern orkestrerar sina barn och hur det ser ut i examinationsuppgift B2.

Läsanvisningar

Denna vecka introduceras ingen ny teori, utan veckan befäster snarare tidigare begrepp. Därav finns det inga direkta läsanvisningar.

Övningar

Under Övningsuppgifter hittar du övningsuppgifter som det är lämpligt att du arbetar med under veckan.

Utmaningar

Under Utmaningar hittar du sex frågor om hur komponenter byggs ihop och kommunicerar, ett bra sätt att stämma av att du har förstått artiklarna.

Äldre inspelningar

Inspelningen från 2021 tar upp samma stoff som artiklarna, men är delvis inaktuell. Bland annat används window.fetch(), händelsenamn i camelCase och bubbles: true på ett sätt som kursledningen själv blir osäker på. Artiklarna räcker, men vill du se genomgången i rörlig bild finns den kvar här. Sammanfattning och presentation till inspelningen hittar du i samlingen av inspelningar för delkurs B.

2021-11-23 1:08:11

Komposition av komponenter: vad som är en bra komponent, två sätt att nästla komponenter, designregler och kommunikation mellan komponenter. Motsvarar veckans tre artiklar.

Handledning

Skicka gärna in frågor på förhand via formuläret som du når här:

• Frågor inför öppen handledning

Examinationsuppgift B2

Fortsätt arbetet med examinationsuppgift B2. Den sista artikeln går igenom uppgiftens förslag på arkitektur.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din AI-assistent. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

1. Vad kännetecknar en bra komponent? Hur märker du att en komponent gör för mycket?
2. Vilka tre kanaler har en komponent för att ta emot och lämna ifrån sig data, och när använder du vilken? Varför ska en array inte skickas som JSON i ett attribut?
3. Varför är document.querySelector() ett varningstecken i en komponent, men inte document.createElement()?
4. Vad är skillnaden mellan att lägga barnen i light DOM och i shadow DOM? Hur avgör du vilket som passar?
5. När utlöses slotchange, och när utlöses den inte?
6. Varför ska två syskonkomponenter inte anropa varandra, och vem kopplar ihop dem i stället?
7. Varför kan ett fel som kastas i en komponents händelselyssnare inte fångas av den som använder komponenten?

Här är en utskrift från hur det såg ut när jag diskuterade ett par av frågorna med min AI-assistent Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Jobba på med B2. Se till att komma långt denna veckan, nästa vecka är leverans.
2. Läs veckans tre artiklar. Den sista går igenom B2:s förslag på arkitektur, och kan hjälpa dig att strukturera din kod.
3. Gör övningsuppgiften YouTube Player. Den är byggd som en liten version av B2: en förälder som orkestrerar två barn som inte känner till varandra.