rendering och manipulering av dom rendering and manipulation of dom

78 Pages·2016·1.97 MB·Swedish

Mall skapad av Henrik

RENDERING OCH MANIPULERING
AV DOM
Undersökning av AngularJS och ReactJS
RENDERING AND MANIPULATION
OF DOM
Examination of AngularJS and ReactJS
Examensarbete inom huvudområdet Datalogi
Grundnivå 30 högskolepoäng
Vårtermin 2016
Erik Åstrand
Handledare:
Examinator: Mikael Berndtsson
Sammanfattning
Webben växer och webbapplikationer blir mer och mer komplexa och innehållsrika.
Med detta så ska dessa växande applikationer även kunna presenteras på ett tilltalande
och effektivt sätt. Jättarna Facebook, Twitter, Instagram och små bloggar har alla
börjat använda sig av en teknik för att kunna dynamiskt ladda in ytterligare innehåll på
en sida utan att behöva ladda om den. Denna teknik kallas för Infinite Scroll eller
oändlig scrollning. Infinite Scroll kan resultera i enormt stort innehåll vilket tidigare
studier visar på att det bidrar till bristande prestanda för rendering och manipulering
av innehållet. Arbetet kommer utföra ett experiment där målet är att undersöka hur
två populära SPA-ramverk AngularJS och ReactJS hanterar detta problem.
Nyckelord: Infinite Scroll, AngularJS, ReactJS, DOM
Innehållsförteckning
1. Introduktion ...........................................................................................................1
2. Bakgrund ...............................................................................................................2
2.1. Single-Page Application ................................................................................................2
2.1.1. AngularJS 3
2.1.2. ReactJS ...............................................................................................................................4
2.2. Infinite Scroll .................................................................................................................5
3. Problemformulering .............................................................................................7
3.1. Metodbeskrivning ..........................................................................................................7
3.1.1. Experiment ..........................................................................................................................7
3.1.2. Alternativa metoder ..............................................................................................................8
3.1.3. Metoddiskussion ..................................................................................................................8
3.1.4. Forskningsetik ....................................................................................................................9
4. Genomförande ....................................................................................................10
4.1. Förstudie ....................................................................................................................10
4.2. Progression ................................................................................................................10
4.2.1. Grundstrukturen .................................................................................................................10
4.2.2. Manipulering av DOM .........................................................................................................13
4.2.3. AngularJS ..........................................................................................................................13
4.2.4. ReactJS .............................................................................................................................15
4.3. Pilotstudie ...................................................................................................................17
4.3.1. Specifikationer ...................................................................................................................17
4.3.2. Resultat av pilotstudie ........................................................................................................17
5. Utvärdering ..........................................................................................................19
5.1 Presentation av undersökning ......................................................................................19
5.2 Analys ...........................................................................................................................19
5.2.1 Mätning av webbläsare ........................................................................................................19
5.2.1.1 Rendering .........................................................................................................................19
5.2.1.3 Slutsats .............................................................................................................................23
5.2.2 Mätning av ramverken .........................................................................................................24
5.2.2.2 Slutsats .............................................................................................................................26
5.2.2.3 Manipulering .....................................................................................................................26
5.2.2.4 Slutsats .............................................................................................................................28
6. Avslutande diskussion .......................................................................................30
6.1 Sammanfattning ..........................................................................................................30
6.2 Diskussion ...................................................................................................................30
6.3 Framtida arbeten .........................................................................................................31
Referenser ................................................................................................................33
1. Introduktion
Den snabbt ökande mängden av media och data som används på webben idag öpnnar upp
nya utmaningar för webbutvecklare att på bästa sätt presentera innehållet. Zapeda & Chapa
(2007) hävdar att under de senaste åren så har webbutvecklare börjat titta på olika sätt att
hantera detta på ett effektivt sätt och kunna presentera det för användaren. Single-Page
Application (SPA) är ett sätt att strukturera en webbsida så att allt innehåll finns på en och
samma sida vilket eliminerar behovet av att ladda om sidan när ytterligare innehåll måste
läggas till. I arbetet ska vi titta närmare på två populära SPA-ramverk AngularJS och
ReactJS, skapade av Google och Facebook. Infinite Scroll eller oändlig scroll är en teknik för
att dynamiskt ladda in ytterligare innehåll på en sida och skapa en oändlig ström av innehåll.
Infinite Scroll användas på populära sociala medier som Facebook, Twitter och Instagram
för att hantera deras enorma flöden och presentera det på ett effektivt sätt för användaren
(Koukouletsos, Moustris & Paliatsos, 2014).
Zhu & Reddi (2013) menar på att DOM (Document Object Model) har ett problem att
hantera trädstrukturer av ökande storlek och det är just detta som Infinite Scroll gör.
AngularJS och ReactJS hanterar rendering och manipulering av DOM på två olika sätt där
AngularJS har en mer konservativt tillvägagångssätt medan ReactJS använder sig av en
teknik kallad Virtuell DOM.
Arbetet kommer utvärderas med ett experiment som undersöker hur laddningstiden för
rendering och manipulering av ett ökande DOM-trädstorlek hanteras av de både SPA-
ramverken. Arbetet tar inspiration för experimentet av en tidigare studie utförd utav (Zhu &
Reddi, 2013) där man undersökte hur ökande trädstorlek av DOM påverkade laddningstiden
för rendering och manpulering av DOM.
!1
2. Bakgrund
2.1. Single-Page Application
Zapeda & Chapa (2007) menar att Multi-Page Applications (MPA) eller den klassiska
strukturen för en webbapplikation kräver oftast en förfrågan av användaren genom en länk
eller formulär för att sedan behöva vänta på att webbservern skall svara. Efter att servern har
skickat tillbaka en ny sida till klienten så uppdateras sidan med den nya informationen (Se
Figur 1). Problemet med denna klassiska MPA-modellen är att sidan behöver laddas om på
detta vis varje gång användaren begär ny information. Detta leder till bristande prestanda,
överdriven bandbredd, begränsad interaktivitet och redundant programmeringskod.
De senaste åren har modern webbutveckling försökt eftersträva klassiska desktop-
applikationernas mer naturliga designmodell där användargränssnittet är integrerat i ett
enda fönster. I motsats till MPA där man har flera sidor som har sin egna information på
varje sida så har man endast ett fysiska fönster där man dynamiskt laddar in ny information
vid behov. Denna designmodell har en betydligt bättre användbarhet då man får en mer
interaktiv applikation med snabbare responstider och laddningstider samt bekvämare
navigering (Tesařík, Doležal & Kollmann, 2008). Adaptionen av denna designmodell till
webben fick namnet Single-Page Applications (SPA).
Februari 2005 i artikeln ”AJAX: A New Approach to Web Applications” så myntades termen
AJAX (Asynchronous JavaScript and XML) av Jesse James Garrett. Ett väldigt stort intresse
för AJAX uppstod efter artikeln blev publicerad och man började snabbt utforska vilka
möjligheter som kom med AJAX. Detta var inte ett nytt programmeringsspråk eller teknik
utan det var mer ett nytt sätt att designa och utveckla webbapplikationer. AJAX byggde på
existerande tekniker som HTML, DOM, XML och XHR. AJAX fungerar som ett tredje lager
mellan klienten och servern som gör det möjligt att implementera denna SPA-modell på
webben. AJAX kan i bakgrunden kommunicera med servern för att sedan skicka vidare
information till klienten och dynamiskt ändra informationen på en sida, vilket tar bort
behovet av att ständigt ladda om sidan (Zapeda & Chapa, 2007). Se Figur 1 för visualisering
av asynkron server/klient-interaktion.
Figur 1
Synkron(MPA) & asynkron(SPA) klient/server-interaktion
!2
2.1.1. AngularJS
Angular är ett open-source SPA-ramverk utvecklat av Google och är uppbyggt med en MVC
(Model-View-Controller) arkitektur. Angular har över de senaste åren blivit ett populärt val
för att snabbt skapa dynamiska HTML-sidor och etablerat sig som det mest populäraste
SPA-ramverket enligt Google Trends, sökresultat och Github-aktivitet. (Scully, Fraunhofer &
Jung, 2015) hävdar att en av teknikerna som förenklar implementationen av SPA är en
teknik kallad data-bindning som Angular använder. Data-bindning i Angular fungerar som
så att en modells data är direkt bunden till element i motsvarande vy. Om data ändras i
modellen så ändras det även direkt i den motsvarande vyn och vice-versa om ändringar sker
i vyn så ändras även modellen. Denna typ av länkning gör att det inte är någon direkt DOM-
manipulering så som i jQuery. Angular har istället introducerat något som kallas för direktiv
där man kan direkt binda ett element med en modell.

