Dev Summit 2024: Vergeet mobile first & content first, het gaat om offline first

Met meer dan 25 jaar ervaring in HTML, CSS en JavaScript, heeft Rowdy Rabouw een indrukwekkend portfolio opgebouwd. Met zijn talk ‘Offline First!’ op de Tweakers Dev Summit 2024 - op 4 december in DeFabrique te Utrecht - wil hij developers inspireren om hun websites en applicaties beter aan te passen aan de realiteit van gebruikers. Vooral wanneer die onder minder ideale omstandigheden opereren.

Rowdy is een ervaren webontwikkelaar, senior devops engineer, en Google Developer Expert in Web Technologies. Daarnaast is hij voormalig developer expert voor NativeScript en een internationaal spreker op technische conferenties. Op dit moment werkt Rowdy als senior devops engineer met een sterke focus op frontend technologieën bij de Nederlandse verzekeraar Nationale-Nederlanden. Hier werkt hij aan projecten met Vue.js, Node.js en NestJS. Momenteel werkt hij aan een redesign van het pensioenportaal. "Mijn frontend-hart gaat daar sneller van kloppen", zegt hij. Zijn focus ligt op gebruiksvriendelijkheid en toegankelijkheid. "We doen veel usability-tests en accessibility-checks om te zorgen dat wat wij bedenken ook aansluit bij wat gebruikers echt willen."

Rowdy combineert zijn werk bij Nationale-Nederlanden - waar hij een werkweek van 32 uur heeft - met zijn eigen bedrijf en diverse andere projecten. "Het varieert", legt hij uit. "Soms werk ik een week helemaal niet aan mijn eigen bedrijf, en soms ben ik avonden en weekenden bezig. Mijn laptop is eigenlijk aan me vergroeid." Via zijn eigen bedrijf werkt hij voor kleine en middelgrote organisaties; van het bouwen van een toegankelijke website tot het verzorgen van hosting, domeinnamen en support. "Ik heb van alles gemaakt, van digitale visitekaartjes tot complexe applicaties." Zo ontwikkelde hij bijvoorbeeld tools voor leveranciers van Leenbakker, en webapplicaties met ingebouwde quickscans om te bepalen of klanten recht hadden op subsidies. "Die afwisseling maakt het interessant." Ten slotte is Rowdy ook Google Developer Expert in Web Technologies, een titel die hij beschrijft als een 'badge of honor'.

Bij Nationale-Nederlanden maakt Rowdy's afdeling gebruik van Vue.js als framework, en werkt hij met technologieën zoals Node.js, Nest.js en Kubernetes in een AWS-omgeving. "We draaien alles in containers, zodat we makkelijk kunnen op- en afschalen. Maar in een groot bedrijf gaat dat type innovatie vaak wat trager, vanwege de vele schijven die moeten worden doorlopen." Voor Rowdy zijn tools zoals GitHub Copilot een waardevolle aanvulling. Lachend: "In VS Code helpt Copilot me vaak met het afmaken van zinnen. Het voelt alsof je iemand hebt die je goed kent en precies weet wat je bedoelt. Maar de hele AI-hype? Dat loopt soms een beetje uit de hand."

Service workers als oplossing

Zijn talk op de Tweakers Dev Summit 2024 is getiteld 'Offline First!'. En met een reden. "Vergeet Mobile First, vergeet Content First. Laten we Offline First gaan denken." Rowdy legt uit waarom hij voor dit onderwerp koos. "Het irriteerde me altijd als ik op een conferentie slecht internet had en niet kon zien waar de volgende sessie was. Je krijgt een wit scherm of een foutmelding, en dan sta je daar." Hij besloot te onderzoeken hoe websites en applicaties beter kunnen functioneren in omstandigheden met slecht of geen internet.

De kern van Rowdy’s oplossing is simpel: gebruikmaken van service workers. "Het is niets nieuws; het zit standaard al in browsers. Het wordt alleen te weinig gebruikt." Een service worker kan ervoor zorgen dat basisinformatie van een website toegankelijk blijft, zelfs zonder internetverbinding. Rowdy merkt op dat veel developers er weinig mee doen. "Wanneer ik op evenementen vraag wie er bekend is met service workers, steekt doorgaans slechts 30 tot 40 procent een hand op. Van die groep heeft slechts een klein aantal er daadwerkelijk ervaring mee."

