Building a front-end framework with Web Components : A study about the next generation of front-end frameworks

Abstract: Context: As most modern browsers fully support the new set of APIs called Web Components, it is crucial to investigate how developers could use them to enhance the performance and developer experience of web development. When considering this, it is fitting to investigate both the technical and practical differences between modern libraries powered by the APIs, versus traditional libraries which do not. Objectives: In this study, traditional libraries using Virtual DOM got investigated to find out which differences exist when compared to modern ones using Web Components. To find out how this next generation of front-end libraries could utilize these new APIs to improve the build process of websites. If the APIs offer alternative ways for developers to achieve better performance and developer experience. Realization:  In order to fulfill the objectives, an empirical study and a literature review were conducted. In the literature review, we investigated how a set of well-known front-end libraries technically compares to new and aspiring Web Components based libraries. In the empirical study, a new Web Components library was built from the ground up with inspiration from Vuejs. With the help of modern code styles to achieve a fresh developer experience. Results: The results of the study show that Web Components based libraries tend to be quite powerful and offer excellent all-around performance. The created library, Kirei, reflected this as it became a powerful all-around library that offers a great developer experience. It also performed equally well or even better than Vue on most benchmarks. However, Vue was better at creating new elements while Kirei excelled at updating elements. In a way, the libraries excitingly contrasted with each other. Conclusions: While Vue and React are fundamentally different from Lit-Element, Heresy, and Kirei, they are alike in some sense. Most of the differences come from how the libraries apply updates to the DOM. While Web Components based libraries patch only the dynamic parts, Virtual DOM has to diff both the dynamic and static parts. Moreover, Kirei proved to be a robust framework that could compete with Vue and React. In some benchmarks, it proved to have an upper edge in performance.