📣 Introducing Dash Labs (Dash 2.0 preview)

[AnnMarieW]

Wow - This is so cool!

If you want to take the templates for a test drive, check out this Theme Explorer site:
HelloDash

You can see the 6 different open source templates and how they look with different Bootstrap themes.

I’m unfamiliar with the “classic ipywidgets @interact decorator”, so I found that new callback syntax a little confusing at first - but I see the advantages. I’m looking forward to using that more. However, to get started, I found it much easier to use the first three examples in chapter 3 The template layout system. I think it’s much easier to relate to if you are familiar with the current version of Dash.

These templates are going to save a lot of coding time and are a great way to make really nice looking apps!

---

---

[curveball]

Very cool! I’m looking forward to more community templates. Is there a plan on how to share/discover templates?

Also, I didn’t know about plugins or Dash 2. Can I find more information about this somewhere?

[jmmease]

Hi @curveball.

Community templates can be packages as regular python packages and published to PyPI. We don’t have any specific plans yet for how to help people share and discover them, but for now the “Show & Tell” tag would be a great place to share and discuss them!

This post and the documentation linked above represent our current thinking of what we’d like to be in Dash 2, so there isn’t really any additional info out there yet.

Thanks for taking look!
-Jon

[adamschroeder]

Thank you for developing this. I’m sure it was months of hard work.

I think the CallbackEnhancements is a powerful development, as it enriches the Callback toolbox, making it easier and quicker to write the callback, with fewer limitations tied to Input/Output location and IDs.

As for the new TemplateLayoutSystem, I don’t think I would use it, for several reasons:

1. I have more control over the layout by using dbc.Row and dbc.Col instead of a pre-made template.
2. It might be fairly quick and easy to use a pre-made template and create a simple dashboard with a few components, but once there is a need for additional Dash Core components or a desire to customize the layout, it becomes increasingly challenging.
3. Adding components to a layout template with before, after, and the role arguments is less intuitive for me than putting them inside an app layout with dbc.row and dbc.col and letting the callback manage those roles.

Using the Template Layout might allow one to create an app with less code, but learning how to use the TemplateLayoutSystem was more difficult (for me) than learning Dash 1 app.layout - html.Div([...]).

In addition, I don’t think the TemplateLayoutSystem is conveniently scalable, compared to other Plotly products. Take for example, Plotly Express. PX is incredibly powerful because it offers Plotly users a framework to build many powerful graphs, with little code, bypassing the steep learning curve of Graph Object. And, when the user needs more graph customization and is ready to take advantage of all that Plotly has to offer, they can access Graph Object through fig.update_traces() or fig.update_layout(), etc.

This is not the case with the new Template Layout System. For one, I’m not completely sure the learning curve is less steep than the one for dash bootstrap for managing the app’s layout. Second, the user might build a very quick app with the template and its component constructs. But as soon as the user needs more control over the layout or component features offered by Dash, I think they are likely to drop the template layout system in favor of Dash Bootstrap as well as drop the component constructs in favor of Dash Core Components (at least, that’s what happened to me).

Once again, I appreciate all the work that has been put into this, and I think TemplateLayoutSystem is promising. Thank you.

p.s. if indeed the templateLayoutSystem could be a building block for larger and more complex apps, then, I would recommend further developing the documentation to make that clearer. When ready, I can create more tutorials on Youtube to help explain this as well.

[jmmease]

Hi @adamschroeder,

Thanks a lot for taking the time to try things out and writing up this great feedback. Glad to hear that the callback enhancements make sense to you.

The goal of this set of additions is to create something analogous to Plotly Express for Dash. Making it faster to get started with common use cases, but still providing a path to full customization. So it’s helpful to hear that it doesn’t quite hit the mark for you.

From your point of view as both a user and teacher of Dash, do you see a need for a more concise workflow for creating these kinds of simple apps? Or does the Dash 1 + Dash Bootstrap workflow already strike a good balance in your opinion?

Similarly, do you see a need in the Dash ecosystem to better encapsulate components and Python logic (like the serverside logic for DataTable)? Or does this not seem like a pressing need?