Tijdens zijn talk laat hij zien hoe je klein kunt beginnen. "Je hoeft niet meteen alles offline beschikbaar te maken. Je kunt met kleine stappen beginnen en uitbreiden wat voor jouw bedrijf relevant is. Met een paar slimme aanpassingen kun je een wereld van verschil maken. Als de omstandigheden niet ideaal zijn, moet een website of applicatie nog steeds waarde bieden. Het gaat om verder kijken dan je eigen comfortabele werkplek."

Hoe offline first werkt

Maar hoe kun je een website of applicatie functioneel houden zonder internet? Rowdy legt het principe uit: "Als een gebruiker voor het eerst naar een website gaat en offline is, gebeurt er niets. Maar als je bij een eerdere sessie online was, kun je data zoals pagina's of afbeeldingen lokaal opslaan op het device. De volgende keer dat de gebruiker offline is, kan hij nog steeds content zien."

Rowdy benadrukt dat deze aanpak niet alleen nuttig is bij offline situaties. "De techniek werkt ook wanneer je online bent. Door gebruik te maken van service workers sla je bijvoorbeeld api-responses lokaal op. Bij een volgende sessie wordt die data direct uit de cache gehaald, zonder een nieuwe serveraanvraag. Dat scheelt snelheid, bandbreedte en batterijverbruik." Hij noemt een praktijkvoorbeeld: "Als je in het buitenland bent en dataroaming duur is, kun je zo voorkomen dat je onnodig veel data verstuurt. Bovendien verbruikt je telefoon minder batterijlading, omdat hij geen verbinding hoeft te maken met een zendmast."

Cachingstrategieën

Tijdens zijn talk behandelt Rowdy vijf cachingstrategieën, waarvan hij er één - Cache First, Network Fallback - uitgebreid uitwerkt. "Dat is de meest gebruikte aanpak", zegt hij. "Het houdt in dat de data eerst uit de cache worden gehaald. Als dat niet lukt, wordt er alsnog contact gezocht met de server."
Hoewel hij de andere strategieën ook bespreekt, geeft Rowdy de ruimte aan het publiek om zelf te bepalen welke aanpak het beste past. "Er zijn veel variaties mogelijk. Ik laat zien hoe je klein kunt beginnen en dat verder kunt uitbouwen."

Rowdy heeft zijn talk zorgvuldig opgebouwd. "We beginnen heel simpel, met een gewone website. Vervolgens laten we zien hoe je die stapsgewijs sneller en robuuster maakt." Aan het einde van de sessie hebben de deelnemers niet alleen geleerd hoe ze een site offline toegankelijk kunnen maken, maar ook hoe ze een snellere en meer efficiënte online ervaring kunnen bieden.

Waarom mogen bezoekers Rowdy's talk niet missen? "Ik denk dat iedereen hiermee te maken heeft. Als je ervoor wilt zorgen dat je gebruikers optimaal kunnen genieten van je website of applicatie, dan moet je deze technologie inzetten. Het maakt je site sneller en je gebruikers tevredener."

Kortom; met veel voorbeelden, praktische demo's en een duidelijk stapsgewijze aanpak belooft Rowdy's talk niet alleen inspirerend te zijn, maar ook direct toepasbaar. "Het is een talk met heel veel praktijk. Het is geen droge theorie, maar echt hands-on. En als je na mijn talk niet overtuigd bent om offline first te gaan toepassen, dan heb je echt niet opgelet."

Haal nu je tickets voor de Developers Summit in huis

De kaartverkoop voor hét evenement van het jaar dat developers in het zonnetje zet, gaat als een raket, dus zorg dat je deze bijzondere summit niet mist. Tickets zijn verkrijgbaar voor 299 euro (plus 1,99 euro servicekosten) of als '3 halen, 2 betalen'-deal.

