Offline-first: een nieuw paradigma in web development

Door E-sites, E-sites
16 september 2014 - 3094 x bekeken - Categorieën: Tech

We zijn tegenwoordig beter en vaker verbonden met het internet dan ooit tevoren. Maar, we zijn niet altijd verbonden.

Zo klinkt de volgende situatie ongetwijfeld herkenbaar: je bent druk in de weer met je smartphone en zonder dat je er erg in hebt verdwijnt het Wi-Fi of 3G icoon in je status bar. Plotseling, zonder enige aankondiging, maakt een zinloze foutmelding korte metten met je online avontuur. En, met een beetje pech, daarmee ook die blogpost reactie waar je al een kwartier mee bezig was...of die foto upload die bijna compleet was. Frustratie alom.

Bovenstaand scenario klinkt ook mij helaas bekend in de oren. Het feit dat we regelmatig, zelfs in de meest moderne steden, geen of nauwelijks een internetverbinding hebben doet mij vermoeden dat deze kwestie, met betrekking tot connectiviteit en bandbreedte, zich niet zomaar vanzelf zal oplossen in de nabije toekomst.

Daarom werd ik, als front-end developer, erg enthousiast toen ik een tijd geleden kennis maakte met een relatief nieuw paradigma in web development, genaamd offline-first.

Offline is een onderdeel van ons leven

Voordat ik verder in ga op het offline-first fenomeen, eerst even wat cijfertjes. Want cijfertjes doen het altijd goed in blogposts.

Ook dit keer liegen de nummers er niet om. Statistieken van diverse grote onderzoekers gaven een aantal jaar geleden al aan dat de groep mobiele internetgebruikers groter zou worden dan de desktop gebruikers in het jaar 2014. Wat ons betreft een heus omslagpunt in de historie van het internet.

Kijkend naar deze grafiek (en het aantal automobilisten dat met hun mobieltje bezig is) kunnen we concluderen dat de gemiddelde internetgebruiker tegenwoordig niet altijd comfortabel achter zijn of haar desktop computer zit en over een dikke internetverbinding beschikt.

“Don’t make assumptions on anything beyond your user’s device”

Wat betreft het maken van veronderstellingen op dit gebied slaat de quote hierboven de spijker op z’n kop: doe geen aannames die verder gaan dan het device van de gebruiker. Hoe je het ook wendt of keert, offline is een onderdeel van ons leven.

De definitie van offline

Wat betekent offline eigenlijk? Het antwoord lijkt simpel. De meeste internetgebruikers zullen direct denken aan een scenario waar je niet verbonden bent met het internet.

In de context van offline-first ben ik van mening dat we de definitie van ‘offline’ enigszins moeten herzien. Het gaat er niet zo zeer om dat sites of apps volledig blijven functioneren wanneer er geen verbinding is...maar ook wanneer de verbinding traag reageert. Rekening houdend met dit laatste scenario zouden we de betekenis van ‘offline’ kunnen verbreden naar ‘er is geen goede verbinding’.

Want laten we eerlijk zijn, het aantal keer dat de gemiddelde 3G (of 4G) verbinding verandert in een Edge verbinding terwijl je onderweg bent, is behóórlijk. En dan heb ik het nog niet eens over het bereik tijdens drukbezochte feestjes of in ondergrondse metro’s.

De offline-first aanpak

De offline-first aanpak kan een oplossing bieden voor de hierboven genoemde scenario’s. Deze methodiek geeft offline gebruikers voorrang en leert ons dat de werking van een site of app niet afhankelijk zou moeten zijn van een internetverbinding. Met andere woorden, online wordt beschouwt als een feature.

Wat maakt een succesvolle offline-first site of app? Allereerst is het zaak dat je zoveel mogelijk logica in je front-end verwerkt, in plaats van op de server. Daarnaast is het van belang dat je ook de data lokaal opslaat en synchroniseert naar de server wanneer de situatie het toelaat. Gelukkig worden in-browser databases steeds beter ondersteund en zijn er diverse open-source oplossingen die dit proces kunnen vergemakkelijken, zoals derby.js, Lawnchair, Hoodie, Firebase, en remotestorage.io.

