Af Michell Cronberg, Alt om Data
Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.
Mange små virksomheder holder sig tilbage fra selv at udvikle hele eller dele af deres website. Det skyldes ofte mangel på viden om, hvad der er det rigtige at gøre – og så selvfølgelig den hurtige udvikling på området.
Webudvikling har da også bevæget sig fra at være simple statiske sider, der kunne ses i en browser, til moderne dynamiske applikationer, som afvikles i mange forskellige typer af klienter.
Denne lille serie på to artikler er henvendt til personer, som ikke har den store viden og erfaring med webudvikling, og som mangler et overblik over begreber og teknologier. I denne artikel ser vi på de grundlæggende elementer, og den næste artikel handler om udvikling af applikationer.
Hvor det hele begyndte
Det, vi i dag kender som internettet, kan i virkeligheden ses som to forskellige ting. I perioden 1960 til 1980 blev der oprettet mange forskellige typer af netværk fokuseret på uddannelse, forskning og militær. Begreber som eksempelvis elektroniske beskeder og filoverførsel er baseret på protokoller fra 1970’erne, og den underliggende netværksprotokol (TCP/IP) blev født omkring 1975. Det var også i den forbindelse ordet ”internet” blev født.
Men det, vi i dag kender som internettet, blev først født, da den engelske udvikler Tim Berners-Lee blev ansat på CERN i årene omkring 1990. Det var Berners-Lee, der sammen med et hold af kollegaer – herunder danske Henrik Frystyk Nielsen og norske Håkon Wium Lie – specificerede HTTP (netværksprotokol), HTML (opmærkningssprog) og URL (adresseprotokol), og som samtidig skabte de første versioner af det, vi nu kalder en webserver og en browser. Hele denne samling af teknologier blev benævnt World Wide Web – hvilket forklarer, hvorfor de fleste websites har et subdomæne kaldet www.
I 1994 valgte Tim Berners-Lee i samarbejde med CERN og MIT at stifte standardiseringsinstituttet W3C og flytte samtlige protokoller og standarder. Tim Berners-Lee er fortsat i dag tilknyttet W3C som bestyrelsesformand, og W3C er vokset støt og holder i dag styr på en stor mængde forskellige standarder.
W3C er vigtig for webudvikling, fordi de fleste virksomheder med fokus på internettet er medlemmer og arbejder sammen omkring både udvidelser og nye teknologier. Det er dog ikke det eneste sted, hvor der arbejdes på webstandarder. I 2004 blev WHATWG (Web Hypertext Application Technology Working Group) stiftet af Apple, Opera og Mozilla, fordi de var uenige i den retning, W3C skubbede HTML, og de skabte derfor deres egne standarder. W3C og WHATWG er senere blevet mere enige om fremtiden for internettet og har i dag et åbent samarbejde og udveksling af standarder omkring især HTML og DOM (JavaScript API mod browseren).
Det endte med browserkrig
Nogenlunde samtidig med stiftelsen af W3C (et par år efter at vi vandt EM i fodbold i 1992) startede en krig mellem producenter af browsere. Fronterne bestod af den norske Opera, Netscape Navigator og Internet Explorer. Især de to sidstnævnte, som var drevet frem af Sun og Microsoft, kæmpede hårdt om herredømmet, men på trods af store retssager omkring Microsofts monopolistiske opførsel på markedet overlevede kun Internet Explorer og Opera. Resten fra Netscape Navigator blev samlet op af tidligere medarbejdere, som stiftede Mozilla Corporation og skabte browseren Firefox.
I dag findes der især fire browsere, som anses for vigtige i webudvikling. Microsofts Edge, Apples Safari, Mozillas Firefox og Googles Chrome. Samtlige fire browsere benyttes på både desktop og mobile platforme. Chrome er klart den største browser med en brugermasse på op til 60-70 procent i visse lande. De resterende tre deler resterne imellem sig. Alle moderne browsere er selvopdaterende og supporterer dermed automatisk nye standarder.
Kun officielle overlever
I dag retter alle browsere typisk ind efter W3C og WHATWG, og alle teknologier, som ikke er standardiserede, dør af sig selv, fordi brugerne ikke vil være afhængige af et konkret plugin, som kan fjernes med et pennestrøg af browserproducenterne. Tænk på teknologier i browsere som Java Applets, Flash, Silverlight med flere, som alle er væk i dag. Hvis en teknologi ikke er en officiel standard, vil den ikke overleve – hvilket igen understreger betydningen af en fælles standard og dermed W3C og WHATWG.
HTML
Allerede i 1960’erne var hypertext en teknologi, som gjorde det muligt at markere elementer af tekst i et dokument – både til formatering og til links til andre dokumenter. Især amerikanske Ted Nelson var frontløber med flere projekter, og Tim Bernes-Lee lod sig inspirere af disse ideer og skabte i sin tid på CERN en ny standard, han kaldte HyperText Markup Language (HTML).
Med denne kunne man opdele tekst i overskrifter, paragraffer og links samt tilføje begrænset formatering. Denne standard kom med i W3C/WHATWG, hvor den vedligeholdes og er i skrivende stund frigivet i version 5.2.
Med HTML er det i dag muligt at opbygge et dokument bestående af et prædefineret træ af opmærkninger som <p /> (paragraf, afsnit), <h1 /> (overskrift), <img /> (billede) – og mange andre – for på den måde at skabe indholdet på en internetside. Der er ingen muligheder for at designe udseendet af en side med HTML – det handler udelukkende om indhold. Alt design håndteres af en anden standard kaldet CSS.
Basis-koder i HTML
HTML består af opmærkninger med attributter og eventuelt indhold.
En simpel HTML-struktur – en overskrift og noget indhold, der også er et link.
Design med CSS
Det gik hurtigt op for holdet af folk, som arbejdede med World Wide Web, at der manglede en teknologi til at repræsentere designet, og førnævnte Håkon Wium Lie fik ansvaret. Det blev til CSS (Cascading Style Sheets), der som HTML er opmærkningsbaseret og ligeledes styret af W3C.
I CSS defineres elementer bestående af en søgestreng (kaldet en selector), som finder de HTML-objekter, der skal påvirkes, samt en samling egenskaber, der beskriver designet (farve, placering, størrelse med videre).
CSS har udviklet sig fra frigivelse af versioner med mange tilføjelser og ændringer til frigivelse i små specifikke moduler. På den måde kan nye ideer hurtigere blive standardiseret. Der er dog en tendens til, at nye features bliver implementeret hurtigere i browserne, end de når igennem standardiseringsprocessen. Det kan give lidt udfordringer, og de fleste udviklere kender derfor til sites som caniuse.com, der tilbyder en database over, hvilke features der er supporteret i hvilke browsere.
CSS har udviklet sig fra at bestå af meget simple designrelaterede egenskaber til i dag at kunne tilbyde eksempelvis komplekse animationer og dynamik relateret til størrelse eller opløsning. Sidstnævnte bruges i forbindelse med ”responsive design”, der gør det muligt at skabe design til både desktop og mobil med udgangspunkt i den samme HTML. Yderligere er variabler og funktioner tilføjet for nylig for at give endnu flere muligheder for dynamik.
Legendarisk video
På YouTube findes en ikonisk video fra en præsentation afholdt i december 1968 – videoen kaldes ”The mother of all demos”. I grynet kvalitet demonstrerer musens opfinder, Douglas Engelbart fra Stanford Research Institute i Californien, hvordan man kan styre en computer. Det sker blandt andet med en tidlig version af Hypertext (tekster med links til andre ressourcer). Se videoen her: https://www.youtube.com/watch?v=yJDv-zdhzMY.
CSS-frameworks
Inden for de sidste par år er store open source-CSS-frameworks blevet meget populære, fordi de tilbyder et godt udgangspunkt for design af knapper, lister, tekster, bokse og meget mere.
Især frameworks som Bootstrap, Tailwind, Materialize og Semantic UI er brugt til tusindvis af websites og kan skære mange timer af designprocessen. Selv udviklere med designevner på niveau med en abe (som forfatteren til denne artikel) kan få et site til at se nogenlunde pænt ud i løbet af meget kort tid.
Allerede i midten af 1990’erne, hvor de første browsere kom frem, så man fordelene ved at lade browseren afvikle kode for på den måde at skabe dynamik på klienten uden at påvirke serveren.
De første versioner af Internet Explorer havde både en objektmodel, som gjorde det muligt at påvirke HTML-elementer, og et scriptsprog kaldet VBScript. Med de to komponenter var det muligt at skrive kode som eksempelvis ændrede en overskrift, hvis brugeren klikkede på en knap.
Netscape ansatte den amerikanske udvikler Brendan Eich til at udvikle et scriptsprog til deres browsere, og han producerede relativt hurtigt (historien siger på tre uger) et sprog baseret på hans kendskab til sprog som C, Scheme (funktionsorienteret) og Self (objektorienteret). Sproget kaldte han Mocca og efterfølgende LiveScript, men Netscape valgte til sidst navnet JavaScript.
JavaScript blev efterfølgende standardiseret hos ECMA (nu Ecma International) og kaldes derfor EcmaScript. De fleste udviklere omtaler derfor ikke sproget som JavaScript, men som ES, og de forskellige browsere har hver sin support for konkrete versioner af ES. I skrivende stund er den sidste nye version ES 2020, og der frigives en ny version hvert år.
De API’er (Application Programming Interface, der bruges til at koble forskellige programmer sammen), som browseren stiller til rådighed for scriptsprog, er ligeledes standardiserede af W3C – herunder DOM (Document Object Model) som repræsenterer HTML- og CSS-elementer, men også mange flere. Der er eksempelvis frigivet API’er relateret til tale, geografi, threading, lokalt lager og mange flere.
CSS består af en samling elementer opdelt i søgestrenge og egenskaber.
WebAssembly er en ny teknologi, som gør det muligt at levere prækompileret kode direkte til browseren.
WebAssembly er nyt
Der har gennem tiden været mange forskellige forsøg på at gøre en webside dynamisk med andet end ES, men de er alle sammen forsvundet ud i glemslen, fordi de ikke har været standardiserede og accepterede af alle producenter af browsere. Så i praksis er ES den eneste reelle mulighed for at skrive kode til afvikling i samtlige browsere.
Der er imidlertid dukket en ny og spændende mulighed op inden for de sidste par år kaldet WebAssembly (forkortet WASM), som er standardiseret hos W3C. Den giver mulighed for at afvikle bytekode (en form for mellemkode) direkte i browseren og på den måde springe forskellige led over i kompileringsprocessen fra JavaScript til afvikling. Det betyder, at afvikling kan blive hurtigere, men måske endnu vigtigere: At eksisterende kodebaser i eksempelvis C++ eller andre ”rigtige” programmeringssprog kan transpileres til WASM og dermed benyttes direkte i browseren.
Fremtidens webudvikling
Det giver nogle ret svimlende fremtidsudsigter, og er måske næste skridt i moderne webudvikling. Vi har allerede set flere projekter, som viser, hvad WASM kan bruges til. Microsoft har blandt andet transpileret en del af sin .NET-runtime til WASM for på den måde at kunne afvikle IL-kode (som kan transpileres fra eksempelvis C#), og der findes et projekt relateret til en WASM-version af SQLite (verdens mest benyttede database), således at SQLite kan bruges direkte i browseren fra ES.
Begge projekter er ret overvældende i sig selv, men der arbejdes på mange flere. Måske ser vi snart en WASM-version af de store spil-frameworks, og det vil gøre fremtidens spil ægte cross-platform, fordi de så blot kræver en standardiseret browser.