Als jouw werkgever de tickets vergoedt, ontvang je uiteraard een factuur voor administratieve doeleinden. Persoonlijke gegevens worden niet gedeeld met partners.

Kijk hier voor het privacybeleid van Tweakers.

Ben je student? Mail ons dan via [e-mail], zodat je een ticket kan kopen voor een gereduceerd tarief van 75 euro.

Reacties (13)

[Ed Vertijsment]

Offline websites kunnen al een tijdje, ook voor de beschikbaarheid van Service Workers middels manifests, het wordt alleen, zoals gezegd vrij weinig gebruikt.

De vraag is dan waarom: is er gebrek aan kennis of behoefte? In het voorbeeld van een agenda achtige setting is natuurlijk nuttig maar een app die puur afhangt van real time updates is het wellicht van minder toegevoegde waarde, waarom zouden er in zo’n geval resources besteed worden hieraan?

[joost00719]

Meestal is een website bedoeld om live content te bekijken, of live bepaalde acties uit te voeren, zoals een comment plaatsen op Tweakers.
Dit gaat nogal lastig zonder netwerkverbinding.

Een game zoals cookie clicker zou wel prima kunnen, maar meeste use-cases werken niet met een offline modus.

[cracking cloud]

ja maar de marketing afdeling had niks te doen dus hebben ze offline first verzonnen

[poktor]

Misschien wel, maardat neemt niet weg dat het een goed uitgangspunt is. Offline, oftewel caching van webpagina's, om ze vervolgens weer te geven via de serviceworkers, is met name op mobiele toestellen een uitkomst, om de in de tekst genoemde redenen. Het is inderdaad sneller, goedkoper, enz, want als het toestel weer verbinding heeft, hoeven enkel de delen die gewijzigd zijn opgehaald te worden, de rest niet. Maar developers zijn ook mensen en soms/vaak lui, of werken onder grote tijdsdruk, dus wordt het niet meegenomen dan wel uitgevoerd.

[Room42]

Jouw nickname is wel heel toepasselijk hier! Dit artikel is geschreven om je naar de summit te lokken. Niks meer, niks minder.

Heel irritant, want het is geschaard onder een .plan, terwijl die normaal wel interessant kunnen zijn. Je kunt hem dus niet blokkeren op de css class 'plan', want dan blokkeer je alle plans.

[Ed Vertijsment]

Dat weet ik

[Stroper]

