# Introducing dash\_oop\_components: write modular, composable, configurable dash code! **URL:** \ **Category:** Dash Python\ **Tags:** show-and-tell\ **Created:** [October 26, 2020, 1:14pm UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481 "2020-10-26T13:14:36Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![oegedijk](https://avatars.discourse-cdn.com/v4/letter/o/a88e57/32.png) [@oegedijk](https://community.plotly.com/u/oegedijk)\ **Post date:** [October 26, 2020, 1:14pm UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481/1 "2020-10-26T13:14:36Z")
Hi everyone, I decided to take some of the design ideas from my [explainerdashboard](https://github.com/oegedijk/explainerdashboard) package and put them in their own library. The result is [dash\_oop\_components](https://github.com/oegedijk/dash_oop_components). The goal is to make it easier to write clean, modular, configurable dash code, by wrapping your dash code in object-oriented wrapper classes. (hence the name `dash_oop_components`). It includes: - `DashFigureFactory` : a wrapper for your data/plotting functionality. - `DashComponent` : a self-contained, modular, configurable unit that combines a dash layout with dash callbacks. - Makes use of a `DashFigureFactory` for plots or other data output - `DashComponents` are composable, meaning that you can nest them into new composite components. - `DashApp` : Build a dashboard out of `DashComponent` and run it. All three wrappers: - Automatically store all params to attributes and to a .\_stored\_params dict - Allow you to store its’ config to a `.yaml` file, including import details, and can then be fully reloaded from a config file. This allows you to: - Seperate the data/plotting logic from the dashboard interactions logic, by putting all the plotting functionality inside a `DashFigureFactory` and all the dashboard layout and callback logic into `DashComponents` . - Build self-contained, configurable, re-usable `DashComponents` - Compose dashboards that consists of multiple `DashComponents` that each may consists of multiple nested `DashComponents` , etc. - Store all the configuration needed to rebuild and run a particular dashboard to a single configuration `.yaml` file - Parametrize your dashboard so that you (or others) can make change to the dashboard without having to edit the code. The goal has been to invisibly automate as much of the boilerplate as possible, so hopefully it will be a delight to use! Please check it out! ## Install: `pip install dash_oop_components` ## Github: [https://github.com/oegedijk/dash\_oop\_components](https://github.com/oegedijk/dash_oop_components). ## Example: An example dashboard can be found at [github.com/oegedijk/dash\_oop\_demo](https://github.com/oegedijk/dash_oop_demo) and has been deployed to [https://dash-oop-demo.herokuapp.com/](https://dash-oop-demo.herokuapp.com/) ---
**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\ **Post date:** [October 26, 2020, 1:18pm UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481/2 "2020-10-26T13:18:28Z")
This is very cool, thanks for packaging this up nicely! ---
**Author:** ![xhlu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xhlu/32/12736_2.png) [@xhlu](https://community.plotly.com/u/xhlu)\ **Post date:** [October 26, 2020, 4:00pm UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481/3 "2020-10-26T16:00:34Z")
Really nice! Pretty excited to see how well this will work with pattern matching callbacks to access a `DashComponents` sub-components all at once. ---
**Author:** ![oegedijk](https://avatars.discourse-cdn.com/v4/letter/o/a88e57/32.png) [@oegedijk](https://community.plotly.com/u/oegedijk)\ **Post date:** [October 26, 2020, 4:21pm UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481/4 "2020-10-26T16:21:14Z")
Another cool thing is because you can keep track of all the subcomponents, you can also keep track of the state of particular layout elements, store them in the querystring and then reload that state from the querystring. So basically what I did here [https://github.com/oegedijk/dash\_querystrings](https://github.com/oegedijk/dash_querystrings) But then more user friendly 🙂 Got it to work, but need to clean up the code first. ---
**Author:** ![oegedijk](https://avatars.discourse-cdn.com/v4/letter/o/a88e57/32.png) [@oegedijk](https://community.plotly.com/u/oegedijk)\ **Post date:** [October 28, 2020, 11:15am UTC](https://community.plotly.com/t/introducing-dash-oop-components-write-modular-composable-configurable-dash-code/46481/5 "2020-10-28T11:15:37Z")
Added querystring to the library! > [@New in dash\_oop\_components: store and load state to/from url querystring!](https://community.plotly.com/t/new-in-dash-oop-components-store-and-load-state-to-from-url-querystring/46581): > > I realized that due to modular nature of the [dash\_oop\_components](http://github.com/oegedijk/dash_oop_components) library, it would be relatively straightforward to implement querystring support, so I did! For a lot of analytical web apps it can be super useful to be able to share the state of a dashboard with others through a url. Imagine you have done a particular analysis on a particular tab, setting certain dropdowns and toggles and you wish to share these with a co-worker. You could tell them to go to the dashboard with instructions to …