Porting High-Performance Applications to the Web

Martijn
Croonen

HET NIEUWE WEB

Sinds de originele introductie van het internet eind twintigste eeuw is het web enorm gegroeid: van een platform voor het delen van voornamelijk (gelinkte) statische content met weinig interactie mogelijkheden naar een platform dat complexe applicaties ondersteunt. Dit begon allemaal met eenvoudig applicaties zoals het alom gekende Hotmail en later ook Gmail. Tegenwoordig kan het web gebruikt worden om complexe applicaties zoals volledige 3D spellen te gebruiken. Dit is mogelijk gemaakt door de ontwikkeling van nieuwe technologieën die hier centraal staan.

Nieuwe web technologieën
De basis van iedere website is nog steeds de HyperText markup Language (HTML). HTML wordt gebruikt om de structuur van een webpagina op te bouwen en webpagina’s kunnen bovendien naar elkaar linken om zo een website of web applicatie te vormen. Een web pagina kan met behulp van Cascading Style Sheets (CSS) verder opgemaakt worden. Later is hier ook nog JavaScript bijgekomen, dit is een programmeertaal die op het web gebruikt kan worden om acties op een webpagina uit te voeren zoals het animeren van element op een pagina. De afgelopen 6 jaar zijn deze drie basis technologieën verder uitgebreid met nieuwe functiona- liteit. Met een technologie als WebGL bijvoorbeeld is het mogelijk om 3D spellen te draaien op het web. Het bekende Angry Birds spel is dankzij WebGL bijvoorbeeld speelbaar op het internet. Verder geeft WebRTC ons de mogelijkheid om een chatroom of videochat applicatie te bouwen.

Web browsers
De ontwikkeling van web browsers staat niet stil, de afgelopen jaren zijn er nieuwe versies uitbracht voor alle beschikbare web browsers. Deze nieuwe versies werken sneller en stabieler dan deze van enkele jaren geleden en bevatten bovendien veel meer functionaliteit. We gebruiken deze web browsers tegenwoordig niet meer alleen om web pagina’s te bezoeken. Wanneer we een aantal jaren geleden wilden chatten gebruikte we massaal MSN Messenger, tegenwoordig opent iedereen zijn web browsers en surft naar Facebook. Op Facebook is het ook mogelijk om de eerder vermelde spellen te spelen. Met diensten zoals YeloTV en Netflix kunnen we ook online naar TV of films kijken. Zowel live als uitgesteld. Dit is opnieuw mogelijk gemaakt door nieuwe technologieën zoals het nieuwe video element. Web browsers zijn de afgelopen jaren een allround tool geworden die we voor verschillende doeleinden kunnen gebruiken.

Snelheid
Omdat web browsers de afgelopen jaren voor veel meer doeleinden gebruikt worden is de snelheid van de browser erg belangrijk. Niemand kijkt graag naar een haperend TV beeld of speelt graag een traag spel. Tegelijkertijd brengen alle nieuwe functionaliteiten een kost met zich mee. De focus van het onderzoek lag vooral bij de snelheid van web browsers en welke functies zijn ingebouwd om de web browser snel te houden. We hebben ook gekeken naar tools die ontwikkelaars helpen bij het ontwikkelen van applicaties van het web. Deze tools laten bijvoorbeeld toe om in de JavaScript code te duiken en zo in detail de werking te bestuderen. Het grafische aspect komt ook uitgebreid aan bod. De hoofdfunctie van een browser is nog steeds het weergegeven van de gevraagde data. Dit wil zeggen dat de HTML en CSS van een webpagina op het scherm getoond moet worden. De browser doet dit door op het scherm te tekenen: een computerscherm is zo een groot canvas (schilderij) waarop de browser kan tekenen. Ook het geheugengebruik van een applicatie is belangrijk, niet alle systemen beschikken over grote hoeveelheden werkgeheugen. Een systeem dat niet genoeg werkgeheugen heeft zal traag begin- nen werken. Omdat efficiënt geheugengebruik zo belangrijk is, was dit ook een groot aandachtspunt en onderzoekstopic.

WebGL Streaming
Omdat niet alle computers krachtig genoeg zijn om complexe web applicaties te draaien zoals de 3D spellen hebben we gezocht naar oplossingen. Voornamelijk mobiele toestellen hebben wel eens last van trage hardware. De oplossing die we hiervoor ontwikkelden bestaat uit een server en één of meerdere clients. De clients kunnen gebruik maken van de krachtige hardware in de centrale server om complexe grafische operaties uit te voeren. De server stuurt dan het resultaat terug naar de clients. Het zware werk wordt hier dus door de server uitgevoerd. De client krijgt alleen afbeeldingen van de centrale server terug, meer geavanceerde systemen kunnen ook gebruik maken van een video stream. Het belangrijkste aspect van deze oplossing is natuurlijk ook de snelheid. Vooral bij games is de latency belangrijk. Latency is de tijd die nodig is om te reageren op de input die het systeem krijgt van de gebruiker. Teveel latency zou de meeste spellen immers onspeelbaar maken. Om de latency zo laag mogelijk te houden is de oplossing meermaals en diepgaand geanalyseerd en op verschillende plaatsten geoptimaliseerd. Het resultaat is een snelle en werkbare remote rendering oplossing.

Slot
Na al het onderzoek en experimenten kunnen we besluiten dat het nieuwe web een aantrekkelijk platform is geworden dat een breed gamma aan applicaties kan ondersteunen. Ook de web browsers zijn enorm geëvolueerd de afgelopen jaren met verbeterde performantie en stabiliteit als gevolg. Tot slot kunnen we besluiten dat het mogelijk is om complexe 3D applicaties te gebruiken op minder krachtige systemen door te werken met een krachtige centrale server.

Download scriptie (4.14 MB)
Universiteit of Hogeschool
Universiteit Hasselt
Thesis jaar
2014