Översikt

Förra veckan var en intensiv vecka med examinationer och webbkomponenter. Ingen rast, ingen ro. Denna vecka tar vi oss an en mycket viktig del när det kommer till programmering i javascript, händelsestyrd programmering!

“Stand up”-vlogg

Förra årets vlogg för den som vill få en extra introduktion till veckan.

Stödjande inspelningar

Samtidighetsmodellen och eventdriven programmering

1h 43m | Presentation

• Introduktion
• Samtidighetsmodellen
• Stack och heap
• Händelsekön (The Task Queue)
• Timers och Interval
• Händelsestyrd programmering
• Webbläsarens inbyggda händelser (Event)
• Antipattern: onclick=“”
• Lyssna på händelser (addEventListener)
• Exempel, vi fryster webbläsaren
• Ta bort händelsehanterare (removeEventListener)
• Händelser som utlöses en gång (option: once)
• Vad utlöste händelsen? (this, event.target)
• Closures
• Delegat (Event delegation)
• Stoppa det förvalda beteendet. (event.preventDefault)
• Propagation (capture, bubble)
• Web Worker API
• Avslutning

Webbkomponenter - Händelser

30m | Presentation

Använd alltid AbortController

TA ALLTID BORT HÄNDELSEHANTERARE I disconnectedCallback. ENKELT MED AbortController. NU FINNS DET INGA URSÄKTER LÄNGRE! Läs artikeln Event Listener Management in Web Components och framför allt det som står under rubriken “Using AbortController”.

📕 Errata

Använd alltid gemener i händelsenamn

När vi arbetar med namn på händelser som vi skapar själva (custom events) så ska vi alltid sträva efter att namnge händelserna med gemener. Gör alltså:

   this.dispatchEvent(new window.CustomEvent('timeisup'))

och INTE

  this.dispatchEvent(new window.CustomEvent('timeIsUp'))

Historiskt resonemang, se nedan

En fråga som ofta förekommer är, var ska vi koppla våra händelsehanterare? I connectedCallback eller i konstruktorn. Som vanligt är beskedet. Det beror på.Händelsehanterare som sätts på element som är i vår shadowDOM sätter vi lämpligast i konstruktorn. Sätter vi händelsehanterare på något som är utanför vår shadowDOM så bör vi sätta dessa i connectedCallback vilket också innebär att vi i dessa fall behöver ta bort händelsehanterarna i disconnectedCallback.En bra genomgång kring detta ges som svar på följande fråga på Stack Overflow.

• Inledning
• Webbkomponentens livscykel
• connectedCallback
• disconnectedCallback
• Utlösa egna händelser (synthetic events)

Läsanvisningar

Under läsanvisningar hittar du veckans kapitel som ska läsas i kurslitteraturen. Planera upp och dela upp läsningen under veckan. Denna vecka har vi kryddat med två externa föreläsningar!

Övningar

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

PS. Övningsuppgiften innehåller en inspelad diskussion kring lösningen av övningsuppgiften. Missa inte att titta på den.

Handledning

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

• Frågor inför handledning

Examinationsuppgift B1

Dags för kursens andra quiz-baserade examinationsuppgift. Läs mer om examinationsuppgift B1 här.

Examinationsuppgift B2

Även om vi har en veckans teori kvar innan vi kan ge oss an examinationsuppgift B2, kan det redan nu vara bra att läsa igenom uppgiften så att du vet vad som komma skall.

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. Hur kan man tänka kring webbkomponenter och event?
2. Jag ser att du skapade eventhanterare i din konstruktor, är det best practice att göra så, eller bör man göra annorlunda?
3. Berätta hur det fungerar med attribut kopplade till webbkomponenter.
4. Vad innebär slot i kombination med webbkomponenter?
5. När man stylar en webbkomponent, är det bra att använda :host eller bör man göra annorlunda?

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor 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. Titta igenom de båda föreläsningarna. Fokusera på hur event fungerar i webbkomponent.
2. Om du har glömt vissa saker så kan du behöva gå tillbaka och fräscha upp din kunskap om vad som sades om webbkomponenter föregående veckor.
3. Fokusera på webbkomponenter och att försöka koda ihop din egna webbkomponent där du kan prova de centrala delarna som diskuteras i föreläsningar och övningar. Gör detta och det förbereder dig inför assignment B2.
4. Missa inte att titta på den inspelade föreläsningen som visar ett förslag på facit till veckans övningsuppgift. Du får se diskussion om webbkomponentens olika delar.