Figur 2: Kodexempel över data-bindning med AngularJS

I Figur 2 så visas hur en simpel data-bindning fungerar i Angular. Här så binder vi input-
elementet i vyn till en model (myName) och Angular förstår nu om användaren ändrar
värdet i input-elementet så uppdateras detta värde i motsvarande modell (myName) och
skriver ut värdet från modellen med ”{{myName}}”. Figur 3 visar kontrastet till jQuery där
varje interaktivt DOM-element, så som ett input-element, har lyssnare som reagerar på när
ett event har inträffat och i sin tur kör igång funktioner i respons. I exemplet med Angular så
har vi ingen direkt interaktion med JavaScript vilket gör att vi får betydligt mindre
redundant kod.

Figur 3: Kodexempel över data-bindning med jQuery

!3
2.1.2. ReactJS
ReactJS är ett annat SPA-ramverk som FaceBook skapat för användning på sin egna
plattform och blev i maj 2013 open-source. React använder en arkitektur som liknar det som
omnämns som one-way dataflow och enligt Demetrescu, Finocchi & Ribichini (2011) innebär
det att datan endast strömmar en väg. Datan kan bara föras åt ett håll igenom olika lager
med sitt egna ansvarsområde och datan kan endast åka från förälder till barn och inte
tillbaka. I AngularJS kan datan däremot skickas åt båda håll eftersom varje DOM-element
har en direkt motsvarande hanterare i modellen. När ett DOM-element ändras i vyn så
ändras det direkt i modellen och vice-versa, denna struktur kallas för två-vägs strömning av
data (T. Scully, 2015). I kontrast till AnglarJS hanterar man DOM mer reaktivt i React. När
ett DOM-element har ändras registreras detta genom event för att sedan avgöra vad som
ändrats och till slut renderar ändringen i vyn, en vägs strömning av data (Salvaneschi,
Margara & Tamburrelli, 2015). Se Figur 4 för exempel över hur en komponent i React
skapas och hur man hanterar uppdatering av den komponenten.
Figur 4: Kodexempel över data-bindning med ReactJS
För att effektivisera denna reaktiva process så har React implementerat en annat teknik för
att hantera DOM kallad “Virtuell DOM” (Virtual DOM). Psaila (2008) menar att Virtuell
DOM är en teknik för att skapa en abstrakt representation av den aktuella DOM och används
för att spåra och uppdatera ändringar i DOM. Virtuell DOM används som en representation
av DOM och när en ändring i DOM har skett så avgör man vad ändringen var genom att
jämföra representationen av den tidigare oförändrade DOM med den nuvarande förändrade
DOM och sedan rendera ut ändringen i det verkliga DOM. Detta leder till att det går
betydligt snabbare att avgöra vart ändringen skett och vilken data som ändrats eftersom man
arbetar med en virtuell representation av DOM snarare än att direkt jobba med DOM. DOM
har alltid haft problem med att lagra stor mängd data i minnet och framförallt hålla reda på
en stormängd DOM-element. Denna teknik utesluter detta problem eftersom DOM inte
behöver oroa sig över vilka element som hör ihop utan behöver bara rita ut det på sättet som
Virtuell DOM säger.
!4
2.2. Infinite Scroll
Webbplattformer som FaceBook, Twitter och Instagram har under de senaste åren
utvecklats väldigt mycket och är nu mer komplexa, innehållsrika och användbara. Dessa
tjänster har ett behov att kunna hantera väldigt stora mängder information och samtidigt
visa det på ett bra sätt för användaren. Med den mobila revolutionen medföljde ett behov
från användaren på en högre standard för design och bekvämlighet (Zhu & Reddi, 2013). Ett
utav dessa behov var att kunna få in så mycket innehåll som möjligt på en och samma sida
för att användaren inte skulle vara tvungen att ladda om sidan för att få in ytterligare
innehåll. Det skulle inte fungera att ladda in t.ex. FaceBooks hela flöde vid initiala
renderingen av sidan. Så man delade upp flödet i delar där man laddar in en liten del av
flödet först och sedan när användaren gått igenom det stycket så laddas en ytterligare del av
flödet. Denna teknik för scrollning har fått namnet Infinite Scroll eller oändlig scrollning och
är en teknik för att dynamiskt ladda in nytt innehåll när användaren når botten av sidan för
att undvika så kallad paginering där man kommer till en ny sida för att ladda in ytterligare
innehåll (Breton, Bergeron & Hallé, 2015). Infinite Scroll används i praktiken väldigt ofta i
bloggplattformer, sociala medier och E-handelssidor för att ge användaren uppfattningen av
en oändlig ström information.
Infinite Scroll är en teknik som har sina för- och nackdelar och studier visar på att det i vissa
fall undvikas. Koukouletsos, Moustris & Paliatsos (2014) hävdar att ur ett användbarhets
perspektiv så har Infinite Scroll specifika tillämpningsområden där innehållet flödar i en
kontinuerlig ström. Några exempel på tjänster som använder sig av denna teknik är bland
annat FaceBook, Twitter och Instagram. Dessa är perfekta tillämpningsområden då man vill
ha kvar användarens sin plattform så länge som möjligt och Infinite Scroll gör så att
användarens inte tröttnar på att behöva ladda ny sida för att fortsätta i flödet.
Infinite Scroll är ett intressant forskningsområde då ingen direkt forskningsundersökning ur
ett prestandaperspektiv har gjorts inom området. Infinite Scroll handlar som sagt om att
dynamiskt ladda in nytt innehåll på en sida när användaren har gått igenom det
förrenderade innehållet. Denna studie är relevant inte bara för att se hur implementationen
av Infinite Scroll hanteras av de både SPA-ramverken Angular och React. Utan även för hur
de både ramverken hanterar rendering och manipulering av DOM vilket är en oerhört viktig
egenskap för SPA.

