Why do we need a JS framework?
The website mentioned in the introduction to this article is a user interface for caregivers. There they can see a graph depicting the body parameters of the patients and their mood condition. The data on the website is produced by the sensors in real time.
Requirements and literature research
We have compared these frameworks using several requirements. They have been determined by overall reviewing what the frameworks can offer and what the EmoKit website needs. The requirements are as follows:
- Type In this text we have used the term frameworks in a broad sense. It includes user interface (UI) libraries like React, as well as full frameworks like Angular. Framework is a complete set of tools and libraries. Library is incomplete and gives more freedom to developer. This will not be a very weighted requirement, because the pros and cons of libraries versus frameworks could be a separate research on its own. For this research we will assume that a library is better for the Mentech use-case, because frameworks usually have lots of dependencies which we do not need.
- Typical use – small apps Any library and framework shall be used for the purposes it is intended for. If the framework was initially made for small apps, it is not likely to be overly complicated and it is likely to have good performance.
- Mature Maturity indicates the age and the commercial backing of the framework. It is better that the chosen framework is older, has stable releases and is backed by a commercial company. This will ensure that the framework will not have any breaking changes in the way of implementation. It is not likely to get out of date without early notice and there will be enough materials on the Internet for the developer to use.
- Good documentation A framework should provide developers with a vast documentation for its usage. The documentation should describe the framework, its architecture, components, modules and so on. It also should give a tutorial on working with it and code examples. Additionally, it would be nice to get an advise on the usage of framework – beginner’s tutorial, the best practices, setup and deployment, security etc.
- Large usage community The community of the users of the framework should be quite large. It is a proof that the framework is popular and has various applications. In addition the developer should be able to find solutions to the code problems/bugs when they arise. For this research we will rate the popularity according to the framework npm downloads count in 2018 .
- Popularity growth For this research we will analyse the framework npm downloads amount in 2017 and 2018 to see the percentage growth of this amount in the past year (the calculation can be seen in the Table 1). This is done to not only find out the most popular frameworks but also to include some small but rapidly growing ones.
- Small learning curve Due to the deadlines of the project the time spent on rewriting the code using a new framework can not exceed 4 weeks. So, the learning curve of the usage of a new framework should be small. Additionally, the framework fundamentals, techniques and examples should be easily understandable.
- Good performance The chosen framework must have good performance – be one of the best in the speed of array manipulation, starting up and performing memory allocation. It is important because the website is not big and should be updated regularly.
- Can be used for cross-platform apps This is not a ”must” requirement, but it is definitely a plus for a framework to be easy to use for cross-platform apps. In addition to this project at Mentech Innovation also a web application is being implemented, so the chosen framework could be used for that.
Based on these requirements we have created the Table 2 comparing the top 10 frameworks mentioned in the previous chapter.
All the requirements have a certain weight depending on the importance of them for the developer. In the Table 2 the scores from 1 to 5 are given to the frameworks, where more is better. The weights for the requirements are also given on a scale from 1 to 5 where more is more important. End score for a framework is the sum of all the parameters multiplied with their weights.
From the Table 2 we can see that the three winning frameworks are Vue.js, Backbone and React.
During this part of the research we wrote a simple program using all three frameworks. The resulting code was evaluated by the complexity of writing and complexity of maintaining it. We also evaluated the frameworks by the complexity of finding and installing all the necessary tools. The comparison and the evaluation can be seen in the Tables 3 and 4.
First, we installed the three frameworks. Vue.js and React were easy to install, both requiring two-three lines of code to start working. Backbone was hard to install. There was not much information about its installation neither on the website of Backbone, nor on Google.
Then, a “Hello World” program and a ToDo app were written using the frameworks. The code written in Vue.js ended up being easily readable, which means it will be easy to maintain and find bugs. The documentation is really broad and simply written. It does not take much time to start using Vue.js, the syntax is simple. It means that it will be easy for some other developer to follow up with already made work, even for a developer that has not used Vue.js before.
The code written in React was quite a bit harder to write and read. It feels like this framework has a lot of potential for creating really powerful applications, however for the skills of the developer, the amount of time given and considering the existence of other more suitable frameworks it was not worth investing time in working with this framework further.
Working with Backbone was not nice at all. There was pretty much no beginner’s documentation and tutorials. Additionally, the amount of dependencies Backbone required was too big.
As a result of our research we have found Vue.js to be the most suitable for use at Mentech. Vue.js was easy to use, to read and the learning curve was small. Additionally the website of Vue.js provided a thorough documentation and there was plenty of materials on the Internet as well. The speed of the resulting programs was good.
However, it is important to note that we have made this research purely for the use-case of Mentech Innovation. There is a lot of frameworks which may be more suitable for different projects, different programming experiences and time available.
 Why should I use a framework? url: https://symfony.com/why-use-a-framework. (accessed: 31.08.2018).
 John Potter. npm Trends. url:https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue-vs-backbone-vs-ember-cli-vs-preact-vs-polymer-cli-vs-aurelia-framework-vs-svelte. (accessed: 31.08.2018).
- Polina Rymshina
- Reading time
- 8 minutes