Quick intro to Dash Plotly: 5 min read
Why Dash may be the next choice for your monolithic business application?
Quite recently I’ve been fascinated by the beauty of NextJs. It comes very handy when you need to build a quick monolithic application with great visuals and deploy it fast. (Why would I separate Front-End and Back-End logic in two separate services when the is no serious reason for that?). Little did I know that there were many other frameworks, not necessarily written in JavaScript, (for instance, Plotly Dash framework in python) that could be better fit for a specific business application.
In this article, I want to tell you about my first encounter with Dash and why it was our choice over the NextJs and then I will briefly show you how to set up your first Dash app.
Why Dash Plotly?
A few months ago I joined a new project with a terrific tech stack and people. But the choice of Dash Plotly for the actual app in our domain surprised me a bit: “Why on Earth do we need a new full-stack framework when there is already widely used frameworks like NextJs or NuxtJs?”- I was repeating myself. Not going much into the details, after a while I realized that Dash Plotly indeed was the best choice for our specific needs.
Although there were dozens important reasons why Dash was our main choice, I want to bring you a few that personally considered the most important.
First of all, our application logic has lots of data wrangling, so for us using pandas, for instance, library in Python would be a time saver. Also our team needs constant inputs from Data Engineers who are comfortable working with Python but definitely not with JavaScript.
Secondly, our user interface (UI) doesn’t require advanced visuals: we are good with basic styling. Given these 2 main factors, Dash, which is written on top of Plotly.js and React.js, seemed to be ideal choice.
To see how a standard Dash app looks like, I have prepared a quick demo available in my GitHub profile (please, follow the link). Below I also provide the basic introduction to Dash based on snippets from that Demo.
Quick Demo
Let me walk you through a quick setup of Dash Application. You will be able to learn about the basic components provided in Dash and the usage of CSS and JavaScript code within this framework.
1. Setup
Dash team provides one of the best tech documentation I have ever seen. It is very detailed and clear. Covers almost everything you need. Please follow their installation guide and then put this code into action. Once you run this python script, it will launch your first Dash App locally.
from dash import Dash, html
import plotly.express as px
import pandas as pd
app = Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Global Fruits Market'),
html.Div(children='''
Comparing fruits production in different markets.
'''),
])if __name__ == '__main__':
app.run_server(debug=True)
Dash apps are composed of two parts: 1) the “layout" describes what the application looks like, 2) the rest of the code describes the interactivity of the application. As a next step, we will add a simple chart to our view, which is one of the important features of Dash Core Components (dcc).
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''Dash: A web application framework for your data'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])
Not going much into details, let’s move to the next part.
2. Styling
Similar to ReactJs, Dash allows you add inline styling to html elements.
Or you can simply assign classes to you html elements and add css files placed under the assets folder in Dash.
dash-app
|--assets
| '--app.css
|
'--app.py
3. Interactive Dash: Callbacks & JavaScript
Dash includes callback functions to handle property changes in components, including HTML elements. Below is the code snippet for the input element with id “input_example” where inserted characters are reflected in the div element with id “output_for_input”.
app.layout = html.Div(children=[
dcc.Input(
id="input_example",
type='text',
placeholder="Put some text here",
),
html.Div(id="output_for_input")])
@app.callback(
Output("output_for_input", "children"),
[Input("input_example", "value")],
)
def normal_callback(val):
return val
Similarly you can write the above callback in JavaScript literal inside python script. In that case, the javascript code will be loaded in the Browser instead of putting load on Dash Engine:
app.clientside_callback(
"""
function(val) {
return val;
}
""",
Output("output_for_input", "children"),
Input("input_example", "value"),
)Also you could have written the above JS code in a JavaScript file in the assets folder, the same place where we put our css files earlier:
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
input_change_function: function(val) {
return val;
}
}
});But then you must add a callback function in the python file to recognise the newly defined namespace from the browser context in the Dash:
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='input_change_function'
),
Output('output_for_input', 'children'),
Input('input_example', 'value'),
)All these snippets can be found in the demo project in GitHub.
Looking forward
As businesses evolve and time always remains the most valuable currency, we are going to see more domain specific frameworks like Dash, that will solve a few vital use cases or business requirements and save time for developers to focus on more important issues like security and infrastructure, or quickly move on to another project.
Dash expands fast and already provides more complex solutions in its Enterprise Version, which could become an industry standard for Data Teams.