TETRA: HTML5 als Sleuteltechnologie?

TETRA: HTML5 als Sleuteltechnologie? Een vergelijkende studie en demonstratie van de mogelijkheden en beperkingen van de HTML5-standaard t.o.v. native toepassingen op pc s en mobiele toestellen. Eindverslag Pieter Simoens - Projectleider Karel Van Achte - Onderzoeker web- en mobiele technologieën Steven Palmaers Co-projectleider / onderzoeker Frederik Smolders - Onderzoeker 1 oktober 2012-30 september 2014

Onderzoek De globale doelstelling van dit onderzoek was de opbouw en overdracht van kennis over de HTML5-standaard, die ondernemingen moet toelaten om de functionaliteit en performantie van deze technologie correct in te schatten bij het maken van strategische en architecturale keuzes voor webgebaseerde toepassingen. Het onderzoek naar de mogelijkheden van HTML5 werd uitgevoerd rond de vraagstelling HTML5 als Sleuteltechnologie?. Is HTML5 nu echt de heilige graal die een allesomvattende oplossing levert voor het ontwikkelen van webgebaseerde applicaties én die compatibel is met alle platformen? Het antwoord op deze cruciale vraag is op het einde van het project nog niet te beantwoorden met een duidelijke ja of nee. De evolutie van de technologie is nog volop aan de gang en HTML5 is momenteel nog steeds niet gestandaardiseerd. Voor het opmaken en structureren van webpagina s kan reeds gebruik gemaakt worden van de hiervoor specifieke HTML5 technologie zoals de nieuwe semantische structuurtags en CSS3. Om (mobiele) webapplicaties te ontwikkelen die we bijvoorbeeld kunnen toevoegen aan het homescreen van het apparaat om hierbij een Native ervaring te benaderen zijn er echter minder stabiele en nieuwe HTML5 API s nodig. Een eerste finale HTML5 specificatie wordt eind 2014 verwacht maar de minder stabiele en nieuwe functionaliteiten worden ondergebracht in HTML 5.1, een nieuwe standaard met eind 2016 als vooropgestelde datum. Het zijn echter de nieuwe en minder stabiele functionaliteiten die HTML5 tot een lopertechnologie kunnen maken en een volwaardig alternatief kunnen bieden voor bepaalde Native functionaliteit. Desalniettemin blijkt uit onze contacten met de gebruikersgroep dat bepaalde aspecten van HTML5 reeds volop in productie gebruikt en meer wereldwijd - bepaalde onderdelen van de technologie reeds een officieuze de facto standaard uitmaken. HTML5 video is hiervan een goed voorbeeld. Voor HTML5 was er geen gestandaardiseerde manier om video s af te spelen op een webpagina en konden video s enkel afgespeeld worden met een plug-in (vb. flash). Het HTML5 <video> element biedt nu de mogelijkheid om video te integreren in een webpagina en wordt ondersteund door alle moderne browsers. Anderzijds is er de veelbelovende maar nog steeds experimentele WebRTC API (realtime peer to peer communicatie tussen browsers) die ook een onderdeel van de HTML5 standaard zou worden maar op dit moment onbruikbaar is in productie door de gebrekkige ondersteuning van de verschillende browsers.

