Building User Interfaces Using Virtual DOM

Abstract

A comparison against dirty checking and KVO. This thesis explores the use of virtual DOM to render application content to the DOM.The method will be compared against the main rendering alternatives of today, dirty checking and key-value-observation (KVO). The areas examined are performance, handling of existing problems and general impact of using virtual DOM in front-end development. Performance tests are executed on test cases with different structures and amounts of data. A survey was conducted among students at the Department of Informatics, University of Oslo, to investigate their degree of familiarity with frameworks and rendering methods. Ten experienced developers were interviewed to obtain information about how the techniques function in large-scale projects. The results show that virtual DOM performs well compared with the two other techniques focused on in this thesis. Dirty checking revealed serious performance issues that are of no concern using virtual DOM. KVO potentially gives the best performance, but at the cost of much more manual work than is required by virtual DOM. Virtual DOM also improved several of the problem areas found in use of the other techniques. Virtual DOM showed to simplify application development. It provides a higher abstraction level than KVO and a more reliable abstraction level than dirty checking. Less details have to be taken care of manually, leaving more focus to the actual functionality being developed. The virtual DOM approach has changed the perception of how the code beneath user interfaces should be structured. The technique expands the usage areas of JavaScript, and the advantages of one-way dataflow and declarative programming have been spread in the JavaScript community. A lot of projects are replacing the other techniques with the virtual DOM approach.