Misschien omdat, zeker in West-Europa, we 24h/dag online kunnen zijn zonder noemenswaardige kosten. Als je bv. Bank uitbaat in Midden-Afrika, zou het misschien wel handig zijn als je je (laatst) gekende saldo offline kan blijven opvragen. (Maar geen idee of her ook in dergelijke regio's ondersteund wordt).

[Martinspire]

Er zijn genoeg sites waar offline-first inderdaad een grote verbetering is, al is het aantal use cases wel laag. Dingen die je nodig hebt op beurzen, tijdens reizen of in een ander land zijn inderdaad van die toepassingen, maar een site als tweakers heeft er weinig aan, want daar gaat het vooral om het nieuws en als je geen connectie hebt, heeft het niet zoveel zin om oude berichten te tonen. Idem bij een facebook of ander sociaal netwerk. Het is fijn als bepaalde resources gecached worden, maar voor de meeste zaken hoef je al niet zoveel te doen om dat te laten cachen.

Verder kun je je afvragen hoeveel er is te verdienen aan gebruikers die niet altijd online zijn en last hebben van datalimieten. De laatse jaren zijn diensten toch vooral op zoek naar de "whales" die grote bedragen betalen voor de meest nutteloze dingen.

[djwice]

Wat denk je van alle css, javascript en plaatjes? Alles dat bij elk bezoek wordt hergebruikt.

Ook kan de cache een pre-load en pre-render van de meest waarschijnlijke volgende pagina opslaan. Je klik is na het lezen van een artikel en terug op de homepage dan ineens rete snel.

Of wat dacht je van een pre-fetch van nieuwe berichten op het forum topic dat je altijd leest, of de berichten in je notificaties, die automatisch worden toegevoegd.Handig als je in de trein stapt met overvolle wifi/4G en jouw telefoon ze alvast heeft opgehaald toen je naar de trein liep of fietste.

Kun je ze gewoon snel offline lezen, zonder dat je door hebt dat internet traag is of hapert. Tweakers werkt gewoon snel, je ziet zelf immers het verschil niet.

[Reactie gewijzigd door djwice op 26 november 2024 05:46]

[Martinspire]

Ja dat bedoel ik ook. Je hoeft als dev niet giga veel te doen om te zorgen dat er al wat caching is. Voor een site als tweakers heb je geen offline modus nodig. Dat voegt gewoon te weinig toe.

[djwice]

De caching waar ik het over had wordt gedaan in de service-worker en dat zorgt er voor dat ook offline (of bij trage wifi) alles blijft werken.

Tweakers heeft trouwens bij mij ook een offline modus. Dat werkt vast niet bij iedereen. 😉

Een offline modus is overigens niet heel complex als je al een service worker hebt. Een paar regels code en een beetje slim nadenken.

Ik heb bijvoorbeeld ook voor de OpenAPI validaties en de responses in de service worker zitten, deze vangen requests naar de server af totdat ze goed zijn en de server beschikbaar is.
Hier kun je voor bepaalde dingen prima een uitgestelde submit voor offline use in zetten. Soms is offline maar even, soms wat langer.

Maar wellicht maak jij het offline zijn minder vaak mee dan anderen en is het dus minder van belang voor jou type verbinding/gebruik. Dat kan.

[Reactie gewijzigd door djwice op 26 november 2024 07:56]

[djwice]

Klopt, voor een grote internationale verzekeraar ben ik hiermee ook gestart eind 2017, in het begin geloofde de toeschouwers niet dat ze live naar hun eigen site keken.

Uiteindelijk heb ik een proxy ontwikkeld die dit op elke willekeurige website automatisch toevoegd. En deze is internationaal uitgerold, ook op de Amerikaanse websites van de verzekeraar.

Daar heeft het nog meer voordelen dan hier omdat veel mensen nog hele trage.en vaak wegvallende internet verbindingen hebben.

Voor de invoering moesten sommige gebruikers in de US meer dan 20 seconden wachten totdat een pagina geladen was.
Nu flitsen de eerder bezochte pagina's supersnel over het scherm. En is de verzekeraar dus een van de snelste websites op interner in de beleving van die bezoekers.

Het resulteerde ook in ruim 80% minder load op de servers en een hogere conversie rate en omzet en hogere klantwaardering en minder belletjes / contact verzoeken.

In US hadden ze wel iets bijzonders: voorwaarden die een lange cache policy hadden moesten at-hok aangepast kunnen worden en de oude moest dan binnen 15 minuten door niemand meer te zien zijn.

Ik heb dus een 'nood' mechanische ingebouwde om dat te bewerkstelligen.

Ik scheidde de verschillende bestandstype in verschillende bakjes, juist omdat er klanten zulke trage internet verbindingen hebben, zodat niet de hele cache maak bijvoorbeeld alleen script weggegooid kon worden als er fouten of incompatibiliteit ontstond (veel ontwikkelaars die los van elkaar aan een site werken). zodat plaatjes bijvoorbeeld nog steeds lokaal stonden en niet opnieuw geladen moesten worden.

Bij de presentatie is het van belang dat de stakeholders tijdens de presentatie de PWA installeren op hun telefoon.
Dat geeft heel snel buy-in en overtuiging en hiermee kunnen zij 'pronken' naar andere leiders in het bedrijf en naar klanten en business partners. Dit zorgt er voor dat je product een enorme vlucht neemt (en veel vraag, dus zorg dat je het heel snel kunt uitrollen).

[Die_ene_gast]

Dus het idee is dat straks alle sites lokaal gecached worden bij mij? Mag ik daar zelf voor kiezen, als het belangrijk is maak ik wel een schermafdruk, dank u. Ik heb geen TBs aan interne opslag