Exploring Dash and Other Supporting Packages

Get an overview of the Dash and its supporting packages.

We'll cover the following

What is Dash made of?

Although not strictly necessary, it’s good to know the main components that are used to make Dash and its dependencies, especially for more advanced usage and in order to know how and where to get more information.

The core components of Dash
The core components of Dash

Note: One of the main advantages of using Dash is that it allows us to create fully interactive data, analytics, and web apps and interfaces using pure Python without having to worry about HTML, CSS, or JavaScript.

As we can see in the illustration above, Dash uses Flask for the backend. For producing charts, it uses Plotly, which is not strictly required but is the best-supported package for data visualization. React is used for handling all components, and a Dash app is actually rendered as a single-page React app. The most important things for us are the different packages that we will be using to create our app, which we’ll be covering next.

The different packages that Dash contains

Dash is not one big package that contains everything. Instead, it consists of several packages, each handling a certain aspect. In addition, as we will see later, there are several third-party packages that are used, and the community is encouraged to develop their own functionality by creating special Dash packages.

The following are the main packages that we’ll mostly be using in this chapter, and we will explore others in later chapters:

  • Dash: This is the main package that provides the backbone of any app through the dash.Dash object. It also provides a few other tools for managing interactivity and exceptions, which we’ll get into later as we build our app.

  • Dash Core Components: A package that provides a set of interactive components that can be manipulated by users. Drop-downs, date pickers, sliders, and many more components are included in this package.

  • Dash HTML Components: This package provides all the available HTML tags as Python classes. It simply converts Python into HTML. For example, we can write dash_html_components.H1('Hello, World') into Python, and it will be converted to <h1>Hello, World</h1> and rendered that way in the browser.

  • Dash Bootstrap Components: This is a third-party package that adds Bootstrap functionality to Dash. This package and its components take care of a lot of options related to layouts and visual signals. Laying out elements side by side or on top of one another, specifying their sizes based on the browser’s screen size, and providing a set of encoded colors to communicate better with users are some of the benefits of using it.

Understanding the general structure of a Dash app

The following code snippet shows what generally goes into creating a Dash app. We typically have a file called app.py, although we can name it whatever we want. The file is shown as the segments in the widget below, with different parts split by lines, to visually distinguish between them. On the other hand, the comments mention the name of each step of the process:

Press + to interact
## imports (boilerplate)
import dash
import dash_html_components as html
import dash_core_components as dcc
## app instantiation
app = dash.Dash(__name__)
## app layout: a list of HTML and/or interactive components
app.layout= html.Div([
   dcc.Dropdown()
   dcc.Graph()
   ...
])
## callback functions
@app.callback()
...
@app.callback()
...
## running the app
if __name__ == '__main__':
   app.run_server()

Let’s look at each app part in detail.

  • Lines 2–4: Like any Python module, we begin by importing the required packages, using their usual aliases.

  • Line 7: This is a straightforward way to create the app—by creating the app variable in this case. The __name__ value for the name parameter is used to make it easy for Dash to locate static assets to be used in the app.

  • Lines 10–14: This is where we set the user-facing elements, or the frontend. We usually define a container element, html.Div in the widget, that takes a list of components for its children parameter. These components will be displayed in order when the app renders, each placed below the previous element. In the following section, we’ll create a simple app with a minimal layout.

  • Lines 17–20: This is where we define as many functions as needed to link the visible elements of the app to each other, defining the functionality that we want. Typically, functions are independent, they don’t need to be defined within a container, and their order doesn’t matter in the module.

  • Lines 23–24: Using the Python idiom for running modules as scripts, we run the app.