Comparing Dash and Streamlit

powers_in_dash.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(
        id='num',
        type='number',
        value=5
    ),
    html.Table([
        html.Tr([html.Td(['x', html.Sup(2)]), html.Td(id='square')]),
        html.Tr([html.Td(['x', html.Sup(3)]), html.Td(id='cube')]),
        html.Tr([html.Td([2, html.Sup('x')]), html.Td(id='twos')]),
        html.Tr([html.Td([3, html.Sup('x')]), html.Td(id='threes')]),
        html.Tr([html.Td(['x', html.Sup('x')]), html.Td(id='x^x')]),
    ]),
])


@app.callback(
    [Output('square', 'children'),
     Output('cube', 'children'),
     Output('twos', 'children'),
     Output('threes', 'children'),
     Output('x^x', 'children')],
    [Input('num', 'value')])
def callback_a(x):
    return x**2, x**3, 2**x, 3**x, x**x


if __name__ == '__main__':
    app.run_server(debug=True)

powers_in_streamlit.py

import streamlit as st

x = st.slider('Pick x', 1, 100, 5)
f"""
| Formula | Result |
|---------|--------|
|  $x^2$  | {x**2} |
|  $x^3$  | {x**3} |
|  $2^x$  | {2**x} |
|  $3^x$  | {3**x} |
|  $x^x$  | {x**x} |
"""

The Dash example (top) was copied from the Dash User Guide.

Please note that this code sample is didactic and could be likely be shortened.

The Streamlit example (bottom) can be tried by running:

pip install --upgrade streamlit
streamlit run https://gist.githubusercontent.com/treuille/f7a6d005d9563c08fff2c2c029908a6b/raw/df1d8c80ce91b2fd09b3f3db18f1021ac25c6687/powers_in_streamlit.py

Have you compared both tools in other contexts? I'm currently evaluating them for simple dashboards and would like something quick to prototype, but that could be deployed for my company's internal use.

Hi @rodigo-borges!

These gists were simply an internal analysis to explore the difference in control flow between the two projects. If you're looking for simplified deploy in a corporate environment, I would suggest signing up for our Streamlit for Teams beta. Otherwise, there are numerous arguments on purely open source deployment strategies (EC2, Heroku, etc.) which you can find by Googling. :)

Apologies for the delayed response. Our primary means of communication is through the Streamlit forums, where you can get questions like this answered more quickly.

Happy app creating! :)

I will look into it (:

Thank you very much for the response, @treuille

Just a comment: the Dash code is from the tutorial chapter that introduces multiple outputs, but it's not necessarily the best way to achieve the result. This code is closer to the Streamlit example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(
        id='num',
        type='number',
        value=5
    ),
    dcc.Markdown(id='table', dangerously_allow_html=True)
])


@app.callback(
    Output('table', 'children'),
    [Input('num', 'value')]
)
def callback(x):
    if x is None:
        raise PreventUpdate
    return f"""
| Formula       | Result |
|---------------|--------|
| x<sup>2</sup> | {x**2} |
| x<sup>3</sup> | {x**3} |
| 2<sup>x</sup> | {2**x} |
| 3<sup>x</sup> | {3**x} |
| x<sup>x</sup> | {x**x} |
    """


if __name__ == '__main__':
    app.run_server(debug=True)

Oh. So cool @jkseppan! Thanks for pointing this out! Also, so funny that the nearly identical functionality is called dangerously_allow_html. 😆

I'd imagine that's borrowed from react's dangerouslySetInnerHTML: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml , for the same reasons.