Obviously, the current template system and component plugin pattern aren’t the only strategies we could use to improve these areas. But it would be helpful to understand whether they seem to you like challenges worth tackling in the first place.

Thanks!

-Jon

[DaveG]

Posting this for a friend … Wanted to capture his raw feedback. “The templates look promising but feel a bit complicated/ components are hidden. Digging the new input/ output structure.”

[klalli]

Thanks, Dave! Here a the screenshot of the app I was able to turn over pretty quickly from the DbcSidebar example. What I’m not as clear on is:

• How would I actually start re-working the layout of one of the template examples? E.g., I like the multi-tab example, but would need to change the content for each tab.
• If a component constructor isn’t implemented yet in a template, this seems above my head to try and implement. Can I still drop in dcc components somehow, if I’m using the template framework?
• In general, what’s the right way to think about using templates modularly? E.g., this is the first of a number of basic calculators I’ll need to make and want individual visualization on. Long-term, these will be stitched together in various fashions depending on the use case. So… a way to manage complexity of multi-tab apps and modular layouts sounds great if the learning curve isn’t too steep!

Having fun playing around with the HelloDash explorer and think this will help with the “learn by doing” approach I’ve had fun with so far. Cheers,

Kevin

[adamschroeder]

Hi All,
I created this video tutorial to help explain some of the concepts within Dash Labs and to encourage more feedback on the topic so we can create a powerful Dash 2.0 that fits the needs of the community.

Link to video.

Do you understand the TemplateLayout system after watching the video?

• 1 = NO
• 2 = Getting there
• 3 = YES

---

Do you understand the Callback Enhacements after watching the video?

• 1 = No
• 2 = Getting there
• 3 = YES

---

If you’re a relatively new Dash user, do you think it would have been easier to get started using this new template system?

• 1 = No
• 2 = Maybe
• 3 = YES
• 4 = Not sure

---

If you’re an experienced Dash user, do you think it would be helpful to be able to build your own templates and/or component plugins to share with other Dash users?

• 1 = No
• 2 = Maybe
• 3 = YES
• 4 = Not sure

---

A. TemplateLayout system: feedback and suggestions?
I would suggest to add a couple more built-in templates that we can choose from.

Feedback from Nana Okyere: “I think it is harder to scale if you use a predefined templates. The enhanced callbacks are a welcome additions. I like the flexibility.”

B. Callback Enhancements: feedback and suggestions?
I loved the callback enhancements but when I first read over them I was a little bit confused with the “role” attribute. It could be assigned other strings beside “input” and “output” but what are those strings? Are they only the references to DBCSidebarTabs? What else can be assigned to role?

Feedback from Nana Okyere: “The enhanced callbacks are a welcome additions. I like the flexibility.”

[Eduardo]

Hi.

I’m not a programmer, last year I started learning Dash because it allows to build interesting web pages just knowing a little bit of Python.

Following the Dash documentation it was very easy to understand the logic of the layout and the callbacks. In a few months I was building interesting things.

I really think that Dash is an amazing tool also because it allows to scale from simple components to a very detailed integrated web pages, adding css and also it is possible to add javascript code if needed.

Now with all this experience I started to try Dash Labs, I saw the interesting video that Adam made and then I read (not deeply) the documentation presented here.

My first conclusion is that learning to use Dash Labs is much more complicated that learning Dash, also having some experience using Dash. I can’t imagine someone that do not have any previous experience.

I do not well understand the new layout, how to bild complicated web applications and control each part of the page and components sizes.

In my modest knowledge I can do anything with Dash and I do not understand what benefits I will have using Dash Labs. I can imagine that this could be usefull for experienced programers to add new components but in a first quick look I can’t see why.

Perhaps the way that the Dash Labs is introduced is confused (at least for me) and there is some adventage that now I can’t see, but for now I hope Dash 2.0 do not force to go to Dash Labs because I’m very confortable with the current version.

[adamschroeder]

Hi @jmmease,
I don’t see a need in the Dash ecosystem to better encapsulate components and Python logic. But this question would be better answered by Dash super-users. They might really appreciate the component plug-ins. I teach beginner to intermediate Dash on Youtube, which is why I don’t see a need yet.

