Optimiranje spletnih aplikacij v brskalniku

Pirnat, Uroš (author), Jakus, Grega (mentor)

Diplomska naloga obravnava načine optimiranja spletnih aplikacij v brskalniku. Poudarek je na optimiranju njihovih elementov, ki posredno ali neposredno vplivajo na uporabniško izkušnjo, ki postaja ena izmed ključnih konkurenčnih prednosti na trgu programske opreme. Razvijalci so prve brskalnike zasnovali kot bralnike enostavnih dokumentov in niso predvideli, da se bodo nekoč v njih izvajale tudi aplikacije z bogatim uporabniškim vmesnikom. Kljub temu, da brskalniki niso bili zasnovani za razvoj tovrstnih aplikacij, pa lahko s poznavanjem nekaterih metod in razumevanjem arhitekture brskalnika uporabnikom zagotovimo prijetno izkušnjo. Pomemben del vsakega optimiranja je merjenje uporabniške izkušnje, saj tako empirično preverimo učinek optimiranja. Preden pa se lotimo merjenja uporabniške izkušnje, je potrebno izbrati nabor količin, ki najbolj verodostojno odražajo uporabnikovo dojemanje aplikacije. V tem diplomskem delu sem na podlagi modela RAIL (ang. response, animation, idle, load), ki ga je razvilo ameriško podjetje Google, meril čas odziva vmesnika na uporabnikova dejanja (klik, tipkanje), hitrost izvajanja animacij in čas nalaganja. V prvem delu teoretičnega dela sem predstavil sodobne spletne aplikacije in okolje, v katerem delujejo. Poseben poudarek sem dal na osnovno nalogo vsakega brskalnika, to je upodabljanje spletnih dokumentov. Sodobne aplikacije so postale grafično bogate, saj tekmujejo z uporabniško izkušnjo, ki jim jo lahko zagotovijo klasične aplikacije z neposredno podporo operacijskega sistema. To pomeni, da moramo poskrbeti za številne animacije, prehode, slike, video vsebine itd. Razumevanje načina obravnave spletnih dokumentov je ključno, v kolikor se želimo izogniti pastem v obliki neučinkovite izrabe strojnih zmožnosti in posledično slabši uporabniški izkušnji. V drugem delu sem se posvetil optimiranju. Pri razvoju programske opreme so tipični cilji optimiranja zmanjšanje potrebnega števila strojnih virov, izboljšanje uporabniške izkušnje, zmanjšanje količine prenesenih podatkov, izboljševanje razširljivosti itd. Ti cilji se lahko med seboj prepletajo. Zmanjšanje količine prenesenih podatkov, na primer, pozitivno vpliva na uporabniško izkušnjo, saj se manjše količine podatkov prenesejo hitreje. Po drugi strani pa se nekatera optimiranja izključujejo. Tako stiskanje podatkov bistveno zmanjša količino podatkov, potrebnih za prenos, a po drugi strani poveča potrebo po procesni moči. Zato je zelo pomembno, da vemo, kaj želimo z optimiranjem doseči. V tem diplomskem delu sem vsa optimiranja presojal po tem, koliko, če sploh, so izboljšala vrednosti parametrov, ki vplivajo na uporabniško izkušnjo. V praktičnem delu sem izboljšave, opisane v teoretičnem delu, preizkusil v aplikaciji. Rezultati so bili dobri, se je pa jasno pokazalo, da imajo spletne tehnologije določene omejitve, ki so večinoma posledica odločitev iz začetnih let razvoja brskalnika. Takšnih primerov je veliko, eden izmed njih pa je dejstvo, da se HTML (hiperbesedilo, ang. hypertext markup language), CSS (prekrivni slogi, ang. cascading style sheets) in JavaScript koda spletne aplikacije tolmačijo in ne prevajajo v binarno kodo, kar se odraža v počasnejšem delovanju, saj se tolmačenje izvaja ob vsaki zahtevi po spletnem dokumentu, prevajanje pa je enkratno. Tudi zaradi omenjenega je zelo težko zagotoviti podobno uporabniško izkušnjo, kot jo ponujajo aplikacije, ki delujejo z neposredno podporo operacijskega sistema. Kljub temu pa prednosti v obliki enostavnosti razvoja, podpore na različnih operacijskih sistemih in napravah ipd. večinoma odtehtajo nekoliko slabšo odzivnost in počasnejše delovanje.

• Language: Slovenian
• Keywords: optimiranje, uporabniška izkušnja, brskalnik, splet, RAIL, hiperbesedilo, JavaScript
• Work type: Undergraduate thesis
• Organization: FE - Faculty of Electrical Engineering
• Year: 2016
• PID: 20.500.12556/RUL-84119
• Publication date in RUL: 11.07.2016

Secondary language

• Language: English
• Title: Client-side optimisation of web applications

Abstract

This thesis describes how to optimize web applications in a browser with the focus on user experience. Initially, web browsers were simple document readers and were not designed to be environments for applications with a rich user interface. Consequently, the architecture of a web browser is not ideal for the development of such applications, but with an understanding of a browser’s architecture, developers can still create a satisfactory user experience. An important part of the optimization of a user experience is measuring. This way we can empirically validate the results of the optimization. Before we start with measuring, it is necessary to define which metrics best reflect the user’s perception of the interaction with an application. In this thesis, the user experience is measured based on RAIL (response, animation, idle, load) model, developed by Google. In the first part of the thesis, a modern web application and its environment are presented. Because the user experience of web applications competes with the user experience in native applications, it is important that developers have knowledge about loading data from servers, rendering of a web page and JavaScript compiler. This way developers can avoid bad designs in the time of the development and consequently, a bad user experience. In the second part, the focus is on optimizing and techniques how to achieve it. The optimizations are grouped into three categories: optimizing of loading, optimization of JavaScript scripts and optimizing of rendering. In the last part of the thesis, all the described optimizations are tested on a real single-page application. Overall, most of the presented optimizations improved the user experience. It is challenging to provide the same quality of user experience in web browsers and in native applications. Some designs from the initial years of development are limiting. However, compared to native apps, web applications have many other advantages, such as simple development, support for multiple platforms and devices etc. and are a great solution for many problems.

• Keywords: optimization, user experience, browser, web, RAIL, hypertext, JavaScript