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