Proof-of-Concepts In het eerste projectjaar richtte het onderzoek zich voornamelijk op het uittesten van verschillende aspecten van de HTML5 standaard. - Er werden testen uitgevoerd rond de scrolling-performantie van webapplicaties t.o.v. native ervaringen. - Er werd een prototype gebouwd om de voordelen en valkuilen van de Appcache API in kaart te brengen. - Er werd een CityGame concept uitgewerkt, waaruit o.a. een aantal inzichten omtrent het gebruik van locatievoorzieningen werden opgedaan. - Er werd een prototype gebouw rond een 3D CMS. - Er werd een HTML5-gebaseerde video player uitgewerkt. De gebruikersgroep liet verstaan dat zij sneller wouden overschakelen naar meer volwaardige prototypes dan voorzien in het oorspronkelijke werkplan. Het werkplan werd overeenkomstig bijgestuurd, en reeds na 9 maanden werd gestart met de definitie van drie pilootprojecten. Pilootprojecten Tijdens het onderzoek werden naast verschillende proof of concepts twee pilootprojecten uitgewerkt. De ontwikkeling van de pilootprojecten verliep in nauwe samenwerking met de bedrijven uit de gebruikersgroep en had als doel op een concrete manier de mogelijkheden, beperkingen en moeilijkheden van de technologie in kaart te brengen Pilootproject 1: Second Opinion Webapp In dit pilootproject bestond de opdracht uit het voorzien van een webgebaseerde interface waarbij artsen in realtime medische MRI beelden (in DICOM standaard) synchroon kunnen uitwisselen, bekijken, bewerken en annoteren. Op die manier kunnen verschillende artsen elkaar in realtime feedback geven over een onderzoek ongeacht waar men zich bevindt.

Voor dit project lag de focus op het Canvas element, Websockets en WebRTC. Het Canvas element bleek zeer bruikbaar voor complexe pixel bewerkingen en wordt ondersteund in alle moderne browsers. Voor de realtime communicatie tussen de browsers werd gebruik gemaakt van HTML5 websockets. Hierbij werd snel duidelijk dat het versturen en verwerken van grote hoeveelheden data (beeldinformatie) over websockets de performantie drastisch beïnvloed. Websockets blijken dan weer uitermate geschikt om kleine hoeveelheden data door te sturen, waardoor we in deze applicatie gekozen hebben om enkel de events binnen de UI te synchroniseren. Door middel van de socket.io library zijn websockets bruikbaar in alle recente browsers. Ook werd er bekeken om de experimentele WebRTC technologie in te zetten om de beeldinformatie te synchroniseren maar hier was de performantie ook problematisch. De technologie is echter wel bruikbaar voor het opzetten van peer-to-peer audio, video en bestandsdeling maar op dit moment is dit enkel mogelijk met recente versies van Firefox en Chrome. Pilootproject 2: Mobile Festival Webapp Hier was de opdracht een mobiele webapplicatie te bouwen met als insteek het festival concept waarbij werd getracht een Native gebruikerservaring te evenaren en dit met enkel beschikbare HTML5 technologie.

Voor het bouwen van een mobiele webapp dient men zelf de UI te voorzien waarmee een consistente look and feel voor alle browsers en apparaten gecreëerd kan worden en dit in tegenstelling tot Native waarbij UI elementen vast omlijnt en beschikbaar zijn. Dankzij de HTML5 file input velden konden we toegang krijgen tot de Native camera en microfoon app. Ook het gebruik van geolocatie wordt goed ondersteund al is de nauwkeurigheid niet optimaal en verbruikt deze functionaliteit veel energie. Een ander belangrijk punt van aandacht is dat geolocatie enkel actief is als de browser(engine) wordt gebruikt, het bepalen van geolocatie in een achtergrondproces is niet mogelijk. Ook bestaat er geen mogelijkheid om notificaties te voorzien om de gebruiker te informeren, men dient deze functionaliteit zelf in te bouwen en net zoals bij geolocatie moet hiervoor de browser actief zijn. Ook het toevoegen aan het homescreen om de webapp full-screen te tonen werkt zoals het hoort, en in het algemeen kunnen we besluiten dat men vrij ver kan gaan om enkel met de beschikbare HTML5 technologie een mobiele webapp te bouwen. Pilootproject 3: Product Locator In dit pilootproject was de vraag op welke manier HTML5 gebruikt kan worden voor een (product)catalogus in combinatie met (indoor) locatiebepaling. Initieel kwam de vraag vanuit Yappa, dat bij een project voor een van hun klanten hiermee geconfronteerd werd. Vanuit Stad Lommel kwam er een voorstel met gelijkaardige kenmerken, waardoor twee vliegen in een klap konden worden geslaan. Hierbij ging het over een toepassing voor het vinden van een bepaald graf op een van de begraafplaatsen, eventueel met navigatie op de begraafplaats tot aan het graf in kwestie. Er werd zowel een back-end als een front-end gedeelte gemaakt in het kader van dit pilootproject. Via de back-end kan een beheerder items toevoegen aan de catalogus, een plattegrond uploaden, items koppelen aan een bepaalde locatie op de plattegrond, media toevoegen,... De front-end bestaat uit een HTML5-gebaseerde responsive website, zichtbaar op zowel computer, tablet als smartphone. Hierbij werd gebruik gemaakt van het Laravel framework. Er werd ook een Android laag geschreven bovenop het HTML5-gedeelte om locatiebepaling en het scannen van QR-codes toe te voegen.

