WORDS
Navigera i webbdjungeln: Webbspråk
När man gör webbplatser måste man använda dom programmeringsspråk som stöds på webben, och det är inte så många: en webbsida måste skicka Javascript, HTML och CSS till webbläsaren, och här finns det knappast några alternativ. Men, säger du, jag har hört talas om Typescript! Jo, vi kommer till det.
Javascript
Synonym: ECMAScript1. Förkortas JS eller ES.
Javascript är det enda Turingkompletta språk som stöds i webbläsaren2. Beroende på hur ny webbläsaren är, så kanske inte den senaste utgåvan av ECMAScript stöds.
Med "gammal Javascript" brukar man mena ECMAScript 5 (ES5). Modern Javascript innefattar ES2015 (synonym: ES6), ES2016, ES2017, ES2018 osv. Det kommer en ny upplaga varje år.
För att kunna använda splitterny Javascript, eller helt andra språk såsom Typescript, så måste dessa kompileras till en Javascript-version som stöds. Ett syntaxtillägg som särskilt används tillsammans med ramverket React heter JSX.
Det finns en delmängd av Javascript kallad "asm.js", som kan köras riktigt snabbt av webbläsaren. Det blir som en textbaserad "bytekod", som automatiskt stöds av alla webbläsare.
| Språk | Kompilator3 | Filnamn |
|---|---|---|
| Gammal Javascript (ES5) | Ingen4 | .js |
| Modern Javascript (ES6+ = ES2015+) | Babel | .js |
| Modern Javascript med JSX | Babel | .jsx |
| Typescript (TS) | tsc5 |
.ts |
| Typescript med JSX | tsc5 |
.tsx |
| asm.js | Ingen4 | .js |
HTML
"HTML5" har döpts om till bara "HTML" utan versionsnummer.
HTML är ett märkspråk (eng. markup language), och används för att beskriva innehållet på en webbsida. Också "gamla webbläsare" stödjer syntaxen fullt ut, så där finns ingen anledning att kompilera något nyare. Små justeringar och tillägg görs, men då handlar det om nya element och attribut eller hur man manipulerar dom.
Två andra märkspråk, SVG och MathML, kan bäddas in i HTML sömlöst.
Olika ramverk använder HTML på olika sätt, och tillhandahåller ibland en egen kompilator för sin särskilda syntax. Här listas några ramverk som gör på ganska olika sätt.
| Ramverk | Kompilatorer | Filnamn |
|---|---|---|
| React | Babel, tsc (TS-kompilatorn) |
.jsx, .tsx |
| Angular | Angular CLI, via annat byggverktyg | .html |
| Vue | Via byggverktyg, ingen6 | .html, .vue |
CSS
CSS beskriver hur en webbsida ska se ut, allt från färg och form till layout on enklare animationer.
När ny syntax standardiseras, kan det ta flera år innan webbläsarna börjar stödja den. Om den nya syntaxen automatiskt kan konverteras till gammal CSS, så kan man använda en kompilator.
Om man däremot vill ha funktioner som aldrig kommer standardiseras i CSS, exempelvis loopar, så får man använda sig av ett språk som kan kompileras till CSS, såsom Less eller Sass.
| Språk | Kompilator | Filnamn |
|---|---|---|
| Gammal CSS | Ingen4 | .css |
| Modern CSS | PostCSS | .css |
| Sass | LibSass, Ruby Sass | .scss |
| Less | Finns många | .less |
JSON
Det finns många format för att serialisera data, men det i särklass vanligaste på webben är JSON. Anledningarna är att det är flexibelt, minimalt och har bra webbläsarstöd.
Här är några andra språk som man kan stöta på under webbutveckling, och var dom används. Samma information som kan representeras i JSON kan representeras i alla dom andra formaten.
| Språk | Var det används |
|---|---|
| JSON | Ajax, konfig, lagring etc. |
| JSON med kommentarer | Många konfigurationsfiler |
| XML | Vissa konfigurationsfiler |
| Yaml | Vissa konfigurationsfiler |
| Toml | Enstaka konfigurationsfiler7 |
WebAssembly
Synonym: Wasm.
WebAssembly är en binär bytekod som inte stöds av alla webbläsare idag, men som är på stark frammarsch. Den skrivs inte för hand utan kan kompileras till, från språk som Rust, Go, C++ och C.
Kompilering och source maps
Eftersom man på webben ofta kompilerar från ett textuellt språk till ett annat (från TS, JS, CSS, Sass, Less till JS, CSS), så finns ett behov av att kunna se originalkoden vid debuggning. Source maps (filändelse: .map) används för att webbläsaren ska kunna visa originalkoden i stack traces och dylikt. Source maps stöds för språk som kompilerar till Javascript, CSS och WebAssembly.
- Organisationen som publicerar standarden för Javascript heter ECMA. ↩
- Förutom WebAssembly, vilket vi kommer till. ↩
- För Javascript → Javascript kallas detta ibland för "transpilator". ↩
- Webbläsaren har förstås en inbyggd kompilator, men du som programmerare behöver inte kompilera din kod manuellt. ↩
- Också Babel stödjer kompilering av Typescript - men utan typkontroll. ↩
- I Vue kan man välja att inte kompilera sin kod i förväg, utan skicka med kompilatorn till klienten. ↩
- Toml håller på att bli lite vanligare, och kanske kan ersätta Yaml i många fall i framtiden. ↩