Reusable Dash components

1. Reusable Dash components

Let's learn how to make our code compact and clean.

2. DRY Code

An important programming principle is DRY - Don't Repeat Yourself. It's also called refactoring. Reducing repeated code helps simplify logic and makes it easier to update things later. In Python, we often do this by writing functions for repeated tasks.

3. DRY Code example

Here's an example from previous exercises. We want to aggregate sales by country - summing the order value, renaming the column, and sorting. Now, imagine doing the same for the major category. A lot of the code is identical. Instead, we can write a function that does the work based on a column name. Now we just call the function each time, even for a minor category. Much cleaner!

4. DRY in Dash

In Dash, we can follow the same approach and refactor with Python functions. This becomes really helpful as our Dash apps grow. Some common use cases for this include: re-using HTML or any other component by creating a function to generate the component, and adding consistent styling. We have seen how much code can be dedicated to CSS as it is pretty fiddly. It is also more efficient for updating styles. Now we only need to update in one place rather than many.

5. Re-using components

Let's consider an example of a heavily CSS-styled logo due to some corporate design guidelines. Look at all that CSS! This will clog up our app in no time if we use the logo multiple times. Let's instead create a Python function that returns the Dash component, as seen here. Now we can call this in our app layout wherever we want the logo. A perfectly styled logo will be inserted wherever we call the function. In this example, we insert the logo three times - clean and DRY!

6. Generating a component list

Here's another example. Suppose our app uses multiple line breaks to add space. We can create a function called make_breaks that returns a list of html.Br() elements, based on a number we pass in. In the layout, we call this function and use a star before it to unpack the list inline. That makes it easy to reuse spacing wherever we need it.

7. Reusing styling

Now let's say we don't need an entire component, just shared styling. Here we can take advantage of Python's dictionary dot-update method. Let's see an example. Beware, we must make sure our dictionary keys are unique; else, there may be unexpected results. If we have a Python dictionary, then calling the update method with another dictionary will merge the two together. Now we have one dictionary that includes both sets of styling rules.

8. Styling functions in Dash

Let's see how we could implement this in Dash. As before, we first set up a Python function. This function returns a dictionary with several styling options. Now we need to call the function within our Dash layout. Here, we call the function to use only the styling defined in the function. This is one option. Alternatively, we may have unique styling for the element. Here we create the individual styling, then update it to include the corporate styling.

9. Let's practice!

Let's practice using reusable components and styling in our Dash apps.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.