HTML5 de toekomstige performance boost voor mobile webapps

Bel nu naar 0575 512 125 0575 - 51 21 25

cb8f4973aafb0adf874edd7186bbe964 (1)

>> Gepost op: 23 februari, 2011 in Kenniscentrum, trends


Een veel besproken onderwerp op dit moment is de ontwikkeling van mobiele webapplicaties. Nieuwe technieken maken het voor webontwikkelaars mogelijk om op eenvoudige wijze een applicatie voor bijvoorbeeld Android of iPhone te ontwikkelen.

Een voordeel van de webapplicaties voor smartphones is dat ontwikkelaars iTunes of de Android market omzeilen en hun applicaties op eenvoudige wijze beschikbaar stellen voor de doelgroep. Maar je kunt ook Google perfect benutten om je applicatie te laten opduiken in zoek resultaten.

Enkele nadelen van de ontwikkeling van een mobiele webapplicatie spreken voor zich. De ontwikkelaar heeft immers geen mogelijkheden om de volledige functionaliteiten van de smartphone te benutten zoals aansturing van de camera of bijvoorbeeld het gebruik van de ingebouwde G-Sensor.

Daarnaast kun je je afvragen of het handig is om applicaties te ontwikkelen die niet te gebruiken zijn zonder een internet verbinding of met een trage GPRS verbinding op je smartphone.  Veel enthousiaste smartphone gebruikers zijn immers altijd online maar de snelheid van mobiel internet maakt het wel minder aantrekkelijk om grote hoeveelheden data bij de server op te halen en deze te gebruiken in je mobile webapp. De nieuwe HTML5 specificaties kunnen ons helpen om de snelheid van webapps te bevorderen.

HTML storage, wat is het en hoe is het ontstaan?

Native apps hebben als voordeel dat data kan worden opgeslagen op de lokale computer (smartphone) van de gebruiker. Bij webapps is de ontwikkelaar veelal  beperkt tot een database die hij via het internet kan bereiken om informatie te ontsluiten. Hiervoor is een internet verbinding nodig en moet de bandbreedte worden gebruikt om data heen en weer te sturen.

In het begin van Internet Explorer implementeerde Microsoft een mogelijkheid om data op te slaan op de computer van de gebruiker. Het ging slechts om hoeveelheden van 64kb zonder enige mogelijkheid deze uit te breiden. Sindsdien zijn er vele ontwikkelingen geweest om deze techniek te verbeteren of uit te breiden.

Webontwikkelaars hebben destijds aardig hun best gedaan om via cookies informatie mee te sturen van pagina naar pagina. Echter worden cookies bij iedere klik meegegeven tijdens het navigeren door de applicatie van en naar de server. Hiervoor is een verbinding met het internet vereist en dit is een aanslag op de bandbreedte van de mobiele gebruiker, een ware performance killer voor mobile webapps.

Wat zijn de mogelijkheden van de HTML5 storage specificatie

HTML5 Storage is een manier om tot 5 mb aan informatie op te slaan in de webbrowser van de gebruiker. Afhankelijk van de gebruikte variant wordt blijft de informatie beschikbaar totdat de sessie wordt beëindigd.

De storage functie kan worden gebruikt in veel moderne webbrowsers en zelfs vanaf Internet Explorer versie 8. Daarnaast is de functionaliteit ook geïmplementeerd in de laatste generatie iPhone of Android smartphones. Het is daardoor bij uitstek geschikt voor de ontwikkeling van mobile webapps.

HTML5 storage maakt het mogelijk om data lokaal op te slaan en deze pas te versturen naar de server  nadat de ontwikkelaar hiervoor een functie heeft geschreven. Het kan daarom perfect worden gebruikt als caching mechanisme  om informatie die is verkregen uit een database op te slaan op de smartphone van de gebruiker. Een drastische verbetering van de mobile webapp performance!

Een praktisch voorbeeld

Als ontwikkelaar maak ik een mobile webapp die op veel moderne smartphones is te gebruiken. Dit kan ik doen zonder rekening te houden met het besturingssysteem dat op deze smartphone draait.

Mijn applicatie haalt de laatste 50 tweets uit mijn Twitter timeline en toont deze in een aantrekkelijke interface die is geoptimaliseerd voor mobiel gebruik. Om deze tweets op te halen heb ik een internet verbinding nodig die een connectie met de Twitter API legt en de tweets uit mijn timeline ophaalt.

Nadat ik details van een tweet heb bekeken wil ik terug naar de overzichtsweergave om opnieuw mijn timeline te kunnen bekijken. Zonder de HTML5 storage specificatie had ik waarschijnlijk opnieuw een beroep gedaan op de beperkte bandbreedte van mijn smartphone. HTML5 storage geeft ontwikkelaars nu de mogelijkheid om de opgehaalde Twitter stream in het geheugen van de smartphone te plaatsen zodat deze niet nogmaals via het internet hoeft te worden opgehaald.

Het gebruik van lokaal geheugen is natuurlijk altijd vele malen sneller dan het gebruik van een internet verbinding. Deze combinatie is daarom een enorme performance boost voor mobile webapps!

Best4u

Best4u

Best4u Group voorziet al jarenlang bedrijven in online oplossingen. Wij slaan een brug tussen ingewikkelde online technieken en een succesvol online eindproduct middels de meest fanatieke service en support.