COMP0016 Team 15

Overview

The goal of this project is to build a full stack web application for PCs as required by our client, therefore it is worth considering and researching into possible programming languages and framework to use in the stack. In this article we aim to compare and evaluate existing tools out there for each stack layer and reason about why have we chosen the specific tool.

Frontend

Programming Languages

When it comes to programming language for web development, Javascript seems to be the most obvious choice to write scripts with for the frontend although it is also capable with backend using NodeJS. It has support from all modern browsers, and with its extremely rich developing interfaces and ecosystem[1], there exists many powerful frameworks and libraries that are built on top of it that are capable in creating various eye catching websites. These reasons made Javascript our programming language of choice.

Frameworks

There are many Javascript framework out there and the three frameworks that are most popular and frequently used by industry are AngularJS and Vue.js [2].

Figure 1. Comparison between Angular, React and Vue [5]

Angular being one of the most powerful and efficient JavaScript framework is an obvious choice for web development. It also belongs to a very popular MEAN stack which involves MongoDB and Express. It has the advantages of enhanced design architecture, that when for a web applications with many components, Angular simplifies the way of how they are managed with two-way binding, which helps experienced Angular programming to develop on top on existing code and update related components easily[3]. Another advantage of Angular is its ability to do dependency injection, as the framework decouples components from their dependencies, which means that dependencies of components can be altered without reconfiguring them [4].

However, this framework is very large in size and has been known for its verbosity and complexity, which also means that it has a very steep learning curve when comparing with the other two frameworks [5]. So it may not be our best choice with us being complete beginners to web development and under the time constraint of the project despite its various advantages.

Vue is another popular JavaScript framework for web development that is rather new when compared with other JavaScript frameworks. According to what its developer Evan You said, Vue.js was an attempt to take the best of Angular, which was the idea of "data binding and a data driven way of dealing with a DOM, so you don't have to touch the DOM yourself"[5], but much lighter in weight.

There are several advantages with Vue.js, such as two-way binding which is inherited from Angular and its featherweight when comparing with Angular applications as mentioned before. This is a very useful property for our project as we have limited storage space on our given Linode server, which would also be storing dockerized images of uploaded models that are extremely large.

Another advantage of Vue is that it is relatively easy to learn, you only require basic knowledge of HTML,CSS and JavaScript to start off with [7], which is a property that we treat with high importance.

However, Vue.js suffers from lack of support from the community as it is still a relatively new framework, neither is it backed by large enterprises like Angular and React do. It also has relatively limited resources and a smaller ecosystem for the same reason [7], therefore is more suitable for relatively smaller projects, which we do no wish to be constraint by.

Library

What distinguishes React from the Vue and Angular is the fact that it is a library rather than a framework and is often referred to as "unopinionated", which means although React does allow us to build user interfaces using JSX, it doesn't include many of the other tools bundled within the core package like Angular and Vue does[8] when starting a completely new project. This may also mean that React grants a greater flexibility than the other two, and we can make our own design choices and install our preferred tools when creating our project.

A few examples of such tools are React Router that allows a declarative way of matching application components with their URLs [9], React Bootstrap which provides many useful pre-built components with full customizability [10], React Redux to enable a Redux store that all components can read and update to[11] and so on, all being powerful React frameworks to enhance the interface of a React project. This shows the richness in React's ecosystem.

Figure 2. Google Trend React vs Angular vs Vue [12]

React has also gain immense popularity and support from the community over the years, and is backed and maintained by Facebook, which made it relatively more reliable as we know that there are tons of useful resources out there that can support our development and issues that arised could be resolved quickly by Facebook's React maintenance team. Last but not least, React is also considered to have a shallow learning curve [13] and lightweighted just like Vue [14], which made it perfect for our use case.

In conclusion, we believe that React would be our preferred library to learn and build our frontend with over the other popular frameworks, due to its popularity and support from the community, rather mature ecosystem, lightweight and its rather shallow learning curve given the time constraints.

Backend

Possible solutions

During the initial meetings with our client, he explained to us what he was looking for: A platform that hosted datasets and trained machine learning models which are dockerised and can allow for predictions to be made with these trained models with a provided frontend.

Since I had experience with AWS, I went straight to work setting up infrastructure and experimenting with a system that hosted docker images and allowed them to be run on the server. The problem here is that it is very unscalable, if you constantly had models being spun up and ran on your server, with more user’s more computing power is required, and it would get expensive very fast.

I also experimented with the possibility of having docker images stored in a repo on ECR, and then making it so only one model can be ran at a time, therefore removing the issue of having to dynamically scale computing power. You can see a diagram of that infrastructure here:

I discussed this with the client and explained to him how it would not be scalable. We then decided that models will be downloaded and then ran locally, and that the service must be hosted on Linode, from here I went back to the drawing board and redesigned the infrastructure, which we used for the current solution we have developed (with a couple of minor changes):

Possible Languages

Choosing the language for the backend was an easy decision. Python is readable, (can be) fast, it’s the favourite language of all our group members and it’s widely used, industry standard for backends in web development.