3D CMS Een nevenproject waar binnen de PXL aan gewerkt werd, is een beperkt 3D CMS. Hiermee kan men in de browser, via een laagdrempelige interface objecten toevoegen aan een 3D-wereld, items vergroten / verkleinen, verplaatsen, textures aanpassen,... Ook collision detection werd geïmplementeerd, zodat de gebruiker niet door objecten kan wandelen. Hiervoor werd gebruik gemaakt van een combinatie van JavaScript, HTML5 en WebGL. Een dergelijk systeem zou ingezet kunnen worden om een 3D omgeving aan te maken, zonder dat 3D kennis vereist is. Zo zou men bijvoorbeeld het interieur van een winkel, shopping center, kantoorgebouw of de indeling van een campus, bedrijventerrein of begraafplaats visueel kunnen modelleren.

Evolutie HTML5 tijdens het onderzoek Toen het onderzoek in 2012 werd opgestart was er een ware hype rond HTML5. Door de opkomst van het mobile web ten gevolge van de explosieve groei van de tablet- en smartphone markt werd HTML5 gezien als de oplossing voor de toenemende fragmentatie. De verwachtingen waren hoog en de hype werd gevoed doordat grote software bedrijven HTML5 effectief reeds gingen gebruiken. De euforie was echter van korte duur want de technologie bleek nog lang niet volwassen genoeg om voor een breed publiek ingezet te worden, laat staan om de ervaring van een native toepassingen te evenaren. 1 Facebook noemde de strategie om HTML5 voor mobile te gebruiken hun grootste vergissing en andere grote bedrijven zoals 2 LinkedIn kozen na experimenten met HTML5 opnieuw voor een pure native aanpak. Het onderzoek bevestigde de problemen rond cross-browser compatibiliteit en ook bleek dat er naast de verschillende browser inconsistenties ook significante performantie problemen kunnen optreden waardoor het bouwen van applicaties met enkel HTML5 technologie toch geen evidentie is. Daarnaast blijft Native aan snel tempo innoveren en progressie maken, HTML5 probeert bij te benen maar is eigenlijk gedoemd om steeds achterop te hinken door de lage snelheid waarmee de standaard tot stand komt. HTML5 vandaag De hybride aanpak waarbij men een native schil rond HTML5 content in een webview voorziet won tijdens de duur van het onderzoek echter steeds meer aan populariteit en kende ook een sterke evolutie. Doordat de Native Android browser stilaan plaatsmaakt voor het veel krachtigere Chrome vormen de eerdere performantie problemen met eerder genoemde browser geen barrière meer om te kiezen voor een hybride strategie. Men kan er nu van uitgaan dat elk recent mobiel apparaat over een moderne en krachtige browser engine beschikt. Door de hybride aanpak kan er ook gebruik gemaakt worden van Native features en hardware die niet beschikbaar zijn of niet ondersteund worden in HTML5. Een belangrijk punt is hierbij is dat het gebruik van notifications dan ook mogelijk is, en alle sensoren en hardware van het toestel aangesproken kunnen worden via de Native wrapper. Deze conclusie werd ook bevestigd door alle relevante bedrijven waarmee de onderzoekers in contact mee kwamen. 1 thenextweb.com/facebook/2012/09/11/zuckerberg-the-performance-stock-obviously-disappointing/ 2 venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/

