Comparison of UI frameworks

	React	Vue.js	Nuxt	Angular
Definition	JavaScript View Library	MVC Framework	MVC Framework	MVC Framework
Popularity	Github 94849 Stars, Stack Overflow 83458 Tags	Github 92830 Stars, Stack Overflow 16806 Tags	Github 11969 Stars, Stack Overflow 371 Tags	Github 58396 Stars, Stack Overflow 109261 Tags
Scala Play	++	+	-	++
Architecture	Component Based with unidirectional data flow	Component Based with unidirectional data flow	Component Based with unidirectional data flow	Component Based with unidirectional data flow
Server Side Rendering	+	+	+	+
Performance Ranking	3.	2.	-	1.
Technology Differences	Virtual DOM, JSX	Virtual DOM	Virtual DOM	Direct DOM

1. Definition

The main difference between the compared technologies is that React, in contrast to the others, is a UI library and Vue, Nuxt, and Angular are fully fledged frameworks. The difference in using a library and a framework is that the later provides more out of the box functionalities, whereas the former enable the developers to choose on their own which technology they want to use for every feature. When using a framework the developers are bound to the features and functionality provided by it's implementation, but they don't have to implement and choose which implementation should be used. In contrast, when using a library the developers need to choose a framework for each new functionality they want to use, which enables them to customise their technology stack. Learning to use a library instead of a framework is usually much easier and quicker since it provides less functionalities. But when it comes to developing larger applications the advantages of using a framework will be beneficial.

2. Support for Scala Play

Currently, the backend is based on the Scala Play framework and therefore it is essential that the chosen UI framework is able to work with Scala Play. The following articles provide an overview of how to integrate a Scala Play backend and a UI frontend based on Angular and React: react-scalaPlay, angular-scalaPlay. Our research showed that the integration of vue.js and nuxt with Scala Play should be possible, but there are no elaborated examples showing implementations of these technologies.

3. Performance Ranking

Performance is an important factor for webapps and therefore, it is mandatory that the chosen frontend framework has a good performance. The following article shows that angular has the highest performance, as it is using direct DOM manipulations instead of virtual DOM (Performance Comparison Vue React and Angular).