i ROOPE HAKULINEN USING IMMUTABLE DATA STRUCTURES TO OPTIMIZE ANGULAR CHANGE DETECTION Master’s thesis ABSTRACT ROOPE HAKULINEN: Thesis template of Tampere University of Technology Tampere University of Technology Master of Science Thesis, 42 pages May 2018 Master’s Degree Programme in Information Technology Major: Pervasive computing Examiner: University Lecturer Terhi Kilamo Keywords: Angular, TypeScript, JavaScript, change detection, immutable data structures, performance Angular is the successor of the extremely popular Angular.js framework. While it is based on many of the same concepts, it still is a complete rewrite of Angular.js. Angular has an extremely interesting approach to change detection which differs quite a lot from what other libraries and frameworks have implemented. While extremely performant already by default, it can still be fine-tuned by the developer. The target of this thesis was to introduce the optimization possibility related to the usage of immutable data structures and the OnPush change detection strategy and to demon- strate the performance gain with a reference application. The reference application built is a complete Angular application. It demonstrates a change detection heavy use case where the original version is suffering from a minor performance problem. It was proven that the usage of immutable data structures with the OnPush change detec- tion strategy can have a great positive impact on the performance of an Angular applica- tion. The actual gain is dependent on the architecture of the application. In the case of the reference application the gain was 1.21648-fold in frames per seconds compared to un- optimized version. TIIVISTELMÄ ROOPE HAKULINEN: Tampereen teknillisen yliopiston opinnäytepohja Tampereen teknillinen yliopisto Diplomityö, 42 sivua Toukokuu 2018 Tietotekniikan diplomi-insinöörin tutkinto-ohjelma Pääaine: Ohjelmistotekniikka Tarkastaja: Yliopistonlehtori Terhi Kilamo Avainsanat: Angular, TypeScript, JavaScript, muutoksentunnistus, muuttumatto- mat datarakenteet, suorituskyky Angular on erittäin suositun Angular.js-ohjelmistokehyksen seuraaja. Vaikka Angular si- sältääkin useita samoja konsepteja, kuin Angular.JS, on se kuitenkin täysi uudelleenkir- joitus alkuperäisestä. Angularin muutoksentunnistus on erittäin mielenkiintoinen, ja se eroaa huomattavasti muiden kirjastojen ja ohjelmistokehysten toteutuksista. Vaikka An- gularin muutoksentunnistus on erittäin tehokas jo valmiiksi, on sitä mahdollista edelleen optimoida kehittäjän toimesta. Tämän diplomityön tarkoituksena on esitellä tällainen optimointimahdollisuus käyttäen muuttumattomia datarakenteita sekä niin sanottua OnPush-muutoksentunnistusstrate- giaa, sekä esitellä suorituskykyhyödyn mahdollisuus referenssitoteutuksen avulla. Refe- renssitoteutus on kokonainen Angular-sovellus, joka demonstroi muutoksentunnistuksen kannalta raskasta käyttötapausta, jolla on oletusmuutoksentunnistusstrategialla pieni suo- rituskykyongelma. Muuttumattomien datarakenteiden käytön OnPush-muutoksentunnistusstrategian kanssa todettiin parantavan muutoksen tunnistuksen suorituskykyä merkittävästi. Varsinainen hyöty on aina kiinni itse sovelluksen arkkitehtuurista. Referenssitoteutuksen kohdalla hyöty oli 1.21648-kertainen näytön päivitysnopeus mitattuna näytettyinä kehyksinä se- kunnissa verrattuna optimoimattomaan toteutukseen. PREFACE To my mother, Päivi Hakulinen. Without your constant queries about the status of my master’s thesis it would have never seen the sunlight. Here it finally is. Thank you. 20.5.2018 Roope Hakulinen TABLE OF CONTENTS 1. INTRODUCTION .................................................................................................... 1 2. BACKGROUND ...................................................................................................... 3 2.1 Single-page applications ................................................................................ 3 2.2 Change Detection ........................................................................................... 5 2.3 Immutable Data Structures ............................................................................. 9 2.3.1 The Concept of Immutability ........................................................... 9 2.3.2 Immutable Data Structures in JavaScript ......................................... 9 3. ANGULAR ............................................................................................................. 12 3.1 Angular.js & Angular ................................................................................... 12 3.2 Core Concepts .............................................................................................. 12 3.2.1 Components ................................................................................... 13 3.2.2 Templates ....................................................................................... 14 3.2.3 Component Lifecycle Hooks ......................................................... 16 3.2.4 Services .......................................................................................... 17 3.2.5 Dependency Injection .................................................................... 18 3.3 Angular's Change Detection ......................................................................... 18 3.3.1 Execution Model of JavaScript ...................................................... 18 3.3.2 Zone.js ............................................................................................ 19 3.3.3 Noticing the Changes ..................................................................... 20 3.3.4 Reacting to Possible Changes ........................................................ 20 3.4 OnPush Change Detection Strategy ............................................................. 25 3.5 Optimizing Change Detection with Immutable Data Structures .................. 27 4. REFERENCE APPLICATION ............................................................................... 29 4.1 Common Parts .............................................................................................. 30 4.1.1 TimerService .................................................................................. 30 4.1.2 RandomizerService ........................................................................ 31 4.2 Original Application ..................................................................................... 31 4.2.1 TableComponent ............................................................................ 32 4.2.2 TableRowComponent .................................................................... 35 4.2.3 TableItemComponent..................................................................... 35 4.3 Optimizations ............................................................................................... 36 4.3.1 OptimizedTableComponent ........................................................... 36 4.3.2 OptimizedTableRowComponent ................................................... 38 5. PERFORMANCE ANALYSIS .............................................................................. 39 5.1 Measurement ................................................................................................ 39 5.2 Results .......................................................................................................... 40 6. DISCUSSION & CONCLUSIONS ........................................................................ 41 SOURCES ....................................................................................................................... 43 1 1. INTRODUCTION During the last decade there has been a clear shift in the way web applications are imple- mented. The traditional approach, where the application’s state is stored on servers and interaction happens through page (re)loads, has been replaced by the newer approach where state is stored on the client itself and JavaScript is employed to interact with the user and communicate with the servers asynchronously to synchronize the state between client and server. These applications are often referred to as Single-Page Applications (SPAs) as they do not perform actual page loads after the initial page is once loaded, but instead use tech- nique called AJAX (Asynchronous JavaScript and XML) to fetch the data to be shown from web servers and render it on the user interface (often just UI). Doing this enables them to react more rapidly to the user interaction and offer user experience closer to the native applications people are used to in the mobile and desktop environments. Single-page applications have required new techniques to manage the state on the client’s end and to render (and especially re-render) the data on the Document Object Model (DOM) representing the web page as seen by the end user. An essential part of this process is the change detection. It is the process of identifying the changes on the under- lying data model that need to be reflected on the DOM and then applying these changes effectively. The data model is often referred to as application state (or simply state). Sin- gle-page applications are studied in chapter 2. Change detection is not a trivial problem to solve and there are multiple approaches taken by different libraries and frameworks, as seen on the chapter 2 when discussing the earlier implementations by various vendors. The methodology has evolved dramatically since the first solutions but so have the browsers. To be more specific, the support for JavaS- cript especially has improved by a lot. This is thanks to both: new standards and browser vendors. New standards have been drafted by the TC39 committee responsible for the new versions of the ECMAScript standard, on which the JavaScript is based on. The browser vendors, on the other hand, have been adopting the standards usually even al- ready before they have been finalized and published by the committee and have also op- timized their implementations to allow more computation to be made on client-side and visually more attractive applications to be created. Multiple vendors have implemented their own solution to the problem of change detection but the two most widely used are Angular.js and React. They both provide a unique solu- tion to the problem of detecting changes. Despite the rivalry between the two and the fact 2 that their solutions differ quite a lot from each other, there is still something to be learned from both of them. The different change detection mechanisms are studied in chapter 2. Many of the modern change detection strategies rely on the concept of immutable data structures. These will be covered also in chapter 2. Angular is the next-generation version of the extremely popular Angular.js. Even though it builds on top of some of the same ideas as its predecessor it is still a complete rewrite and thus has taken also different approaches on many areas. Angular along with the most important concepts of it related to this thesis will be examined in chapter 3. Angular has a unique and an efficient approach to the change detection. Still, as change detection is such an essential part of the performance of the application further optimiza- tions on it can improve the user experience a lot. Thus, optimizing Angular’s change detection is the topic in which this thesis will dive into by looking for an answer to the research question of whether Angular change detection can be optimized using immutable data structures. Angular’s approach to the change detection is introduced in Chapter 3. Angular applications are always a tree structure of components composed of other com- ponents. Using the immutable data structures to optimize change detection can be ex- tremely powerful as it allows complete subtrees of this component tree to be left un- checked under certain conditions. Chapter 4 introduces example Angular application for comparison between non-optimized version and version optimized based on this tech- nique. The gains of optimization are described more in-depth in the Chapter 5. Chapter 6 will tie together conclusions about usage of the immutable data structures to optimize the Angular performance-wise and also the other consequences it has from the perspective of a developer. 3 2. BACKGROUND While this thesis concentrates on certain framework and its change detection mechanisms, it is important to further understand the basic ideas behind modern web applications. The term modern web applications here refers to the concept of single-page applications which will be introduced along with the technologies, namely JavaScript, AJAX and JSON, making them possible. In the following the sections the history of the frontends of the web applications will be introduced after which the technologies for them are introduced. Angular utilizes these underlying technologies and builds on top of many of the concepts made popular by other frameworks and libraries. 2.1 Single-page applications Traditionally the frontend for a web application has meant a HTML representation sent over to client from the server to be rendered. Then user can interact with this representa- tion by either clicking links or submitting forms. While doing so the user actually tells browser to make a new HTTP request to the server and to render the resulting HTML. Frontend built this way is not obviously very dynamic as changes can only occur once the server sends a completely new HTML page based on user’s requests. This is not op- timal as first the new HTML representation needs to be generated, then it needs to be sent to browser which then renders it from a scratch again. The concept of single-page applications is based on modifying the existing representation sent once by the browser. It utilizes JavaScript to add functionality on top of the page. This functionality can include for example reacting to clicks or keyboard input, altering the DOM of the page constructed based on the HTML sent by the server, or making AJAX requests for the server to fetch data dynamically without triggering a full page load (DOM specification) (AJAX). This data fetched can be in any format understood by both ends but the two most used ones nowadays are JSON and XML (RFC 7159) (XML). Out of these the JSON has lately been more widely used in modern web applications and that is also the default one to be used within Angular applications. Thus, the XML will not be covered in this thesis. Next section contains introduction to these technologies mentioned. The basis for the whole concept of single-page applications is the JavaScript (Mikowski & Powell, 2016). JavaScript is a programming language that is the only language under- stood by the majority of browsers. While JavaScript can be used as a general-purpose programming language and is also extremely popular on server-side programming, in this thesis the focus is in the features available in the browser environment. 4 As a programming language, JavaScript can be described as multi-paradigm as it supports for example traits from imperative, functional and object-oriented programming. It is weakly and dynamically typed (Rauschmayer, 2013). JavaScript was originally developed by Brendan Eich in 1995 who worked for Netscape Communications Corporation at that time (Netscape, 1995). The purpose of the language was to provide dynamic features for NetScape browser's version 2.0. Some parts of the syntax were adopted from the programming language Java (Brendan Eich, 2016). Other than the somewhat corresponding parts of syntax, the Java and JavaScript are not con- nected to each other and the name JavaScript was chosen only for branding purposes to benefit from the large adoption of Java language. Nowadays the JavaScript is based on the standard called ECMAScript standardized by Ecma International (Stoyan Stefanov, 2010; Hongki Lee et al, 2012). The work on the ECMAScript standards is open and can be followed in GitHub (ECMAScript proposals). The standards committee, named TC39 (Technical Committee 39), is composed of rep- resentatives of major JavaScript runtime vendors and other large companies utilizing the JavaScript (TC39 committee). At the time of writing this thesis there has been 8 releases of ECMAScript and starting from 2015 there is an annual release which will contain all of the features accepted by the TC39 so far (Latest ECMAScript standard). The names of the ECMAScript standards used to follow running numbering starting from 1 but this was also changed with the release of ES6 which was named ES2015 officially followed by the ES2016 the next year. The latest standard release at the time of writing is the ES2017 released in June 2017 (Latest ECMAScript standard). Because the users are using browsers that do not yet support all the features of later ECMAScript standards the code utilizing such features needs to be transpiled to match earlier standard versions. This process is called transpiling (Rohit Kulkarni et al, 2015). The concept is essentially the same as in compiling high-level language to lower level language. But when both, the source and target language, are high-level languages it is called transpiling instead of compiling. There exists multiple tools to handle this transpi- lation with the most used one being Babel (Babel). JavaScript is said to be event-driven language meaning that the execution is based on reacting to events. In browser environment these events can be for example user interac- tion, HTTP response coming in or timeout triggering. With JavaScript certain code can be tied to be called upon such an event to react somehow. This reaction may involve updating the DOM of the page or making HTTP requests. HTTP requests can be made without reloading the page. The technique making this pos- sible is called Asynchronous JavaScript and XML (AJAX). While the name implies the usage of XML, it is not actually necessary. The API provided by the browser is still called XMLHttpRequest (XHR standard). With this API new code can be bound to be executed 5 when the response is received from the server. This block of code can then take further action such as update the user interface. JavaScript Object Notation (JSON) is a data exchange format (Zia Ul Haq et al., 2015). It is meant to be easily readable and writable for humans while being also machine man- ageable. It is based on the JavaScript types such String, Number and Object. JSON has become much more popular choice than XML due to its easier format and good support in JavaScript (Tom Strassner). Based on paper Comparison of JSON and XML Data In- terchange Formats: A Case Study by Nurzhan Nurseitov et al. (2010) JSON is also supe- rior in performance compared to XML. The original single-page applications were using just custom-built JavaScript to imple- ment all of the features. This was okay as the applications were small but as they grew bigger, it was inevitable that some libraries were required to manage the applications consisting of multiple different domain objects. Thus, libraries and frameworks started popping up to solve the common problems. The most essential problem these tried to solve was to reflect the state stored in some kind of data structure in the user interface. While it sounds trivial, it for sure is not as will be seen in the next section covering the change detection mechanisms of many popular libraries and frameworks. Optimizing the change detection is also the topic of this thesis. 2.2 Change Detection Change detection is the process of mapping the application state into the user interface. In case of the web applications this usually means mapping some JavaScript objects, ar- rays and other primitives into the DOM which is viewable and interactable by the end user. Even though the mapping of the state to DOM is somewhat simple and straightfor- ward, great challenges are faced when trying to reflect the changes that have happened on the state to the DOM. This phase is called re-rendering and it needs usually to be performed each time there is a change on the underlying data model. This is illustrated in Image 1.