De toekomst van HTML5 HTML5 is nog steeds in ontwikkeling, en dus blijft de functionaliteit inconsistent en gelimiteerd wegens de interpretatie van HTML5 door de verschillende browsers. Door de uiteindelijke standaardisering zal het mogelijk worden om met HTML5 krachtige applicaties te bouwen voor een breed scala aan apparaten met één codebase maar wel op voorwaarde dat de gebruiker een moderne browser ter beschikking heeft. 3 HTML5 zal wellicht Flash en andere plug-ins volledig vervangen en verschillende grote software giganten maar ook kleinere bedrijven zijn reeds geleidelijk hun applicaties deels en waar mogelijk aan het 4 migreren naar HTML5 om klaar te zijn voor de toekomstige standaard. Alle apparaten beschikken tegenwoordig over een browser, in een ideale wereld is HTML5 standaard wel nog steeds de allesomvattende oplossing i.v.m fragmentatie. Er is echter nog meer fragmentatie aan de gang door de opkomst van nieuwe mobiele operating systemen die momenteel een sterke opmars kennen op de Aziatische markt. Hierbij zorgen Chrome OS, Firefox OS, Tizen (Intel, Samsung, NEC, Panasonic, ) nog voor meer fragmentatie doordat die opnieuw elk hun eigen interpretatie hebben van HTML5 zolang de technologie nog niet gestandaardiseerd is. Wat ook zeker vermeld dient te worden is dat Javascript geëvolueerd is van een scripting taal naar een volwaardige programmeertaal. HTML5 is zeer nauw verbonden met Javascript en ook serverside bestaat nu de mogelijkheid om Javascript te gebruiken. Hierdoor is een Full Javascript stack mogelijk en kan code client- en serverside uitgewisseld worden. HTML5 gebruiken Om HTML5 te gebruiken dient men te kijken naar de context van het project. Op dit moment is HTML5 ideaal voor presentatie en web-content. M.a.w men gebruikt HTML best voor wat het bedoeld is: HyperText Markup Language of opmaaktaal. Bij de ontwikkeling van een applicatie kan men zich de vraag te stellen: is Native functionaliteit echt nodig voor de presentatie en content van de applicatie en biedt dit een meerwaarde? Indien toegankelijkheid en beschikbaarheid van Native device features, push berichten en performantie vereist zijn kiest men beter voor een pure Native oplossing. Voor mobiele apps is het gebruik van HTML5 binnen een Hybride Applicatie momenteel de beste oplossing. De webview in de Native app biedt het beste van de 2 werelden. De HTML5 3 blogs.adobe.com/conversations/2011/11/flash-focus.html 4 html5report.com/topics/html5/articles/361013-google-migrates-youtube-html5-its-own-4kcompression.htm

code is dan cross-platform en uitwisselbaar en de ontwikkelaar kan tevens gebruik maken van features en hardware die enkel Native beschikbaar zijn.