Met deze technologieën hoeven we offline niet meer te behandelen als een edge-case en kunnen we elegantere oplossingen bieden dan zinloze foutmeldingen, ontbrekende content of niet-werkende features.

Service Workers API

Een andere veelbelovende web technologie die bij gaat dragen aan offline-first apps is de Service Workers API. Een tijd geleden zag ik een presentatie van Jake Archibald (rechts op de foto hieronder) tijdens de Google Chome Dev Summit 2013. Op zijn eigen ludieke manier vertelde hij over deze nieuwe aankomende API voor web developers. Hij benadrukte dat het web enigszins een valse start heeft gehad wanneer het gaat over offline toegankelijkheid. Dit heeft alles te maken met de grillen van de ApplicationCache API. Gelukkig gaat deze nieuwe API daar verandering in brengen.

Met Service Workers kun je, op basis van events, je applicatie zo opzetten dat deze volledig offline kan functioneren. Via JavaScript kun je eenvoudig webpagina’s, stylesheets, of scripts cachen en deze weer serveren wanneer je bezoeker offline is. Precies wat AppCache ook doet, maar dan via een consistente API en met een hoop extra functionaliteit om een volwaardige offline applicatie te bouwen.

Voor een uitgebreidere uitleg van deze nieuwe API verwijs ik je graag door naar deze GitHub repo. Of, als je echt de nerd wil uithangen, de W3C spec.

Vergelijkbaar met mobile-first

Offline-first gaat hand in hand met mobile-first. Naast een taalkundige overeenkomst delen ze ook dezelfde achterliggende gedachte. Bij het ontwikkelen volgens de mobile-first methodiek start je met een simpele (wellicht lineaire) uitwerking van je website welke functioneert in alle browsers. In de wat meer moderne browsers worden met behulp van media queries stijlen toegepast voor desktop omgevingen met een groter beeldscherm. Met andere woorden, de mobiele gebruikers staan centraal en de lay-out en gebruikerservaring wordt hier ook op toegespitst.

Dus, Offline First is the new Mobile First. Of, als we het breder trekken:

Later toevoegen is geen optie

Dat offline functionaliteit een toegevoegde waarde heeft voor de gebruikerservaring (met name voor mobiele gebruikers) staat wat mij betreft als een paal boven water. Zoals de term al doet vermoeden is het echter geen feature die je zomaar even achteraf toevoegt aan een werkend product. Het heeft een behoorlijke impact op zowel de interface als de architectuur van je applicatie. Met andere woorden; als je wil voorkomen dat je een groot deel van je communicatie logica wil herschrijven dien je vanaf de eerste regel code al rekening te houden met de offline-first filosofie. Of eigenlijk nog eerder, tijdens het bepalen van het interaction design.

Indien je een web applicatie bouwt die voornamelijk in desktop browsers gebruikt zal worden is het waarschijnlijk niet nodig om een hoop tijd te besteden aan het implementeren van offline functionaliteit. En terecht. Op desktops kunnen we best aannemen dat er vrijwel altijd een (stabiele) internetverbinding beschikbaar is.

Conclusie

Samenvattend kunnen we concluderen dat een permanente verbinding met het web tegenwoordig niet meer realistisch is en we de zogenaamde ‘desktop mindset’ los moeten laten.

“We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.”

Nieuwe ontwikkelingen zoals de Service Worker API geven developers meer vrijheid en mogelijkheden om hier op te anticiperen en een prettige ervaring te bieden voor de gebruiker, in het bijzonder wanneer deze offline is. Offline technologie zorgt niet alleen voor sites die ook offline werken, het komt de performance en veiligheid ook ten goede. Denk bijvoorbeeld aan het minimaliseren van cookie gebruik, HTTP requests en file uploads. Daarnaast opent het ook nieuwe mogelijkheden op het gebied van user experience.

Waar mobile-first meer gericht is op schermafmetingen en pixel ratio’s gaat offline-first nog een stapje verder terug naar de essentie...de verbinding met het web.

 

 

Wij zoeken collega's!

Wil jij deel uitmaken van een bureau met een passie voor technologie? Kijk dan snel naar onze openstaande vacatures!

En last but not least.. de Apple Watch!

Door E-sites

En daar was dan eindelijk, het langverwachte horloge van Apple: de Apple Watch! - Lees meer

Lees verder