Stödjande inspelningar

Kurslitteraturen är en av de delar som driver kursen framåt, men det kan vara svårt att själv strukturera upp innehållet. Vad är relevant? Vad ska vi fokusera på i kursen? De stödjande inspelningarna gör vi för att just ge detta sammanhang. Det är av yttersta vikt att du tar del av dessa!

Kursvecka 8 - Webbläsaren och Javascript

Webbläsaren och Javascript

Vi tittar på hur webbläsaren är uppbyggd och vad vi ska tänka på när vi länkar in javascript i webbläsaren.

1h 13m | Presentation

Varför Javascript i webbläsaren?

6m | Presentation

Introduktion till “Custom elements” och webbkomponenter

Kan vi bygga våra egna html element? Absolut! Vi tittar på hur.

19m | Presentation

Kursvecka 9 - HTML-element

HTML Element and the Document Object Model

1h 56m | Presentation

Snowpack nämns men är inaktuellt

Det nämns kort “Snowpack” i denna inspelning och den som är snabb kan få en skymt av tidigare års filstruktur. Bry er inte om detta utan fokusera på den filstruktur som presenteras i och med förra veckans övningsuppgift.

• Introduktion
• Document Object Model (DOM)
• Selecting Nodes (Legacy)
• Selecting Nodes (Selectors API)
• Traversing the DOM
• Manipulatation of the DOM
• Creating Nodes
• Working with attributes
• Separation of concerns
• Styling with Javascript
• HTML Templates

Kursvecka 10 - Webbkomponenter

Webbkomponenter - En introduktion till “Custom Elements”

20m | Presentation

• Templates as Strings in Javascript
• Custom Elements
• Custom Elements - Timing in loading
• Custom Elements - Naming

Webbkomponenter - Filstruktur

29m | Presentation

• Introduktion
• Vår valda filstruktur
• Relativa länkar i komponenter (import.meta.url och URL)
• Använda färdiga npm-moduler

Webbkomponenter - Skapa Custom Elements

1h 21m | Presentation

📕 Errata

Använd alltid gemener i attributnamn

När vi arbetar med attribut i webbkomponenter bör vi alltid använda oss av enbart gemener i attributnamnen. Gör alltså:

   static get observedAttributes () {
     return ['time', 'manywordsinattribute']
   }

och INTE

   static get observedAttributes () {
     return ['Time', 'manyWordsInAttribute']
   }

Detta eftersom webbläsaren kommer att göra om samtliga attribut till lowercase. Alltså kommer:

<my-component MittATTRIBUT="test">

göras om till mittattribut.

• Introduktion
• Hur skapar vi ett custom element
• Shadow DOM
• Webkomponenter
• Webbkomponentens livscykel
• En mall för en Webbkomponent
• Konstruktorn i ett custom element
• attributeChangedCallback
• Slot
• Named slots
• Stila custom elements
• Best practices
• Dokumentera webbkomponenter

Kursvecka 11 - Händelser

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)

Kursvecka 12 - Async/Await

JSON

32m | Presentation

• Introduktion
• RFC
• Formatet
• parse() och stringify()

Kommunikation från Webbläsaren

20m | Presentation

• Kommunikation i webbläsaren
• HTTP - Verb, metoder
• HTTP - Statuskoder
• HTTP - GET
• HTTP - POST
• Ajax

Asynkron programmering - Introduktion

15m | Presentation

• Introduktion
• Synkron programmering (blockerande kod)
• Asynkron programmering (Icke blockerande kod)
• Asynkront vs. Synkront

Asynkron programmering - Promises och Async/Await

42m | Presentation

Felhantering med fetch

Felhantering Det kan vara värt att nämna att fetch inte kastar undantag för annat än om servern inte kan nås etc. För att även kontrollera att vi fått ett godkänt resultat från servern rekommenderar vi att du lägger till en test för detta:

const res = await window.fetch(`http://tv-api.se/shows/?q=${str}`)
if (!res.ok) {
  const error = new Error('Fetch error')
  error.status = res.status
  throw error
}
const data = await res.json()

• Introduktion
• Arbeta med formulär i webbläsaren (Best practices)
• Fetch API (window.fetch)
• Fetch utan async/await
• Fetch med async/await
• Exempel: TV-seriesök
• Avslutning

Cross Origin Resource Charing (CORS)

5m | Presentation

• CORS
• Lösningar (CORS headers och Proxy)

Kursvecka 13 - Komposition

Komposition av komponenter

1h 8m | Presentation | Exempel - Todo Application

📕 Errata

Om bubbles och composed

