JavaScript Framework for Mentech Innovation

Title:

Description:

JavaScript Framework for Mentech Innovation

During the creation of the Emokit website we have faced the problem of choosing a JavaScript framework for it. In this article we will tell about different JS frameworks and how we chose the one perfect for our use-case.

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.

There are several ways to implement a website. The simplest way is to make it using plain HTML, CSS and vanilla JavaScript. However for the implementation of the EmoKit website we have decided to use a JavaScript framework. There were several reasons for it [1][2]:

  • JavaScript has a loose way of writing code, with different techniques. A framework is a good tool to standardise the way of writing it.
  • With vanilla JavaScript it is hard (requires a lot of code) to keep the user interface in sync with the application state. State is the condition (memory) of the application. Frameworks provide the ability to implement UIs that are guaranteed to be in sync with the internal state of the application.
  • A JavaScript framework will allow the developer to focus on the application-specific tasks rather than on the generic patterns, because the framework already has these common patterns implemented in it. It will eventually save the time needed for the application development.
  • The support that comes with a JavaScript framework allows the developer to get the information and help on writing code on the Internet. Additionally, the framework will be maintained by an external party which will fix any possible bugs in it.

Requirements and literature research

Due to the popularity of the JavaScript language there are so many frameworks for it! It is unrealistic to try to compare all of them. We have decided to look into the 10 most popular frameworks (by npm downloads). They are React, Angular, Vue.js, AngularJS, Backbone, Ember, Preact, Polymer, Aurelia and Svelte.

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 [4].
    Table 1: Popularity Percentage Calculation
  • 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.
Table 2: Framework Selection Matrix

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.

Empirical research

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.

Table 3: Top Frameworks’ Characteristics

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.

Table 4: Top Frameworks’ Selection Matrix

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.

Conclusion

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.

Resourses

[1] Alberto Gimeno. The deepest reason why modern JavaScript frameworks exist. url: https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445.(accessed: 31.08.2018).
[2] Why should I use a framework? url: https://symfony.com/why-use-a-framework. (accessed: 31.08.2018).
[3] John Hannah. The Ultimate Guide To JavaScript Frameworks. url:https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/. (accessed: 30.08.2018).
[4] 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).

Category
Tools
Author
Polina Rymshina
Reading time
8 minutes

Copyright © 2018-2019, Mentech Innovation