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.
[1] Abhinaba Basu: 2009, Back to basics: Reference counting garbage collection.
URL: http://blogs. msdn. com/ b/ abhinaba/ archive/ 2009/ 01/ 27/ back-to-basics-reference-counting-garbage-collection. aspx
[2] Adam Bergkvist (Ericsson), Daniel C. Burnett (Voxeo), C. A.: 2013, Webrtc 1.0: Real-time communication between browsers.
URL: http://www. w3. org/ TR/ webrtc/
[3] Adobe: n.d., Photoshop cc.
URL: http://www. adobe. com/ products/ photoshop. html?
[4] Anne van Kesteren: n.d.a, Xmlhttprequest - living standard.
URL: http://xhr. spec. whatwg. org/
[5] Anne van Kesteren, J.: n.d.b, Encoding - living standard.
URL: http://encoding. spec. whatwg. org/
[6] Ben Vanik: n.d., Webgl inspector.
URL: https: // chrome. google. com/ webstore/ detail/ webgl-inspector/ ogkcjmbhnfmlnielkjhedpcjomeaghda/
[7] blink dev: n.d., Intent to ship: Directwrite on windows.
URL: https://groups. google. com/ a/ chromium. org/ forum/ #! topic/ blink-dev/ gjzjDTlSENI
[8] C. J. Cheney: 1970, A nonrecursive list compacting algorithm.
URL: http: // dl. acm. org/ citation. cfm? doid= 362790. 362798
[9] Cameron McCormack: n.d., Web idl.
URL: http: // www. w3. org/ TR/ WebIDL/
[10] caniuse: n.d., Can i use - webgl.
URL: http: // caniuse. com/ #search= webgl
[11] Cisco Systems: n.d., Ipv4 address depletion.
URL: http: // www. cisco. com/ web/ about/ ac123/ ac147/ archived_ issues/ ipj_ 10-3/ 103_ addr-dep. html
[12] Cody Krieger: n.d., gfxcardstatus.
URL: http: // gfx. io/
[13] Daniel Clifford: n.d., Google i/o 2012 - breaking the javascript speed limit with v8.
URL: https: // www. youtube. com/ watch? v= UJPdhx5zTaw
[14] Dean Jackson (Apple Inc.): n.d., Webgl specification.
URL: https: // www. khronos. org/ registry/ webgl/ specs/ 1. 0/ , Year = 2013 80
[15] Developers, T. X. T.: n.d., The x toolkit: Webgl for scientific visualization.
URL: https: // github. com/ xtk/ X# readme
[16] Ecma International: n.d., Ecmascript® language specification.
URL: http: // www. ecma-international. org/ ecma-262/ 5. 1/
[17] Erik Dahlstrom, Opera Software et al.: 2011, Scalable vector graphics (svg) 1.1 (second edition).
URL: http: // www. w3. org/ TR/ SVG11/
[18] Erik Moller, P.: n.d., Chasing pixels, blinkon 2.0.
URL: http: // people. opera. com/ emoller/ blinkon2/
[19] GitHub: n.d., Deploying at github.
URL: https: // github. com/ blog/ 1241-deploying-at-github
[20] Google Developers: n.d., Real-time communication with webrtc: Google i/o 2013.
URL: http: // www. youtube. com/ watch? v= p2HzZkd2A40
[21] Google, I.: n.d.a, Quantum computing playground.
URL: http: // qcplayground. withgoogle. com/
[22] Google, I.: n.d.b, Web metrics: Size and number of resources.
URL: https: // developers. google. com/ speed/ articles/ web-metrics
[23] Google, Inc.: n.d.a, Angle: Almost native graphics layer engine.
URL: https: // code. google. com/ p/ angleproject/
[24] Google Inc.: n.d.b, Garbage collection for blink c++ objects.
URL: http: // www. chromium. org/ blink/ blink-gc
[25] Google, Inc.: n.d.c, Javascript memory profiling.
URL: https: // developers. google. com/ chrome-developer-tools/ docs/ javascript-memory-profiling
[26] Google, Inc.: n.d.d, Quic geek faq.
URL: https: // docs. google. com/ a/ martijnc. be/ document/ d/ 1lmL9EF6qKrk7gbazY8bIdvq3Pno2Xj_ l_ YShP40GLQE/ edit
[27] Google Inc.: n.d.e, Skia, a 2d graphics library.
URL: https: // code. google. com/ p/ skia/
[28] Google, Inc.: n.d.f, V8 javascript engine.
URL: https: // code. google. com/ p/ v8/
[29] Google Inc.: n.d.g, Webrtc.
URL: http: // tools. ietf. org/ html/ rfc5245
[30] Google, Inc.: n.d.h, Webrtc architecture.
URL: http: // www. webrtc. org/ reference/ architecture
[31] http://caniuse.com/: n.d.a, Can i use - opus codec.
URL: http: // caniuse. com/ #search= opus
[32] http://caniuse.com/: n.d.b, Can i use - webm video format.
URL: http: // caniuse. com/ #search= vp8
[33] I. Fette (Google Inc.), A.: n.d., The websocket protocol.
URL: https: // tools. ietf. org/ html/ rfc6455 , Year = 2011 81
[34] Ian Hickson (Google Inc.): n.d., Html, living standard.
URL: http: // www. whatwg. org/ specs/ web-apps/ current-work/ multipage/
[35] IETF: 1999, Hypertext transfer protocol – http/1.1.
URL: http: // www. ietf. org/ rfc/ rfc2616. txt
[36] IETF: 2008, The transport layer security (tls) protocol.
URL: http: // tools. ietf. org/ html/ rfc5246/
[37] IETF: n.d., The internet engineering task force.
URL: http: // www. ietf. org/
[38] J. Rosenberg: n.d., Interactive connectivity establishment (ice): A protocol for network address translator (nat) traversal for offer/answer protocols.
URL: http: // tools. ietf. org/ html/ rfc5245
[39] Jake Brutlag: n.d., Speed matters.
URL: http: // googleresearch. blogspot. be/ 2009/ 06/ speed-matters. html
[40] Jatinder Mann, Microsoft Corp.: n.d.a, High resolution time.
URL: http: // www. w3. org/ TR/ hr-time/
[41] Jatinder Mann, Microsoft Corp., Zhiheng Wang, Google Inc., A.: n.d.b, User timing.
URL: http: // www. w3. org/ TR/ user-timing/
[42] Kentaro Hara: n.d.a, Javascript bindings.
URL: https: // docs. google. com/ a/ google. com/ presentation/ d/ 1M8OFkFXg6bDURncZMw01if2A89YHYl94XmWT1pjvvJI
[43] Kentaro Hara: n.d.b, Multi-process architecture.
URL: http: // www. chromium. org/ developers/ design-documents/ multi-process-architecture
[44] Kevin Millikin, F.: n.d., A new crankshaft for v8.
URL: http: // blog. chromium. org/ 2010/ 12/ new-crankshaft-for-v8. html
[45] Lilli Thompson: n.d., Console to chrome.
URL: http: // console-to-chrome. appspot. com/
[46] M. Baugher, D. McGrew, M. E. K.: n.d., The secure real-time transport protocol (srtp).
URL: http: // tools. ietf. org/ html/ rfc3711
[47] M. Belshe, R. Peon, M.: n.d., Hypertext transfer protocol version 2.
URL: http: // tools. ietf. org/ html/ draft-ietf-httpbis-http2-12
[48] Mads Ager: n.d., Google i/o 2009 - v8: High performance javascript engine.
URL: https: // www. youtube. com/ watch? v= FrufJFBSoQY
[49] Microsoft: n.d., Uniscribe.
URL: http: // msdn. microsoft. com/ en-us/ library/ windows/ desktop/ dd374091( v= vs. 85) .aspx
[50] Micrsoft: n.d., Directwrite.
URL: http: // msdn. microsoft. com/ en-us/ library/ windows/ desktop/ dd368038( v= vs. 85) .aspx
[51] Mozilla, E.: 2013, Epic citadel demo shows the power of the web as a platform for gaming.
URL: https: // blog. mozilla. org/ futurereleases/ 2013/ 05/ 02/ epic-citadel-demo-shows-the-power-of-the-web-as-a-platform-for-gaming/
[52] notmasteryet: n.d., jpgjs.
URL: https: // github. com/ notmasteryet/ jpgjs
[53] Paul Bakaus: n.d., The illusion of motion.
URL: http://paulbakaus. com/ tutorials/ performance/ the-illusion-of-motion/
[54] Qt Project Hosting: n.d., Qwebpage class reference.
URL: http: // qt-project. org/ doc/ qt-4. 8/ qwebpage. html
[55] R. Stewart, Q. Xie, K. C. E.: n.d., Stream control transmission protocol.
URL: http: // www. ietf. org/ rfc/ rfc2960
[56] Rovio: n.d., Angry birds.
URL: http: // chrome. angrybirds. com/
[57] StatCounter: n.d., Statcounter global stats.
URL: http: // gs. statcounter. com/ #all-os-ww-yearly-2008-2014
[58] Technologies, A.: n.d., The akamai state of the internet report.
URL: http: // www. akamai. com/ stateoftheinternet/
[59] The Chromium Authors: n.d.a, Adding traces to chromium/webkit/javascript.
URL: http: // dev. chromium. org/ developers/ how-tos/ trace-event-profiling-tool/ tracing-event-instrumentation
[60] The Chromium Authors: n.d.b, The chromium projects.
URL: http: // www. chromium. org/
[61] The Chromium Authors: n.d.c, The chromium source code.
URL: https: // code. google. com/ p/ chromium/ codesearch
[62] The Chromium Authors: n.d.d, Content module.
URL: http: // www. chromium. org/ developers/ content-module
[63] The Chromium Authors: n.d.e, Gpu command buffer.
URL: http: // www. chromium. org/ developers/ design-documents/ gpu-command-buffer
[64] The Chromium Authors: n.d.f, Ubercompositor - chrome rendering model.
URL: https: // docs. google. com/ a/ chromium. org/ document/ d/ 1ziMZtS5Hf8azogi2VjSE6XPaMwivZSyXAIIp0GgInNA/
[65] The Google Chrome Team: n.d., The evolution of the web.
URL: http: // www. evolutionoftheweb. com/
[66] The HarfBuzz Authors: n.d., Harfbuzz opentype text shaping engine.
URL: https: // github. com/ behdad/ harfbuzz
[67] The Khronos Group: n.d.a, Opengl es 2.0 for the web.
URL: http: // www. whatwg. org/ specs/ web-apps/ current-work/ multipage/ the-canvas-element. html
[68] The Khronos Group: n.d.b, Opengl shading language.
URL: http: // www. opengl. org/ documentation/ glsl/
[69] The Khronos Group: n.d.c, Sharing resources across webglrendering contexts.
URL: http: // www. khronos. org/ webgl/ wiki/ SharedResouces 83
[70] The Khronos Group: n.d.d, Webgl security.
URL: http: // www. khronos. org/ webgl/ security/
[71] The Nielsen Company: n.d., An era of growth: the cross-platform report.
URL: http: // www. nielsen. com/ us/ en/ reports/ 2014/ an-era-of-growth-the-cross-platform-report. html
[72] The peering team: n.d., The peerjs library.
URL: http: // peerjs. com/
[73] TransGaming Inc.: n.d., Swiftshader.
URL: http: // transgaming. com/ swiftshader
[74] W3C: n.d., The world wide web consortium.
URL: http: // www. w3. org/
[75] WHATWG: n.d.a, The canvas element.
URL: http: // www. khronos. org/ webgl/
[76] WHATWG: n.d.b, The web hypertext application technology working group.
URL: http: // www. whatwg. org/
[77] Zhiheng Wang: n.d., Navigation timing.
URL: http: // www. w3. org/ TR/ navigation-timing/