Welcome to Dash, Julia!

Dash R, MATLAB, Julia Dash Julia
1

The trinity is complete. Today, we’re thrilled to announce that Dash is now available for Julia users! Downloaded over 17 million times, Julia is a high-level, high-performance dynamic language for technical computing.

Part of the Jupyter trinity, Julia is a natural addition to the already-existing Python and R frameworks. It offers a clear and expressive syntax with incredible performance and scalability, a perfect companion for Dash’s lightweight and stateless back end.

On Wednesday, October 21st @ 1pm EDT, we are officially bringing together the Dash and Julia communities with a launch webinar.@alexcjohnson, Plotly’s Chief Technology Officer, and Matt Bauman, Julia Computing’s Director of Applications Engineering will share how to build, deploy, manage, and share interactive dashboards with Dash for Julia. In the meantime, check out our Medium announcement post and the Getting Started chapter of the Dash for Julia documentation!

Getting Started with Dash.jl

:new: :arrow_right: Dash for Julia Official Documentation

As mentioned in the basic documentation, Dash is a unique framework in that it’s built on top of two simple principles:

  1. Declarative components that comprise the layout
  2. Callback functions that observe & update component properties

To be proficient in Dash, you need to learn the basic callback structure (callback, Input, Output, State) and the properties of the components.

The current Julia documentation covers the basic callback structure but does not yet comprehensively cover the components or their properties.

Until the remaining component reference documentation is available online, here are a few strategies to learn about the available properties and component libraries:

  1. Use Julia’s built-in help viewer, which will provide useful information on component props and their types for every Dash.jl component. Here’s an example of what you’d see for dcc_dropdown. id, options, value, title, etc are the component “properties” that are observable and update-able.

    julia> using DashCoreComponents

help?> dcc_dropdown
search: dcc_dropdown

dcc_dropdown(;kwargs...)

Dropdown component. Dropdown is an interactive dropdown element for selecting one or more items. The values and labels of the dropdown items are specified in the options property and the selected item(s) are specified with the value property.
Use a dropdown when you have many options (more than 5) or when you are constrained for space. Otherwise, you can use RadioItems or a Checklist, which have the benefit of showing the users all of the items at once. Keyword arguments:

• id (String; optional): The ID of this component, used to identify dash components
    in callbacks. The ID needs to be unique across all of the components in an app.
• options (optional): An array of options {label: [string|number], value: [string|number]},
    an optional disabled field can be used for each option. options has the following type: Array of lists containing elements 'label', 'value', 'disabled', 'title'. Those elements have the following types:
• value (String | Real; required): The value of the dropdown. This value
    corresponds to the items specified in the value property.
• title (String; optional): The HTML 'title' attribute for the option. Allows for
    information on hover. For more information on this attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/titles
• value (String | Real | Array of String | Reals; optional): The value of the input. If multi is false (the default)
    then value is just a string that corresponds to the values provided in the options property. If multi is true, then multiple values can be selected at once, and value is an array of items with values corresponding to those in the options prop.
• clearable (Bool; optional): Whether or not the dropdown is "clearable", that is, whether or
    not a small "x" appears on the right of the dropdown that removes the selected value.
• loading_state (optional): Object that holds the loading state object coming from dash-renderer. loadingstate has the following type: lists containing elements 'isloading', 'propname', 'componentname'.
• persistence (Bool | String | Real; optional): Used to allow user interactions in this component to be persisted when
    the component - or the page - is refreshed. If persisted is truthy and hasn't changed from its previous value, a value that the user has changed while using the app will keep that change, as long as the new value also matches what was given
    originally. Used in conjunction with persistence_type.
• persisted_props (Array of a value equal to: 'value's; optional): Properties whose user interactions will persist after refreshing the
    component or the page. Since only value is allowed this prop can normally be ignored.
• persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored:
    memory: only kept in memory, reset on page refresh.
    local: window.localStorage, data is kept after the browser quit.
    session: window.sessionStorage, data is cleared once the browser quit.

  2. Visit the Dash for Python documentation reference. Dash shares the same components across all languages with the exact same set of properties. These properties are observable and updatable by callbacks. For example, see:

The “reference” section of these components in Python is equivalent to those in Julia. The examples themselves will use the data structures available to them in their native language but this should point you in the right direction.

Contributing

The Dash for Julia community is brand new and we need your help! Here are some ways to contribute to Dash for Julia:

  1. Read the docs, create an app, and let us know how it goes! :rocket:
  2. Share the Julia app that you’ve made in this community forum with the show-and-tell tag :tada:
  3. Create a component and share it with the show-and-tell tag :building_construction:
  4. Help others with their Julia questions in this forum :globe_with_meridians:
  5. If you’ve already written a Dash for Python component, then make a few changes to make your component available to the Julia community. See “Adding support for Dash.jl components”. :package:
  6. Contribute to the documentation. The repository which hosts the content for all three languages is https://github.com/plotly/dash-docs/. We’d like to share the same structure across all three languages for maintainability. To bring the Julia docs up to speed, we’ll need to translate the remaining pages of the Python docs into Julia. This is a great way to learn Dash for Julia! If you are interested in working on this, check out the structure of the Julia pages in https://github.com/plotly/dash-docs/ and submit a PR. Feel free to comment below or DM me if you need some help getting started here :slight_smile:
  7. Share Dash for Julia within your community. We have an active Twitter account (@plotlygraphs), there is a community-led LinkedIn group, we publish on Medium, and more. If you’d like to write a blogpost, I’m sure the Towards Data Science publication on Medium or others would be interested in your post :memo:

Feedback

Let us know how things go with Dash for Julia! We’d love to see the apps that you’ve made or learn more about your experience. Feel free to comment below or open a new thread in the Dash for Julia forum.

6 Likes
3

Awesome and interesting article. Great things you’ve always shared with us. Thanks. Just continue composing this kind of post.