!5
Figur 6: Visualisering över paginering kontra Infinite Scroll
!6
3. Problemformulering
Enligt Zhu & Reddi (2013) så blir webben mer och mer användbar och webbapplikationer
mer interaktiva och komplexa. Med den ökade komplexiteten i webbapplikationer så
medföljde problemet att hantera denna ökande komplexitet och inte få för höga
laddningstider i applikationerna. Laddning- och renderingstid är viktigt att fokusera på som
webbutvecklare eftersom användaren har dåligt tålamod, framförallt mobila användare.
Studier visar på att användaren förväntar sig att en sida ska vara laddat inom två sekunder
och 40% av användarna vägrar vänta längre än tre sekunder innan dom lämnar sidan
(Mickens, 2010).
Det finns olika orsaker till varför laddningstiden är problematisk och det problem vi ska
undersöka närmare på är själva DOM-rendering i en webbapplikation. Zhu & Reddi (2013)
gjorde ett experiment där man undersökte hur laddningstiden påverkas av ökande storlek på
DOM-trädet. De kom fram till att när DOM-trädet expanderar så påverkas laddningstiden av
applikationen negativt. Arbetet ska utföra ett liknande experiment med en addition utav att
testa manipulera denna data för att bäst simulera Infinite Scroll. Om man tar Twitter som
exempel så lägger man dynamiskt in ny information med Infinite Scroll, men alla tweets är
inte statiska efter det. Om användaren har gått igenom ett långt flöde och börjar bygga upp
ett stort DOM-träd är det intressant att se hur de både ramverken hanterar ändringar längre
upp i flödet. Artikeln siktar på att besvara frågan om Angular eller React är ett svar på detta
rendering och manipulering problem man har med DOM och vilket ramverk och efterfrågas i
olika situationer.
Hypotesen är att ReactJS skall hantera rendering och manipulering av DOM-träd med
ökande storlek bättre än AngularJS och jQuery i form av laddningstid.
3.1. Metodbeskrivning
3.1.1. Experiment
För detta arbete kommer ett experiment användas som utvärderingsmetod för att få en mer
kontrollerbar miljö där man på bästa sätt kan bekräfta hypotesen och säkerställa att
mätningen är korrekt. Experimentet kommer utföras på tre olika simuleringar av Infinite
Scroll gjorda i jQuery, AngularJS och ReactJS med jQuery som baslinje för experimentet.
Experimentet siktar på att försöka besvara hypotesen som är att ReactJS skall prestera
bättre än baslinjen och AngularJS i form av laddningstid av rendering och manipulering av
DOM.
Psaila (2008) utförde en liknande experiment där de undersökte hur DOM och Virtuell DOM
hanterade ett ökande antal DOM-element. I experimentet så gjordes iterationer av DOM-
laddning och tittade på vilka situationer som DOM hanterade bra och vilka DOM hanterade
mindre bra. De variabler man tittade på var dels laddningstiden för rendering och
manipulering av DOM men även hur ökande antal DOM-element påverkade minnet.
Undersökningen i denna artikel kommer ta inspiration utav Psaila (2008) och utföra ett
liknande experiment men med några justeringar. Den stora justeringen är att istället för att
ha ett statiskt bestämt antal DOM-element som renderas och manipuleras så skall
testapplikationen tillåta att DOM-element dynamiskt läggs till efter initiala rendering för att
kunna simulera en mer verklig miljö för Infinite Scroll.
!7