Last active
July 10, 2020 13:15
-
-
Save treuille/f7a6d005d9563c08fff2c2c029908a6b to your computer and use it in GitHub Desktop.
Comparing Dash and Streamlit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} | | |
""" |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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! :)