Computer programming is an ever evolving field.
This evolution comes with a constant availability of new languages and frameworks. And on the flip side, others can become less relevant.
In this dynamic environment, keeping the pace and being able to select the best tools is not trivial, especially for less experienced coders.
Nowadays one of the predominant programming languages is Python, which can be used for a vast amount of tasks: development of dashboards and user interfaces are some of those. Two of the most popular frameworks for this purpose, both built in Python, are Dash and Streamlit. This article describes and compares them.
But first of all, let’s answer a question.
Why user interfaces?*
You’re at a point where your Python code implements some fancy functionality. Name it Financial Analysis, Machine Learning , Dynamic simulation, etc. At this stage your product consists of lines of code that someone else with understanding of programming can read, run and, in case, modify.
However, there can be several reasons to bind a user interface around that Python code and turning it into an app. This can make it easier (and more enjoyable) for others to use and understand it. For instance, think of people with little to no coding expertise. Besides, a user interface can turn your code into a prototype that you can present to an audience or to stakeholders. The benefits are numerous.
But how can such user interface be developed? What are the available tools and frameworks?
*) The terms app/dashboard/user interface will be used interchangeably throughout this article.
Front-end frameworks
To date, there are several tools to create web applications based on a Python back-end. This is a non-exhaustive list:
- Angular
- React
- Vue
- Dash
- Streamlit
The above frameworks vary greatly in capabilities and associated complexity. Indicatively, they are listed in a descending order of difficulty from top to bottom. Some of them can work with back-end code written in different languages (Python, JavaScript, etc). Others are instead more specific for Python.
Angular, React and Vue are rather sophisticated frameworks that allow for development of dynamic user interfaces. They are based on JavaScript and they can work with back-end code written in several different languages.
Dash and Streamlit are relatively simpler than the others: they include several built-in functionalities that allow for faster development and are based on Python. In return they offer somehow less power and flexibility. However, the differences can be substantial even between Dash and Streamlit, both in terms of simplicity and capabilities. Therefore, the scope of this article is to compare Dash and Streamlit’s main features. This can help choosing the most suitable framework based on a person’s expertise, willingness and time to learn.
Web or Desktop Applications?
The above are all frameworks for building web applications. Web apps are rendered in a web browser. Another option would be considering desktop applications. They basically consist of a standalone program that runs on a local computer: Python frameworks like Tkinter or PyQT enable that, to name a couple. However, the predominant trend in user interface development is largely towards web applications. These are more convenient to use, easier to update and are not bound to one device. For this reason, desktop applications are not considered in this article.
Introduction to Dash and Streamlit
Dash is a Python framework particularly suited for building web analytic, data visualisation, instrument control and reporting applications. Dash is built on top of libraries like Flask, Plotly.js and React.js: essentially a Dash application is a web server running Flask and communicating JSON packets over HTTP request. Dash’s frontend renders components using React.js, the JavaScript library written and maintained by Facebook. Apps can therefore be deployed to servers and then shared through URLs.
Streamlit is an open-source Python library that allows for development and sharing of web applications without any knowledge of HTML or CSS; by using Streamlit a basic app can be built and deployed in a few lines of code. It is initially designed with particular focus on Machine Learning but it can easily be applied to other types of tasks and analyses.
Comparison: Dash or Streamlit?
The comparison is based on a set of criteria that are chosen with the following questions in mind:
- what are the main tools available within the framework for building and styling the app?
- how is the interactivity of the app handled?
- how much effort is required to learn the framework?
All this results in the following criteria:
- widgets and plots
- custom components
- styling
- state
- page update
- multi-page
- learning curve
Widgets and plots
To enable interactivity and trigger events in the backend upon user’s action an app needs buttons, dropdown menus, text input fields, radio buttons, etc. For a specific framework different sets of widgets can be available. Similarly, the output may need to be visualised through different plot types.
Dash
Dash provides a large set of widget components (dropdowns, inputs, buttons, sliders, etc.) and plot types (bar plots, pie, histogram, polar, etc.). Although different third party plotting libraries can be used to some extent, Dash is built (by Plotly) primarily for the Plotly.py library.
Streamlit
Streamlit provides a large set of widget components (dropdowns, inputs, buttons, sliders, etc.) and plot types (bar plots, pie, histogram, polar, etc.). Widgets are treated as variables, which makes it very simple to use. Streamlit is compatible with different plotting libraries like Altair, Bokeh, Plotly, Seaborn or Matplotlib.
Custom components:
The basic components may need to be expanded and customised to create the needed functionality for your specific use case. For instance, these could be widgets or plots that can send and receive data. The possibility for customisation may come handy once a developer gets more experienced and the complexity of the application grows.
Dash
Dash provides a framework that converts React components (written in JavaScript) into Python classes that are compatible with the Dash ecosystem. Hence the possibility of creating custom components, given some knowledge of React and HTML.
Streamlit
Similarly to Dash, custom components can be created by wrapping JavaScript and HTML code into a Python package that can be rendered in a Streamlit app. A gallery of custom components created and shared by the Streamlit community can be found at here. Again, some knowledge of JavaScript (React) and HTML is necessary to develop custom components.
Styling
An app is also about aesthetic. Different tools can offer different possibilities and easiness of customisation for the page layout. This can involve aspects like sizing, positioning, colours and fonts.
Dash
Dash is very flexible when it comes to aesthetic since it does not implement any default styling. On page load, Dash serves a small HTML template that includes references to the CSS and JavaScript that are required to render the application. Lot of room for customisation is possible by using custom styles: pagination, colors, fonts can all be manipulated if the user is familiar with CSS. Of course, the amount of styling customisation is proportional to the CSS knowledge of the app developer.
Streamlit
Streamlit comes with its own layout style. All widgets that are added to an app follow by default this styling convention. Therefore, the developer does not need to take care of this aspect. This also implies that Streamlit is more opinionated i.e. there is less room for customisation when it comes to styling. In terms of layout, different Streamlit apps might look similar.
State
It is defined as the condition of a program regarding stored inputs. These can be entered by the user through the app widgets and are saved as variables or constants. As the program executes, its state may change with the value of the variables stored in memory. An example could be a set user’s selections (through dropdowns, radio buttons, etc.) that are temporarily stored and used as an input to a function that gets executed only after a button is clicked. Dash and Streamlit handle state in a different way.
Dash
Fully implemented with a built-in component.
Streamlit
Not yet implemented as a standard feature. However, Streamlit is evolving very quickly and this functionality could become available in the future. For now, a workaround to include it can be found here.
Some cache functionality is currently available, which enables to reuse information across reruns and skip redundand data fetches and computation.
Page update
When a user performs any action the app reacts by running some back-end computation and possibly updating an output section. When this happens, only a specific part of the app could be updated (a plot, a text or a table). Another option is to reload the whole page with all its components. This results in different app responsiveness with consequences on the user experience.
Dash
Dash renders web applications as a “single-page app”. This means that the application does not completely reload when the user navigates the application, making browsing very fast. Dash provides a simple reactive decorator for binding custom code to the user interface. When an input changes (e.g. an item in the dropdown is selected or a slider is dragged), Dash’s decorator provides the back-end Python code with an input value and updates the relevant output section once the input is processed. This means that only specific elements are updated, which benefits the user experience.
Streamlit
Every interaction reruns the script from top to bottom, except for parts of the code that are cached. This approach leads to clean and simpler code. On the other side, it can slow down the execution and the page visualisation on the browser, which gets reloaded more frequently.
Multi-page
A web application can consist of a single or multiple pages URLs depending on the complexity of the application.
Dash
Provides functionalities to display different pages depending on the URL.
Streamlit
There is no implicit feature to add a tab for a new page in a single page. However, using some existing features you can create a work around for building multi page apps. One of these possible solutions could be using a radio button.
Learning curve
It is important to have a feeling of what investment in terms of time and energy is required to familiarize a framework. With that information it is possible to assess if the investment is worthwhile. Dash and Streamlit have different characteristics and this is reflected also in the learning process.
Dash
The framework allows for development of both simple and sophisticated apps. Accordingly, the amount of concepts to learn grows with the increase in complexity. With that said, for basic dashboard development with very limited styling (no CSS), the main concepts can be picked up relatively quickly. But even for simple aps, some understanding of HTML is beneficial. Gaining a deeper knowledge in Dash ad web development languages (mainly HTML and CSS) can pay back once the app complexity increases.
Streamlit
The framework is designed with the goal of providing Machine Learning engineers a tool for rapid app development. This means that simplicity is one of the key aspects. The need for knowledge in web development is also removed. Compared to Dash, it requires much less learning time to develop good looking simple applications. However (to date) the possibilities for more complex app development seem more limited compared to Dash.
Application gallery
Dash and Streamlit’s communities share source code of applications built with these frameworks. It is a well known fact that images can convey information faster than words. Having a look at the respective application galleries can be an excellent way to get insight on the code complexity and understand if the framework has been used for purposes similar to yours.
More information and examples can be found here:
Due to the older age of Dash, its app gallery is far more populated than that of Streamlit.
Summary Dash
Dash is an excellent solution for building user interfaces in a wide range of typologies and complexity. That means it can be suitable both for simple prototypes and enterprise-level solutions. The initial investment in the learning can pay back generously. It may also be a good starting point for the Python programmer that wants to dig deeper into web development.
Pros
- Several built-in capabilities and functionalities, from widget components to plotting
- Not opinionated about styling, which can be highly customised
- In general lot of room for customisation and expanding application complexity
- Compatible with back-end written in Python, R and Matlab
- Smooth user experience due to “single-page app” way of working
Cons
- CSS knowledge required to customise styling
- Compatible only with Plotly plotting library
- Somehow steep learning curve for the user with Python knowledge only
Ssuitable for
- Python developers with some knowledge of web development (or willing to learn some basics)
- Prototypes and enterprise-level apps
Summary Streamlit
Streamlit seems to be a good option for fast and simple development and suitable for all levels of coding expertise. It can be a good starting point for programmers with little to no experience in user interface development.
Pros
- No front-end development knowledge required
- Widgets added the same way as declaring a variable
- Compatibility with several plotting libraries like Plotly, Bokeh, Altair, etc.
- Easiness of use
Cons
- Some advanced functionalities are partly or not implemented
- The whole page is refreshed upon every user’s action
- Limited styling and layout
Suitable for
- Quick prototyping of apps/dashboard with tightly-focused functionalities
- User’s with little to no experience with app and front-end development (HTML, CSS, JavaScript)