Welcoming Dash 1.0.0

plotly
plotly
Jun 27 · 8 min read

It’s hard to believe that just two years ago, we released Dash. The last two years have been a whirlwind—we’ve made over 100 releases containing bug fixes and new features, we’ve introduced 10 brand new chart types, we’ve published 5 new first class component libraries, and I’ve personally spent over 130 hours helping folks out on the Dash community forum.

Dash’s active community forum with 19 active discussions over the last 24 hours. To everyone in the community, thank you. Thanks for keeping the community productive, friendly, and accessible. Thank your feedback and candor and patience. We couldn’t have gotten to 1.0.0 with you ❤️

Why 1.0.0?

At Plotly, most of our projects adhere to semver which means that in the 1.x.x. series we won’t be making any breaking changes to Dash. In this sense, it’s a big release. 1.0.0 commits us to a promise that the library is stable and continues to be production-ready, and that no breaking changes will be added to Dash for the near future. In another sense, it’s not a big release — Dash has been production ready since day one. With the community and commercial uptake, we’ve been very careful about breaking changes for the past two years.

With 1.0.0, we’re taking the opportunity to make this commitment official and to streamline the interface with a few breaking changes for the days ahead.

While 1.0.0 is significant symbolically, we haven’t changed anything at the core of Dash. We’re proud of this — Dash’s architectural foundations are solid. As we continually refined Dash over the past 2 years, talking and working with Dash users, we developed new features that outdated old ones, discovered which settings were awkward or confusing to new users, and overall accumulated a lot of ideas for how to improve the experience of building Dash apps. With 1.0.0, we’re resolving some of the friction that users experienced with Dash by streamlining Dash Core Components and changing some parameter names and configuration settings to be friendlier and more semantic. Essentially we’re taking all that we’ve learned from our community and making Dash more intuitive and powerful for years to come. For a full list of what’s changed, and what breaking changes you’ll need to reconcile in order to upgrade, see the Dash 1.0.0 Migration Guide.

An excerpt from Dash’s 1.0.0 migration guide.

Reflections

As we reflect on the last two years, we recognize that our development was anchored by two core principles of Dash:

  1. UIs are assembled with declarative components, whose richness and state are completely described by their properties.
  2. UIs are updated with reactive, functional callbacks that provide a simple & unified interface for observing and updating any property of any component. Since callbacks are written in Python or R, they can do anything: query any database, make any API call, or run any model.

With 1.0.0, we’d like to take this opportunity to highlight the evolution of Dash from the perspective of these principles.

Two Years of Declarative Components

Dash’s components are building blocks. Assemble them in creative ways to create unique and productive user interfaces. They are plugins with consistent, auto-generated Python (and soon, R!) interfaces to rich JavaScript & React.js based UI elements.

Over the last two years, we’ve created 6 new component libraries using the same open source plugin toolchain that is available to the community.

Dash DataTable is an editable spreadsheet component that we wrote from scratch in Typescript. It’s first-class Dash interface enables client side and server side filtering, sorting, paging, conditional formatting, editing and more. It has built-in types and cell renderers like dropdowns. Like all dash components, every property of the table is observable — write callbacks that respond to row selections, filtering operations, or cell edits.

A DataTable component populated by a Pandas DataFrame and connected to a Graph component.

Dash Bio is a suite of bioinformatics components. dash_bio provides a Dash interface to many JavaScript libraries like that were previously difficult to connect to from Python. Read more about Dash Bio in our announcement post or the documentation.

https://cdn-images-1.medium.com/max/1400/1*OkW6Yw4Fhfl7kiivP0ughQ.png
Displaying relationships between chromosomes with a dash_bio.Circos component.

Dash DAQ is a set of beautifully-styled technical components for data acquisition, monitoring, and engineering applications.

Dials, guages, indicators and more. Screenshot pulled from a statistical process control (SPC) Dash app that monitors real-time process quality along a manufacturing production line.

Dash Canvas is an interactive image editing & annotating component. It can be used as the UI for scikit-image models or combined with the dcc.Upload component for annotating user uploaded images.

Annotating images and measuring distances with the dash_canvas component.

Dash Cytoscape is a network graph visualization component. It extends and renders Cytoscape.js.


Dash Design Kit is a no-CSS-required design and layout framework that’s available as part of Dash Enterprise. Like all other components, it was written as a separate module via the open source plugin toolchain, enabling independent development and release cycles. It includes a set of layout elements like Cards and Menus as well as a no-code-required theme editor that skins all of the elements on the page.

