Introduction

At the C4DT Factory, one of our tasks is to develop demonstrators for research projects. The goal is to provide a quick introduction to a project, and allow visitors to interact and get a feel for the technology.

As we just started to work on a demonstrator for the Garfield project, we wanted to evaluate the various Web frameworks available before beginning the development.

Requirements

We set the following requirements for this demonstrator:

  • The back-end should be Python-based (because Garfield is written in Python);
  • The front-end should provide a dynamic, modern UI;
  • The front-end should use the Material Design set of widgets (for consistency with the other demonstrators);
  • The system should be fairly simple and easy to maintain.

Back-end

For the back-end, we took a look at the following Python-based frameworks:

  • Flask: one of the most popular microframeworks
  • Bottle: lightweight and minimalist
  • Quart: async re-implementation of Flask
  • FastAPI: high-performance, based on OpenAPI and JSON Schema standards
  • BlackSheep, event-based, inspired by Flask and ASP.NET
  • Sanic, high-performance and scalability

The first three are well established and somewhat similar in usage, while the following ones are younger and perhaps less common, but focus on specific features.

In the end, we chose Quart for the following reasons:

  • Actively developed: latest release from May 2021;
  • Well supported: as it re-implements the Flask API, it benefits from all the examples and tutorials available on the net;
  • Async native, allowing to use the modern async/await features of Python.

Front-end

For the front-end, we examined the following frameworks:

  • Angular: rewrite of AngularJS, initiated by Google;
  • React: a veteran, initiated by Facebook;
  • Vue.js: lightweight, can be adopted incrementally;
  • htmx: minimalist and self-contained.

Angular is very popular and powerful, commonly used with TypeScript, but can feel overwhelming for small projects. htmx is on the other hand of the spectrum, but unfortunately does not support Material widgets.

The decision was then between React and Vue. Both are extremely widespread frameworks with large user bases, and support Material widgets (see here and here respectively). After taking a closer look at both, we picked Vue because of its more familiar approach (even though React’s JSX looks very interesting!).

Putting it all together

Having settled on back-end and front-end frameworks, we then needed to decide how to combine them, and how to deploy our application.

Old-school Web development was mostly back-end, the server answering client requests with whole new HTML pages. AJAX decoupled the communication from the display, shifting some logic to the front-end and allowing for more interactive applications. Modern frameworks go even further in this direction. This article discusses the balance between front-end and back-end, and offers food for thought on the question.

On the deployment side, modern frameworks typically involve two servers, one for the back-end (possibly just for your app’s API) and one for the front-end (often Node.js). Depending on the situation, simpler strategies are possible, having for example a single server for both. This article examines different possibilities to combine Flask and Vue, presenting pros and cons in each case. This one also discusses a single-server deployment for Flask and React.

In the end, we opted for a single-server deployment, loading Vue (and its plugins) directly in the HTML. This results in quite simple code, and avoids complications coming with front-end building and packaging. It might not be appropriate for scalable applications with thousands of users, but in our case it helps keeping things simple and manageable.

Conclusion

There is a multitude of Web frameworks out there, which is quite exciting, but can make the task of selecting one daunting. In the end, the choice will most likely be driven by your specific requirements, your experience, and your preferences. Nonetheless, it is worthwhile to spend a bit of time to examine a few solutions, before jumping on the “latest trend”. 🙂

This post is meant as a quick summary, so the various frameworks are only glanced over, but don’t hesitate to contact the Factory if you are interested in more details!

— Christian