The State of Data Websites and Portfolios in 2020 - Develop a Dashboard in a Day, Dash vs Streamlit and is JavaScript still king?

The State of Data Websites and Portfolios in 2020 - Develop a Dashboard in a Day, Dash vs Streamlit and is JavaScript still king?

ยท

6 min read

Having a visual product, website or dashboard to show what your arduous efforts on a coding/machine learning project amounted to is something truly spectacular! Yet, it's often extremely difficult as numerous tools and technologies are usually required. Don't stress though, we'll discuss and compare two frameworks (Dash and Streamlit) which make it simple and easy to create an impressive portfolio (without a steep learning curve)!

The Story

You just created a machine learning model. It took a long time, but it's finally done, and you want to take in your victory for a second. You deserve a break... but wise old you knows the importance of creating a monument to show off your work.

You take the natural next step, looking up how to build a website. They begin with Python frameworks like Flask and Django, then proceed to JavaScript and before long you're stuck contemplating which front-end framework to use, and how you'll parse the data between the Python back-end (model) and JavaScript front-end (actual website). Oh, boy... this is a long and dark rabbit hole to scurry through. But then out of the blue, you hear that there is an easy solution for simple websites. You look up this new shinny framework (Streamlit), and it sure is easy ๐Ÿ˜Š and quick to use. Before long you've forgotten all your troubles and insecurities! But then you suddenly realise Streamlit's catch... it only works for simple Jupyter notebook-esk websites. It's all aboard the web dev train again for you. Requests and JavaScript, here you come ๐Ÿ˜ฐ.

It doesn't have to be that way though... you can find middle ground. Something simple enough to be understood in a few days, but complex enough... well, for nearly anything ๐Ÿค“! Welcome to Dash. You still need to know a few web fundamentals (HTML and CSS), but at least your development journey has a clearly defined path ahead. Even if it feels slightly clunky, it does get the job done well enough!

The whole process can be dumbed down to three decisions:

  1. What you want on the page (text, graphs, tables, images, etc)
  2. How to arrange and style the page (using CSS)
  3. How you want the user to interact with the page

No JavaScript, HTTP requests or even multiple separate frameworks for the front and back end any more!

Get Started with Dash

To get started, make sure you have Dash installed. With plain vanilla Python use pip install dash and for Anaconda conda install -c conda-forge dash. Next, create a new Python file and import the relevant libraries:

import dash
import dash_core_components as dcc
import dash_html_components as html

If you try and run the app so far, you'll notice one thing - nothing happens. That's because we actually have to create a Dash app object and tell it to start.

app = dash.Dash(__name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"])
app.title = "Allocate++"

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

We can include a style sheet (CSS using external_stylesheets) and set our website's title (app.title) to make things look better. Checking that __name__ == "__main__" just ensures that the website only launches when directly started (not when imported in another file).

If we try to run this code, in the terminal we'll get a message like:

Running on http://127.0.0.1:8050/
Debugger PIN: 409-929-250
 * Serving Flask app "Main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
Running on http://127.0.0.1:8050/
Debugger PIN: 791-028-264

It indicates that your app has started and can be found using the URL http://127.0.0.1:8050/. Although it's currently just a blank page (real fancy-schmancy), it does indicate that everything is working fine.

Once you're ready to progress, try adding in a heading:

app.layout = html.H1(children="Fancy-Schmancy Website")

After you save the file, that website should automatically reload. If it hasn't reloaded, or there are popups on the screen, you probably have an error in the source code. Just check the actual terminal/debugger for more information.

Now that you're familiar with how to get a basic website, let's move onto transitioning your concept into code. It starts with what's called a layout, which is composed of components. Dash provides core (dash_core_components) and HTML (dash_html_components) components. You always start using the HTML elements, since they provide the basic building blocks for text and grouping components together, before moving onto the core components. Core components offer more interactivity (graphs, tables, check box's...). It's now natural to ask, how to style the web page. In short, you use CSS (cascading style sheets) for this. Dash themselves provide concrete overviews of core components and trusty Mozilla have an amazing HTML and CSS intro. Several examples of how to use the elements are here.

The last part of any Dash app is making it responsive. Getting the buttons you click, text you enter and images you upload... do something! This is where things would normally get difficult, but here it really isn't too bad. With Dash, all you've got to define is a function which receives and controls specific element/s properties. Properties start with the "@" symbol.

@app.callback(
    [dash.dependencies.Output("output element id", "property to set value of")],
    [dash.dependencies.Input("input element id", "input property")]
)
def update_output(value):
       return value

We can do this for multiple elements by adding more Input and Output objects to those lists! One thing to watch out for here though - more Input objects means more inputs to the function are required, and more Output objects mean more values to return (sounds obvious, but it can easily slip your mind). Also, note that you shouldn't modify global variables within these functions (this for technical reasons is an antipattern). Further documentation is provided on these callbacks.

Going Forwards and JavaScript

There it is, everything you'll need to know to start creating an interactive and impressive web application! It'll likely still be difficult to create one, but the official documentation and tutorials for Steamlit and Dash are amazing. There are also cool galleries of sample apps using Dash and Streamlit (so you can learn from others examples).

Of course, there are use cases for JavaScript. In fact, you can build plugins for Dash with JavaScript/React and D3.js. Hell, if you are already comfortable with web technologies it may even be easier for you to use them. However, using JavaScript isn't 100% necessary to build websites any more (it's more so optional). It may be useful to know about web technologies, but if your aim isn't to become a full-stack web developer, you don't need to become an expert to put together a flashy portfolio ๐Ÿฅณ!

I hope this has helped you out! Dash helped me hack together my first dashboard in a day. If you've made a cool website, app or portfolio make sure to comment and tell me about them. Feel free to check out my other posts - some highlights are practical coding tools, web scrapping and machine learning (with the practical project). You can follow my newsletter and Twitter for updates ๐Ÿ˜‰.

Photo by Luke Peters on Unsplash