Overdracht resultaten naar de gebruikersgroep Naar het einde van het project groeide een duidelijke consensus binnen de gebruikersgroep dat hybride applicaties de beste manier zijn, gegeven de huidige stand der techniek. Alle broncode en presentaties werden ter beschikking gesteld van de gebruikersgroep. Verschillende leden gaven aan met deze codebase verder aan de slag te gaan : - Er werd een specifieke workshop bij Wijs Digital Agency georganiseerd, waarbij het developers team samen een tutorial doorliep. Na afloop gaven de aanwezigen te kennen dat ze nieuwe mogelijkheden van HTML5, in het bijzonder rond AppCache, eindelijk beter hadden kunnen doorgronden. - Voor Dobco Medical Systems is duidelijk geworden dat de HTML5 standaard op dit moment nog niet voldoende geevolueerd is om mobiele applicaties met grafisch intensieve beelden te ondersteunen. Het is hier wachten op een verdere uitbouw van technologieen zoals WebRTC. - Yappa gaf aan in de toekomst zeker verder aan de slag te gaan met HTML5, aangezien in deze context regelmatig vragen binnenkomen. Zo is er o.a. in het kader van het pilootproject gewerkt aan een product locator voor een van hun klanten. Men gaf aan om hier na in de loop van 2015 zeker verder mee aan de slag te gaan. - Ook binnen Stad Lommel zijn er plannen om de ontwikkelingen verder uit te werken en om na te gaan hoe een afgewerkt product kan aangeboden worden aan burgers / bezoekers van de begraafplaatsen. - Andere leden waren meer geinteresseerd in specifieke aspecten, zoals het gebruik van de <video>-tag, of de ervaringen met verschillende ontwikkelplatformen. Algemeen kan gesteld worden dat dit project een zeer nuttige aanvulling vormde voor de vele bedrijven die reeds aan de slag waren met HTML5. Het project bood een uniek overlegplatform om ervaringen en inzichten uit te wisselen. De inzichten uit het project werden in het laatste halfjaar ook breder verspreid: Er werd een sessie georganiseerd op AppsCity (15/05/14), specifiek rond HTML5 Er werd een lunchsessie georganiseerd bij het InnovatieCentrum Oost-Vlaanderen (03/09/14), waar ook een aantal bedrijven aanwezig was die zich niet direct richten op webontwikkeling, maar wel geinteresseerd zijn in de uitbouw van mobiele applicaties (bv. voor e-boeken). Via het Innovatiecentrum Limburg kwam een concrete vraag rond HTML5 (specifiek rond animaties) binnen. Er werd een intakegesprek gedaan met de partij in kwestie en er werd een beperkt prototype gebouwd. Er werd in het kader van de Cegeka Knowledge Sharing Meeting een sessie gegeven. Er werd een toelichting gegeven rond het project op de interne onderzoeksdag van de Hogeschool PXL. HTML5 werd geïntegreerd binnen het curriculum van de Hogeschool PXL (opleidingsonderdeel Special Topics in IT 2 ).

We menen dan ook te kunnen stellen dat de begrote mensmaanden op een adequate manier werden ingezet bij beide projectpartners. Conclusie De vraag is niet langer HTML5 al dan niet te kunnen gebruiken maar wanneer. Vandaag is vrijwel elk bedrijf afhankelijk van het internet voor marketing, sales, klanten service, human recources en zelfs voor kritische bedrijfsapplicaties. Daarnaast gebruiken meer en meer bedrijven de cloud en worden meer en meer applicaties browser-based. Tegelijkertijd stijgt het aantal apparaten dat over een moderne browser beschikken spectaculair. De toekomstige HTML5 standaarden worden hierbij essentieel. Zonder deze standaarden zou het onmogelijk zijn om om te gaan met de virtuele lawine van nieuwe en vaak gepatenteerde browser technologie. Vandaag worden alle moderne browsers regelmatig automatisch geüpdatet, en uitzonderlijk zal een internetgebruiker geen toegang hebben tot de nieuwere HTML5 features. Dankzij deze automatische updates wordt het dure en arbeidsintensieve omgaan met backward en crossbrowser compatibility vrijwel geëlimineerd. Ook al is de standaard nog lang niet perfect en is het standaardiseren een aanslepend work in progress.. het loont voor bedrijven toch al de moeite om nu al HTML5 technologie te gebruiken waar dit relevant kan zijn waarbij op dit moment een hybride aanpak de voorkeur geniet voor het ontwikkelen van mobiele applicaties. Meer info over het onderzoek en alle broncode van de proof of concepts en pilootprojecten is terug te vinden op de projectwebsite www.html5explored.org.