Groen programmeren en Apps zonder internet

Wat zijn de ontwikkelingen in Angular? Gerhard, Freek en Michel van ilionx Interactive Marketing waren op 19 en 20 september in Londen voor AngularConnect, de grootste Angular-conferentie van Europa. Lees hieronder een verslag van Freek over de onderwerpen groen programmeren  en apps zonder internet.

Naast technisch diepgaande onderwerpen en aankondigingen was er op Angular Connect ook ruimte voor onderwerpen die niet enkel binnen de Angular context van toepassing zijn. Twee talks die mij zijn bijgebleven zijn: “Saving the world, one line at the time” door Asim Hussain, en “Offline first” door Martina Wiśniewska.

Saving the world, one line at the time

Asim begon zijn talk met de vraag: “What is the greener option?”. Er worden in (scrum) meetings vaak allerlei afwegingen besproken voor belangrijke beslissingen, maar een groene of klimaatvriendelijke overweging komt bijna nooit ter tafel. Dit terwijl hier wel degelijk keuzes in te maken zijn, die grote invloed kunnen hebben op uitstoot.

Wat is bijvoorbeeld groener: Een laptop of een desktop? wifi of 3g/4g? server of serverless? Door deze vragen te stellen, wordt er getriggerd om over die groene keuze na te denken. (laptop, wifi en serverless waren de goede antwoorden).

De meeste invloed die een programmeur of it-organisatie heeft op de klimaatverandering, is stroomverbruik. 1 mb datatransmissie genereert om en nabij 10 gram CO2e (Carbon Dioxide en alle andere stoffen die de opwarming van de aarde veroorzaken). Het loont dus al snel om een bijvoorbeeld een website (gemiddeld 2,4mb) zo klein en optimaal mogelijk te maken, geen onnodige data te versturen en plaatjes gecomprimeerd van een server op te halen en uit te pakken in de client. Ook de keuze voor een serverless backend kan veel uitstoot schelen. Serverless is bedoeld om niet meer resources te gebruiken dan strikt noodzakelijk, dit in tegenstelling tot een reguliere server die van te voren moet worden ingekocht, en mogelijk niets doet terwijl de server wel draait. Als laatste tip: Gebruik servers die draaien op groene energie: Azure en Google Cloud draaien volledig op groene energie.

Ik ben persoonlijk erg geïnteresseerd geraakt door deze talk. Wanneer je hier over nadenkt in je dagelijks werk, ga je merken hoe veel je hierin kan betekenen. Door dit thema te bespreken met collega’s of zelf bewuste keuzes te maken.

Bekijk de talk op youtube: https://www.youtube.com/watch?v=2c3IzLxxLfM

Offline First

Het concept Offline First kan herkenbaar klinken; “mobile first” is in de webdev wereld een zeer gangbaar en veelgebruikte term. Bij het ontwerp van een website eerst een mobiele versie maken, en pas later een desktop versie waar meer ruimte in de UI beschikbaar is. Zo ook gaat Offline First over mobiele apps of progressive web apps (pwa’s) die in eerste instantie offline worden ontworpen en ontwikkeld, waarna later functionaliteiten en data communicatie via het internet worden toegevoegd.

Dit brengt een aantal voordelen met zich mee:

• Offline state is geen error conditie, de gebruiker is in staat de app te gebruiken met of zonder internet.
• Periodieke synchronisatie met de backend in plaats van instant mutaties, dit zorgt voor minder data over en weer en zodoende minder energie en dus meer batterijduur (en minder uitstoot natuurlijk).
• Doordat de gebruiker de app kan blijven gebruiken verbetert UX aanzienlijk. De gebruiker ziet geen oneindige loading spinners of error berichten, mogelijk enkel een aanduiding dat er momenteel geen internet connectie mogelijk is.
• Snellere UI: een datamutatie wordt lokaal opgeslagen en periodiek gesynchroniseerd, de gebruiker hoeft dus niet te wachten op server processen.

Voorbeelden van bekende apps die dit uitgangspunt succesvol toepassen zijn Spotify en Slack.

Om offline first te implementeren moet er wel rekening gehouden worden met een aantal onderdelen in het ontwikkelproces:

• Programmeer de app of pwa eerst offline en test dit volledig en doorgrondig. Begin daarna met de communicatie naar de server.
• Gebruik een lokale datastorage, goed gedocumenteerde opties zijn IndexedDB of Cache API. IndexedDB heeft op z’n beurt een aantal wrappers die de toepassing nog makkelijker maken, bijvoorbeeld PouchDB.
• Ga ervan uit dat de gebruiker op elk moment de app kan verlaten of afsluiten, hou hier rekening mee en zorg dat de gebruiker door kan met waar hij was gebleven nadat de app opnieuw wordt opgestart.
• Zorg voor een goede scheiding tussen data en UI, binnen Angular wordt dit vaak aangeduid als Slimme en Domme componenten.

App shell model

Een pwa met de app shell architectuur zorgt ervoor dat een pagina direct op het scherm van de gebruiker wordt laten zien. Onafhankelijk van de eventuele data die op dat moment nog moet worden geladen. Het is een minimale basis van html, css en javascript, dat lokaal staat opgeslagen, en altijd direct beschikbaar is bij herhalende pagina’s tijdens het gebruik van de app. Zo hoeft een gebruiker nooit op een pagina te wachten, bij een trage internet-verbinding alleen op de pagina content.

Persoonlijk was ik direct geïnteresseerd door dit idee, omdat het zo voor de hand lijkt te liggen terwijl het nog (te) weinig wordt toegepast. Ik heb er zelf nog niet mee kunnen werken maar pas dit concept graag een keer toe.

De talk is te vinden op youtube: https://www.youtube.com/watch?v=6rFJNUX3P_U

Collega Gerhard Boer was zelf spreker op AngularConnect. Lees ook over zijn ervaringen.