As for your first question, I think the Dash 1 + Dash Bootstrap workflow strikes a good balance for creating apps. Nonetheless, I really liked the ease and quickness of creating an app with the template layouts system. The main concern I had there is how to reach a path with full customization. Say for example that I reach a point where I want to control the location on the page of my Input components. How would I do that with the template layout system? If I have to go back to using Dash 1 + DBC, then the template layout system - for me - is no longer a building block for bigger, more complex apps.

Right now, I seem to understand how to control the layout location of the Output components with the template layout system, but I"m not sure how to control the Inputs location if that’s something I’d like to do.

[hhoeflin]

I only have limited experience in this space, but I think one gap is the wrapping of react-components that have functional properties. If these could be exposed and targeted via custom javascript functions (possibly written in python and translated via transcrypt) this could be a really powerful way to get a lot more great react-components easily wrapped for dash. the dash-extensions package has gone some steps in this direction, would be great to see first class support.

[hhoeflin]

on the component properties, I wonder how callbacks would be embedded in the components (e.g. when I create a new component out of 2 other components and they need callback logic to connect them. Furthermore, the current components at least at first glance seem to be restricted, not giving me easy access to sub-components when needed.

I really like the template concept - but I think the templaces should be extended by including the callbacks in them. For me, the current pattern of defining callbacks with decorators is a big drawback as it makes building re-usable components hard - it assumes the “app” component is available. Instead, the template should carry the callbacks, and only when the template is connected to the “app”, the callbacks should be registered as well. (e.g. a little like blueprints in flask).

[jmmease]

Thanks a lot for the feedback everyone! I’m out of office this week, but when I’m back I’ll try to make some more examples that address some of the main questions here about templates. Like how to customize them, and how to use them as smaller parts of larger apps.
Thanks!
-Jon

[atharvakatre]

I agree with what @Eduardo said, the traditional layout building with rows and columns provided much more flexibility on the front-end.
Not sure how much flexibility the new TemplateLayout system will provide, but from @adamschroeder video it seems to be helpful and time saving for developing small apps.
The new callbacks is a great addition imo, grouping the inputs in a tuple is way better than the previous method of defining each input on a separate line.

[cepel]

Thank you for the new enhancements! The idea of making possible to create and publish custom templates is my favourite.

Even I think the Dash 1.X is very easy to understand, I believe that companies tend to use Dash for its flexibility instead easy implementation. However, there are many students and individuals develop Dash applications for prototyping or PoC’s, and (an optional) simpler syntax will be helpful for them.

From my perspective, automatically ID assignment in Callbacks has a great potential for implementing the visualizations, at least in the first versions of the application.

I don’t think that I will use the new PredefinedTemplates too, because I always leave the door open for future enhancements of my applications, and Dash 1.X seems more flexible.

I appreciate your effort of making possible to develop powerful applications for everyone. I hope the syntax will be simpler in the future versions of Dash Labs. Because the learning curve seems same for me.

[adamschroeder]

Adding Feedback from another member, Eugene T.
It’s heartening to know that there’re updating to improve dashboard layout, it was always such a chore to nest html.Divs / dbc.Rows / dbc.Columns etc.

[hhoeflin]

I agree with you about these concerns. For the issue is the distinction between templates and components at all. They are highly related (in the sense that a template is a component that takes children components) and so could be composable in their own right if the power of components was increased (e.g. to include callbacks). The a sidebar-template would just be a component that could be nested in other components (e.g. in a template with a header on the site).

[10hith]

This is great new; totally love the callback improvements and the pulgin example for DataTable.
I am behind a firewall and pip install particular has issues for me.

Can you please confirm a conda installation for the dash-labs will be available now?

[adamschroeder]

Hi @hhoeflin , I’m curious about this suggestion. Can you please elaborate?
The way I understand it, Dash components are nested within the sidebar- and other - templates because all components go inside the layout. Are you suggesting to do it the other way around, nesting template inside the components? How would that work?