Vi skal snart fortsette på å lage Multiple Choice, men vi kom bare halvveis på hvordan nettleseren fungerer, det ble litt mye om nettverk og sånt. Så nå som vi har nettverk på plass, og har sett litt på multimedia også så er vi klare for grave dypere i selve nettleseren.
Før vi begynner - de kode eksemplene vi på i starten var veldig enkle. Det vi leverer til kundene våre er jo noen hakk mer komplisert, men det finnes mye mer komplekse og avanserte nettbaserte ting. Nettleseren og web teknologi kan håndtere nesten hva som helst. Programvare som tidligere måtte lastes ned og installeres kan nå ofte kjøres direkte i nettleseren. F.eks Microsoft Office, Adobe Photoshop, Figma og kodeeditoren Visual Studio Code er bare noen få av mange eksempler.
VS Code er bygget med web teknologi og for å kjøre den som en skrivebords app så pakkes det inn i en nettleser ved hjelp av rammeverket Electron . Koden for VS Code er tilgjengelig på GitHub og er skrevet i TypeScript. Microsoft utvikler dette produktet som et åpent kildekode prosjekt og alle som vil kan bidra til utviklingen. VS Code bygger igjen på Monaco som er selve editoren. Det er også mange andre tjenester som enten bygger på Monaco eller VS Code. GitHub Codespaces er en tjeneste som lar deg kjøre VS Code direkte i nettleseren.
Men tilbake til nettleseren. I tillegg til å håndtere knapper og sende og motta nettverksdata og en god del andre ting så er det to "motorer" i en nettleser, det er motoren som tolker HTML og CSS og det er motoren som tolker JavaScript. Blink, Gecko og WebKit er de tre mest kjente HTML og CSS motorene. Blink er utviklet av Google og brukes i Chrome og Chromium baserte nettlesere som Microsoft Edge. Gecko er utviklet av Mozilla og brukes i Firefox. WebKit er utviklet av Apple og brukes i Safari. V8, JavaScriptCore og SpiderMonkey er de mest kjente JavaScript motorene. V8 er utviklet av Google og brukes i Chrome og Edge. V8 brukes også som js motor i Node som er et verktøy for å bruke JS utenfor nettleseren, f.eks som server i backend. JavaScriptCore utvikles av Apple og brukes i Safari men det brukes også i Bun som er et alternativ til Node og Deno. SpiderMonkey er utviklet av Mozilla og brukes i Firefox.
Nettleseren leser inn HTML dokumentet og bygger opp en slags tre struktur fra dokumentet. Denne strukturen kaller vi DOM - Document Object Model. Tilsvarende bygger den også opp en struktur for CSS som vi kaller CSSOM - CSS Object Model. Så kombinerer nettleseren disse to strukturene til en nytt "tre" som den kan bruke for å tegne opp siden basert på alle de ulike nodene i treet.
Nettleseren må også gå gjennom DOM og CSSOM for å finne hvilke flere filer den må laste ned, f.eks bilder, skrifttyper, osv. Og så setter den sammen alt dette til en side som vi kan se og interagere med.
Og så har vi JavaScript som kan endre på disse strukturene slik at dette blir dynamisk og interaktivt.
Håper du har fått litt mer innblikk i nettleseren og hvordan den fungerer.