Vanilla js
Skrevet av Pål Strøm -
Verden går fremover. Og av den grunn begynner verktøy som jQuery å utspille sin rolle. jQuery hadde en enorm gevinst for 4 år siden, da ingen nettlesere klarte å bli enig om hvordan man skulle løse problemer. I dag er derimot de fleste på lag, og det gjør at vi ikke trenger å tenke på cross-browser-støtte i like stor grad. Derfor har vi begynt å utforske en hverdag uten jQuery. Og her er 7 ting vi har lært:
1: Det er utrolig enkelt å komme i gang.
Det finnes utrolig mange ressurser der ute for å hjelpe folk i overgangsfasen fra jQuery til vanilla js. En av sidene jeg har hatt oppe i browseren til en hver tid den siste tiden er youmightnotneedjquery, hvor de lister ut de vanligste grunnene til å bruke jQuery og så viser de hvordan man gjør det uten jQuery. De har også linker til et par små bibliotek om man synes det blir for mye stress å skrive ned funksjonene selv. Dette er for typ ajax og animasjoner, bl.a., som fortsatt kan være litt verbose å gjøre i vanilla js.
2: Flere og flere får øyene opp for vanilla js
Over her ser du hvor mange spørsmål som ble stilt på StackOverflow med jQuery som tag, mot antall spørsmål med javascript som tag. Nå kan det være flere grunner til at jQuery har flatet ut og javascript fortsetter oppover. Den mest nærliggende grunnen er nok at jQuery har forenklet biblioteket sitt, som fører til færre spørsmål, mens javascript fortsetter å bli utvidet med ECMAscript-spesifikasjonen. Men det er ikke vanskelig å se for seg at dette også er en trend. (En liten notis på utregning for 2016, her har jeg rett og slett tatt antall spørsmål så langt i år og ekstrapolert ut året.)
3: De fleste polyfillene vi brukte har blitt overflødig
jQuery er nå én ting, men vi har også inkludert en del polyfills (polyfill er en måte å tolke kode for alle nettlesere. Tenk på det som en tolk som spør hver enkelt nettleser som er innom nettsiden om de skjønner følgende kode. Om de ikke skjønner det, så er det en polyfill sin oppgave å oversette dette til kode som nettleseren forstår.) for å fikse problemer med gamle browsere vi rett og slett ikke trenger lengre. En av de vi har hold på lenge er polyfill for requestAnimationFrame, som nå er støttet i alle moderne browsere (IE 10 og opp). Et annet bibliotek er FastClick, laget av FT Labs for å fjerne forsinkelsen på touch-enheter på 300ms. Men nå er har alle mobile nettlesere fjernet denne, og i de fleste andre tilfeller er det måter å komme seg rundt det på uten bruk av javascript. Som de snakket om i en nylig episode av Shop Talk Show, burde vi nå hatt en tjeneste på linje med caniuse, som heter canidropit, hvor man kan sjekke om en polyfill man bruker kan droppes.
4: Det er en helt ny bataljon med polyfills man trenger
Med utvidelsen av funksjoner tilgjengelig, og det konstante arbeidet med ECMAscript blir det mer og mer nødvendig med andre polyfills. Et par av funksjonene jeg har blitt glad i er Element.closest() og Element.replaceWith(). Her har ikke IE-teamet klart å få ut fingeren enda, så her trenger man polyfill. Den jeg har endt opp med å inkludere i de fleste prosjektene nå er dom4. Nå kan man jo spørre om ikke det er det samme som å bruke jQuery, og det kan i første omgang se litt sånn ut. Men forskjellen er at med polyfills kan man skrive vanilla js som om alle browserne i verden var oppdatert, også tar polyfillene seg av å dra de litt trege browserne med seg. Man ender også opp med et par selvskrevne hjelpere, bare for å gjøre ting litt lettere i hverdagen:
var _s = function(selector, context) {
var d = context || document;
return Array.apply(null, d.querySelectorAll(selector));
};
Denne gjør at man kan behandle en NodeList som en Array, altså gjøre ting som: _s('img').forEach(function(img){})
5: Javascript er sykt kjapt Nå skal jeg ikke si at jeg personlig merker forskjellen på jQuery vs non-jQuery. I en blindtest hadde jeg nok gjort det dårlig. Men koden kjører utvilsomt mye raskere i ren javascript. For litt visuell overbevisning, er det bare å ta en tur til Google Images.
6: Det føles oh-so-right
Det er noe med det å komme seg ned på grunnivå og skrive ren kode. Det er som å ta tak i håndverket sitt og bli forelsket på nytt i alt det som førte oss inn i denne gale, gale verden til å begynne med. Det gir også en ny forståelse for hva man egentlig holder på med. Man blir mer interessert i å finne rett måte å skrive koden på. Hva er egentlig raskere av for (var i = 0, len = arr.lenght; i < len; i++) og for (var i = arr.length; i--;)? Og dette gjør at punkt 5 blir enda tydeligere også.
7: Å gå for vanilla js har også åpnet øyene våre for hva mer som er mulig med javascript
Det å droppe jQuery gjorde at vi begynte å se på hva som beveget seg der ute i javascript-verden på en ny måte. Det gjør at vi plutselig innså at history API er helt kosher å bruke. Så nå er dette helt standard operating procedure:
document.addEventListener('click', function(e) {
var that = e.target.closest('a');
if (that) {
var url = that.href;
if (isExternalUrl(url)) { return; }
history.pushState(url, null, url);
loadContent(url);
}
});