Frameworks

For the API we used FastAPI, because it's easy to learn, lightweight, efficient, and fast to code. Our other options were Django or Flask, Django is old school and heavy duty, too heavy duty for what we needed. FastAPI shares the same syntax as Flask, however FastAPI is async, and since we are handling a lot of data/file transfer, we found FastAPI to be the obvious choice.

Another reason for FastAPI is the excellent documentation. These docs helped me greatly throughout development and I’m happy to say I went from a complete beginner to an expert with FastAPI during this project, thanks mostly to the fastAPI docs (and a few youtube tutorials).

Database

For the database, our two main choices where MongoDB and Postgres. Jeffrey and Laasya had experience with MongoDB, and Gabriel had experience with Postgres. MongoDB stores data as JSON and allows for more agile data input, so if you’re unsure on what will be stored in the database, for example the user can input any number of fields, and your data shape will be changing rapidly, then MongoDB is the way to go, rather than having to predefine your data tables with postgres. However, we discussed this with our client and designed the entity relationship diagram, which showed a very fixed data shape for the data that needed to be stored:

There are many more benefits to Postgres over MongoDB. Its open source and there’s no enterprise version and no need to be on the Mongo cloud to use all of their features, it allows for JSON data, so we could still use it if we decided to store JSON data later on, its easy to create an Object relational mapping with SQLAlchemy, and Alembic for database revisions when connecting to our database with FastAPI, and it has great performance, and is some cases is faster than mongoDB in benchmark tests [15]. MongoDB is a great tool, but we realised that it just made sense to go with Postgres for our use case.

Our Decisions

As a summary, we have decided that we would use the following technologies to create our project:

References

[1] “Pros and cons of JavaScript - weigh them and choose wisely!,” DataFlair, 17-Feb-2021. [Online]. Available: https://data-flair.training/blogs/advantages-disadvantages-javascript/. [Accessed: 22-Mar-2022].

[2] “10 best JavaScript frameworks to use in 2022 [updated],” Hackr.io. [Online]. Available: https://hackr.io/blog/best-javascript-frameworks. [Accessed: 21-Mar-2022].

[3] “Angular Two Way Binding,” Angular. [Online]. Available: https://angular.io/guide/two-way-binding. [Accessed: 22-Mar-2022].

[4] Editor, “React vs. angular compared: Which one suits your project better?,” AltexSoft, 28-Feb-2020. [Online]. Available: https://www.altexsoft.com/blog/engineering/react-vs-angular-compared-which-one-suits-your-project-better/. [Accessed: 21-Mar-2022].

[5] TestProject, “The mindset of developers: Angular vs. react vs. vue [part 2],” TestProject, 15-Jul-2021. [Online]. Available: https://blog.testproject.io/2020/11/23/the-mindset-of-developers-angular-vs-react-vs-vue-part-2/. [Accessed: 21-Mar-2022].

[6] V. Cromwell, “Evan you,” Between the Wires, 01-Jun-2017. [Online]. Available: https://web.archive.org/web/20170603052649/https:/betweenthewires.org/2016/11/03/evan-you/. [Accessed: 22-Mar-2022].

[7] Editor, “The good and the bad of vue.js framework programming,” AltexSoft, 27-Feb-2020. [Online]. Available: https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/. [Accessed: 22-Mar-2022].

[8] R. Barger, “Is react a library or a framework? here's why it matters,” freeCodeCamp.org, 12-Apr-2021. [Online]. Available: https://www.freecodecamp.org/news/is-react-a-library-or-a-framework/. [Accessed: 22-Mar-2022].

[9] “REACT router: Declarative routing for react,” ReactRouterWebsite. [Online]. Available: https://v5.reactrouter.com/web/guides/quick-start. [Accessed: 23-Mar-2022].

[10] “Bootstrap,” react. [Online]. Available: https://react-bootstrap.github.io/components/alerts. [Accessed: 23-Mar-2022].

[11] “Why use react redux?,” React Redux, 19-Jun-2021. [Online]. Available: https://react-redux.js.org/introduction/why-use-react-redux. [Accessed: 23-Mar-2022].

[12] “React, angular, Vue - Google Trends - Google Search.” [Online]. Available: https://trends.google.com/trends/explore?cat=31&q=React,Angular,Vue. [Accessed: 22-Mar-2022].

[13] A. Vágó “How fast can you learn react?,” Medium, 15-Feb-2022. [Online]. Available: https://medium.com/hackernoon/how-fast-can-you-learn-react-49c4bdabc0df. [Accessed: 23-Mar-2022].

[14] “Vue vs react: What is the best choice for 2021? – mindk blog,” Web and Mobile Development Blog MindKcom. [Online]. Available: https://www.mindk.com/blog/react-vs-vue/. [Accessed: 23-Mar-2022].

[15] "MongoDB vs. Postgres Benchmarks / Álvaro Hernández (OnGres)". Available: https://www.youtube.com/watch?v=-AIjKrWi0x0