1. Reusable Dash components
Let's learn how to make our code compact and clean.
2. DRY Code
An important concept in programming is DRY, which stands for don't repeat yourself. This is sometimes called refactoring as well.
It is good practice to reduce the code lines where possible to reduce complexity and make it easier to change code later.
In Python, this is often done via creating functions for repeated work.
3. DRY Code example
Let's see an example here from previous exercises. Here we want to aggregate the sales data by country and sum the order value, while renaming the aggregated column and sorting.
What if we want to do something similar but aggregate by major category. See how much code is the same?
We could refactor by creating a function to do the work, given a column name.
Now we can call the function in one short line each time - we can even aggregate by minor category now.
4. DRY in Dash
In Dash, we can apply the DRY principle and refactor code using Python functions. This is important considering how long the code for our Dash apps is becoming.
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 quite 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.
Here we insert the logo three times. That's some nice DRY code!
6. Generating a component list
Let's look at another example. In this app, it seems common to use a number of breaks to provide spacing.
Let's create a function that will return any number of Dash HTML break components. The make_break function here takes an argument specifying how many HTML breaks to create and put in the list inside.
Now inside the layout, we can call the function to have it return breaks in-line. Note the star before the function call to expand the result in-line. This is specifically useful for returning a list of items.
7. Reusing styling
Instead of creating entire components, we may want to add common 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.
As you can see here, now we have one encompassing dictionary.
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 re-usable components and styling in our Dash apps.