I videon är vi lite förvirrade när det kommer till bubbles: true. Det är inte dåligt att sätta bubbles till true utan det kommer att innebära att händelsen bubblar upp i DOM:en men stannar när den når en ShadowRoot. Detta gör att komponenter som är in bäddade i en Shadow DOM inte kommer att skicka sina händelser utanför denna DOM. I exemplet är todo-items slottade in och således en del av den utanförliggande, vanliga DOMen och kan därför bubbla sina händelser så som vi vill. Det vi ska undvika är composed: true i våra komponenter då detta gör att händelsen kan vandra förbi en ShadowRoot.

    this.dispatchEvent(new window.CustomEvent('change', {
      detail: strikethrough,
      composed: false,
      bubbles: true
    }))

composed och bubbles har standardvärdet false

Var du bör koppla händelsehanterare

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.

Nyansering: undantag i komponenter

I videon nämns det att ni ska undvika att kasta undantag från komponenter. Jag vill omformulera detta till “Försök undvika att kasta undantag från komponenter”. Om det är nödvändigt, så som ex. om en fetch misslyckas kan det vara bra att kasta undantag så att yttre komponenter kan fånga upp detta och visa felmeddelanden till användaren eller försöka självläka applikationen.

• Introduktion
• Vad är en bra komponent Niklas?
• Komposition av komponenter
• Exempel - Todo application
• Designregler - Bubbling av event (se informationstext nedan)
• Nestling av komponenter
• Nestling av komponenter i normala DOMen
• Nestling av komponenter i shadow DOMen
• Designregler - Härma de inbyggda elementen
• Designregler - Konfigurering via attribut
• Designregler - Inkapsling
• Orkestrering - Kommunikation mellan komponenter
• Case study - Flygkalkylatorn
• Designregler - Fallera tyst
• Lyssnar på förändring med “slotchange”
• Avslutning

Kursvecka 14 - Lagring

Lagring i webbläsaren

1h 52m | Presentation

“Manifest” är inte aktuellt än

I slutet av inspelningen så nämner jag kort att “Manifest” inte är något vi ska använda. Jag tänke på en äldre teknik. Manifest kommer vi i allra högsta grad använda när vi senare tittar på progressiva webbapplikationer där detta är centralt.

• Inledning
• Synkrona APIer / Asynkrona APIer
• Async Patterns - Callback Pattern APIs
• Async Patterns - Promisifierade APIs
• Lagen om elektronisk kommunkation (cookielagen)
• Hur lagrar vi data i webbläsaren?
• Same Origin
• Cookies
• Web Storage API
• JSON vid lagring
• IndexDB
• Cachening
• Cache Storage API
• File System Access API
• Storage Manager API
• Utvecklarverktyget i webbläsaren för lagring

Kursvecka 15 - Installerbara PWAs

Webbapplikationer och introduktion till PWA

58m | Presentation

• Introduktion
• Single Page Application
• Offline First
• Applikationstyper
• Native Apps
• Hybridwebbapplikationer (Web)
• Hybridapplikationer (Desktop)
• Progressiva Webbapplikationer (PWA)
• Sammanfattning och jämförelse

Installerbara PWAs

1h 32m | Presentation

Snowpack nämns — vi använder vite

I inspelning refereras det kort till en äldre filstruktur med snowpack. I år har vi förenklat och din service worker lägger du helt enkelt i samma katalog som din index.html-fil. I de fall “snowpack” nämns så används i år istället “vite”.

• Introduktion
• Service Workers
• Service Workers - Möjligheter
• Service Workers - Krav
• Service Workers - Räckvidd (scope)
• Service Workers - Livscykel
• Service Workers - Livscykel - Steg 1 - Registrera en SW
• Service Workers - Livscykel - Steg 2 - Lyssna på händelser
• CacheStorage
• CacheStorage - Exempel - Cachning vid installation
• CacheStorage - Exempel - Cachning vid fetch
• CacheStorage - Exempel - Ta bort chachad data
• Service Workers i webbläsarens utvecklingsmiljö
• Installera PWAer som en applikation
• Webmanifest
• Demo - Installerbart Memory

Kursvecka 16 - Pålitliga PWAs

Pålitliga PWA-applikationer

1h 4m | Presentation

• Inledning
• Innehåll
• Routing
• window.location
• URL och searchParams
• Fragment identifier routing
• pushState
• Exempel
• popState
• onload
• Offline - Vilka problem behöver vi lösa?
• Online eller Offline?
• Klientsidebibliotek och ramverk

Lazy loading

19m | Presentation

• Inledning
• Strategier, Definition
• import() - Dynamiskt importera Javascriptmoduler

Kursvecka 17-19 - Kapabla PWAs

Kapabla PWAs

1h 7m | Presentation

Web Sockets API

12m | Presentation