A live website traffic Dash app with the Dash Design Kit theme editor popped out.

Two Years of Callback Development

As we mentioned in the original announcement post, reactive callbacks are a key architectural principle of Dash. Functional callbacks keep Dash apps stateless which makes them easy to scale (just add more workers!). Since launch, we’ve doubled down on the callback architecture with many new features that build off of these principles. All of these features were introduced in the 0.x.x. series and are unchanged in 1.0.0.

The Dash Dev Tools initiative brought the callback chain front and center to the Dash development experience. The callback DAG (directed acyclic graph) displays the relationships of inputs and outputs in your app. The green circles represent functions, the grey bounded boxes represent components, and their inner blue boxes are component properties. Since callbacks are such an important concept in Dash, we’ve provided this view by default when you are develop your app ❤️

A graphical representation of the inputs and outputs of a Dash application. This view is provided by default as part of our Dash Dev Tools initiative.

Last year’s multiple outputs effort was a simple addition to the fundamental API, enabling Dash developers to efficiently update many elements on the page within a single HTTP request. It was a powerful feature that fit in cleanly to our overall API.

# Update a single graph when the dropdown changes
@app.callback(Output('graph-1', 'figure'),
[Input('my-dropdown', 'value')])
def update_graph(dropdown_value):
new_figure = some_computation(dropdown_value)
return new figure
# or update several graphs when the dropdown changes
@app.callback([Output('graph-1', 'figure'),
Output('graph-2', 'figure'),
Output('graph-3', 'figure'),
Output('graph-4', 'figure')],
[Input('my-dropdown', 'value')])
def update_graph(dropdown_value):
new_data = some_expensive_computation(dropdown_value)
fig1, fig2, fig3, fig4 = create_graphs(new_data)
return [fig1, fig2, fig3, fig4]

Similarly, supporting clientside callbacks was another feature that fit in nicely to Dash’s reactive, callback oriented architecture. Clientside callbacks enable you to write callbacks in JavaScript in the client rather than Python, enabling a “escape hatch” for high performance applications.

A Dash application that mixes and matches serverside (Python) callbacks with clientside (JavaScript) callbacks. The dropdown filtering and radio button selections are performed in JavaScript while refreshing the data is performed in Python.

Dash’s loading states provided a generic and declarative way to display a loading UI on “output” components that were awaiting an update from a callback.

Built-in loading spinners and animations as part of the `dcc.Loading` component.

Looking Ahead

Reflecting on the the last two years of development, we’re encouraged that these features could be introduced without making any breaking changes. With 1.x.x, we’re excited to expand our modular component libraries & introduce even more flexibility into the callback signatures like wildcard properties.

Dash’s underlying code is primarily in JavaScript and since day 1 we’ve taken great lengths to enable alternative Dash backends. Keep an eye out for a formal Dash for R announcement.

On the graphing side, Dash’s dcc.Graph component leverages our open source graphing library plotly.js. Over seven years, we’ve made 141 releases without introducing any breaking changes. We’re committed to maintaining this momentum and to our new grammar-of-graphics-inspired charting interface, plotly.express. This summer, look forward to new chart types like GeoJSON choropleths & treemaps, revamped documentation, and a continued effort to chip away at the long tail of community-requested chart customizations & attributes.

All of this development has been funded by our customers either directly or via our Dash Enterprise offering. Dash Enterprise is our recommended solution for enabling a Dash Practice at your organization. Dash Open Source provides the UI toolkit while Dash Enterprise provides a managed solution for the other layers of analytic application stack: application deployment & orchestration, authentication & authorization middleware, no-CSS-required theming & branding, point and click access controls, Python task scheduling, data caching, PDF generation and more. Many thanks to all of our customers that have supported us so far ❤️

Screenshot of a collection of Dash apps hosted on an instance of the Dash Enterprise platform.

More Resources & Further Reading

Keep it up everyone ❤️

Plotly

Plotly is a data visualization company that makes it easy to build, test, and deploy beautiful interactive web apps, charts and graphs—in any programming language.

Thanks to Alex Johnson and Jane Price

plotly

Written by

plotly

The easiest way to chart and share data online.

Plotly

Plotly

Plotly is a data visualization company that makes it easy to build, test, and deploy beautiful interactive web apps, charts and graphs—in any programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade