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.

Bibliografie

  1. [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. [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. [3]  Adobe: n.d., Photoshop cc.
    URL: http://www. adobe. com/ products/ photoshop. html?

  4. [4]  Anne van Kesteren: n.d.a, Xmlhttprequest - living standard.
    URL: http://xhr. spec. whatwg. org/

  5. [5]  Anne van Kesteren, J.: n.d.b, Encoding - living standard.
    URL: http://encoding. spec. whatwg. org/

  6. [6]  Ben Vanik: n.d., Webgl inspector.
    URL: https: // chrome. google. com/ webstore/ detail/ webgl-inspector/ ogkcjmbhnfmlnielkjhedpcjomeaghda/

  7. [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. [8]  C. J. Cheney: 1970, A nonrecursive list compacting algorithm.
    URL: http: // dl. acm. org/ citation. cfm? doid= 362790. 362798

  9. [9]  Cameron McCormack: n.d., Web idl.
    URL: http: // www. w3. org/ TR/ WebIDL/

  10. [10]  caniuse: n.d., Can i use - webgl.
    URL: http: // caniuse. com/ #search= webgl

  11. [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. [12]  Cody Krieger: n.d., gfxcardstatus.
    URL: http: // gfx. io/

  13. [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. [14]  Dean Jackson (Apple Inc.): n.d., Webgl specification.
    URL: https: // www. khronos. org/ registry/ webgl/ specs/ 1. 0/ , Year = 2013 80

  1. [15]  Developers, T. X. T.: n.d., The x toolkit: Webgl for scientific visualization.
    URL: https: // github. com/ xtk/ X# readme

  2. [16]  Ecma International: n.d., Ecmascript® language specification.
    URL: http: // www. ecma-international. org/ ecma-262/ 5. 1/

  3. [17]  Erik Dahlstrom, Opera Software et al.: 2011, Scalable vector graphics (svg) 1.1 (second edition).
    URL: http: // www. w3. org/ TR/ SVG11/

  4. [18]  Erik Moller, P.: n.d., Chasing pixels, blinkon 2.0.
    URL: http: // people. opera. com/ emoller/ blinkon2/

  5. [19]  GitHub: n.d., Deploying at github.
    URL: https: // github. com/ blog/ 1241-deploying-at-github

  6. [20]  Google Developers: n.d., Real-time communication with webrtc: Google i/o 2013.
    URL: http: // www. youtube. com/ watch? v= p2HzZkd2A40

  7. [21]  Google, I.: n.d.a, Quantum computing playground.
    URL: http: // qcplayground. withgoogle. com/

  8. [22]  Google, I.: n.d.b, Web metrics: Size and number of resources.
    URL: https: // developers. google. com/ speed/ articles/ web-metrics

  9. [23]  Google, Inc.: n.d.a, Angle: Almost native graphics layer engine.
    URL: https: // code. google. com/ p/ angleproject/

  10. [24]  Google Inc.: n.d.b, Garbage collection for blink c++ objects.
    URL: http: // www. chromium. org/ blink/ blink-gc

  11. [25]  Google, Inc.: n.d.c, Javascript memory profiling.
    URL: https: // developers. google. com/ chrome-developer-tools/ docs/ javascript-memory-profiling

  12. [26]  Google, Inc.: n.d.d, Quic geek faq.
    URL: https: // docs. google. com/ a/ martijnc. be/ document/ d/ 1lmL9EF6qKrk7gbazY8bIdvq3Pno2Xj_ l_ YShP40GLQE/ edit

  13. [27]  Google Inc.: n.d.e, Skia, a 2d graphics library.
    URL: https: // code. google. com/ p/ skia/

  14. [28]  Google, Inc.: n.d.f, V8 javascript engine.
    URL: https: // code. google. com/ p/ v8/

  15. [29]  Google Inc.: n.d.g, Webrtc.
    URL: http: // tools. ietf. org/ html/ rfc5245

  16. [30]  Google, Inc.: n.d.h, Webrtc architecture.
    URL: http: // www. webrtc. org/ reference/ architecture

  17. [31]  http://caniuse.com/: n.d.a, Can i use - opus codec.
    URL: http: // caniuse. com/ #search= opus

  18. [32]  http://caniuse.com/: n.d.b, Can i use - webm video format.
    URL: http: // caniuse. com/ #search= vp8

  19. [33]  I. Fette (Google Inc.), A.: n.d., The websocket protocol.
    URL: https: // tools. ietf. org/ html/ rfc6455 , Year = 2011 81

     

  1. [34]  Ian Hickson (Google Inc.): n.d., Html, living standard.
    URL: http: // www. whatwg. org/ specs/ web-apps/ current-work/ multipage/

  2. [35]  IETF: 1999, Hypertext transfer protocol – http/1.1.
    URL: http: // www. ietf. org/ rfc/ rfc2616. txt

  3. [36]  IETF: 2008, The transport layer security (tls) protocol.
    URL: http: // tools. ietf. org/ html/ rfc5246/

  4. [37]  IETF: n.d., The internet engineering task force.
    URL: http: // www. ietf. org/

  5. [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

  6. [39]  Jake Brutlag: n.d., Speed matters.
    URL: http: // googleresearch. blogspot. be/ 2009/ 06/ speed-matters. html

  7. [40]  Jatinder Mann, Microsoft Corp.: n.d.a, High resolution time.
    URL: http: // www. w3. org/ TR/ hr-time/

  8. [41]  Jatinder Mann, Microsoft Corp., Zhiheng Wang, Google Inc., A.: n.d.b, User timing.
    URL: http: // www. w3. org/ TR/ user-timing/

  9. [42]  Kentaro Hara: n.d.a, Javascript bindings.
    URL: https: // docs. google. com/ a/ google. com/ presentation/ d/ 1M8OFkFXg6bDURncZMw01if2A89YHYl94XmWT1pjvvJI

  10. [43]  Kentaro Hara: n.d.b, Multi-process architecture.
    URL: http: // www. chromium. org/ developers/ design-documents/ multi-process-architecture

  11. [44]  Kevin Millikin, F.: n.d., A new crankshaft for v8.
    URL: http: // blog. chromium. org/ 2010/ 12/ new-crankshaft-for-v8. html

  12. [45]  Lilli Thompson: n.d., Console to chrome.
    URL: http: // console-to-chrome. appspot. com/

  13. [46]  M. Baugher, D. McGrew, M. E. K.: n.d., The secure real-time transport protocol (srtp).
    URL: http: // tools. ietf. org/ html/ rfc3711

  14. [47]  M. Belshe, R. Peon, M.: n.d., Hypertext transfer protocol version 2.
    URL: http: // tools. ietf. org/ html/ draft-ietf-httpbis-http2-12

  15. [48]  Mads Ager: n.d., Google i/o 2009 - v8: High performance javascript engine.
    URL: https: // www. youtube. com/ watch? v= FrufJFBSoQY

  16. [49]  Microsoft: n.d., Uniscribe.
    URL: http: // msdn. microsoft. com/ en-us/ library/ windows/ desktop/ dd374091( v= vs. 85) .aspx

  17. [50]  Micrsoft: n.d., Directwrite.
    URL: http: // msdn. microsoft. com/ en-us/ library/ windows/ desktop/ dd368038( v= vs. 85) .aspx

  18. [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/

  1. [52]  notmasteryet: n.d., jpgjs.
    URL: https: // github. com/ notmasteryet/ jpgjs

  2. [53]  Paul Bakaus: n.d., The illusion of motion.
    URL: http://paulbakaus. com/ tutorials/ performance/ the-illusion-of-motion/

  3. [54]  Qt Project Hosting: n.d., Qwebpage class reference.
    URL: http: // qt-project. org/ doc/ qt-4. 8/ qwebpage. html

  4. [55]  R. Stewart, Q. Xie, K. C. E.: n.d., Stream control transmission protocol.
    URL: http: // www. ietf. org/ rfc/ rfc2960

  5. [56]  Rovio: n.d., Angry birds.
    URL: http: // chrome. angrybirds. com/

  6. [57]  StatCounter: n.d., Statcounter global stats.
    URL: http: // gs. statcounter. com/ #all-os-ww-yearly-2008-2014

  7. [58]  Technologies, A.: n.d., The akamai state of the internet report.
    URL: http: // www. akamai. com/ stateoftheinternet/

  8. [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

  9. [60]  The Chromium Authors: n.d.b, The chromium projects.
    URL: http: // www. chromium. org/

  10. [61]  The Chromium Authors: n.d.c, The chromium source code.
    URL: https: // code. google. com/ p/ chromium/ codesearch

  11. [62]  The Chromium Authors: n.d.d, Content module.
    URL: http: // www. chromium. org/ developers/ content-module

  12. [63]  The Chromium Authors: n.d.e, Gpu command buffer.
    URL: http: // www. chromium. org/ developers/ design-documents/ gpu-command-buffer

  13. [64]  The Chromium Authors: n.d.f, Ubercompositor - chrome rendering model.
    URL: https: // docs. google. com/ a/ chromium. org/ document/ d/ 1ziMZtS5Hf8azogi2VjSE6XPaMwivZSyXAIIp0GgInNA/

  14. [65]  The Google Chrome Team: n.d., The evolution of the web.
    URL: http: // www. evolutionoftheweb. com/

  15. [66]  The HarfBuzz Authors: n.d., Harfbuzz opentype text shaping engine.
    URL: https: // github. com/ behdad/ harfbuzz

  16. [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

  17. [68]  The Khronos Group: n.d.b, Opengl shading language.
    URL: http: // www. opengl. org/ documentation/ glsl/

  18. [69]  The Khronos Group: n.d.c, Sharing resources across webglrendering contexts.
    URL: http: // www. khronos. org/ webgl/ wiki/ SharedResouces 83

  1. [70]  The Khronos Group: n.d.d, Webgl security.
    URL: http: // www. khronos. org/ webgl/ security/

  2. [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

  3. [72]  The peering team: n.d., The peerjs library.
    URL: http: // peerjs. com/

  4. [73]  TransGaming Inc.: n.d., Swiftshader.
    URL: http: // transgaming. com/ swiftshader

  5. [74]  W3C: n.d., The world wide web consortium.
    URL: http: // www. w3. org/

  6. [75]  WHATWG: n.d.a, The canvas element.
    URL: http: // www. khronos. org/ webgl/

  7. [76]  WHATWG: n.d.b, The web hypertext application technology working group.
    URL: http: // www. whatwg. org/

  8. [77]  Zhiheng Wang: n.d., Navigation timing.
    URL: http: // www. w3. org/ TR/ navigation-timing/ 

 

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