One of the cool things about Dash is the ability to create custom components. Although this allows for a near-infinite number of new creations, we are aware that this is a not a simple process. There have been a few guides written so far:
We’d like to open up the discussion to receive feedback on ways we can make this process easier and more beginner-friendly. We’d love to hear from community members that have built a few components: what are some best practices or tips on getting started?
The first thing you should do is to maintain your boilerplate better. At this moment, there are 49 unresolved issues and 1 pr, and the last update of this project was some small changes for the version adaptation 9 months ago.
These guides are well written. My suggestion is to add a guide to webpack.config.js. And encourage learners to use a newer package manager, such as yarn>3.0, to reduce the dependency issues they may encounter.
All the rest are React. Don’t just tell beginners what React is. They need a more specific to-do list. For example, if a beginner understood what state management and type verification are, he/she may immediately write his/her hello world component. Then the beginner has more confidence to continue exploring.
And I’m going to say the most important thing now, that is, the open source community and commercial operations require a connecting point. I noticed you guys open-sourced AG Grid this week. Great, we finally have a decent table component ready to use. I wonder about the license part, whether I have to set it up every time I use the paid features of this component? I’d much rather have this done by Dash(). Furthermore, I expect dash to have something like a license manager to manage things like licenses and tokens in a unified way. Then this stuff may develop into a unified payment portal in the future. On the one hand, it can make it easier for community developers to get paid, and on the other hand, your team can track user preferences to do business research or release more flexible retail versions.
One of the ways to make something easier is to get more people involved. Of course, you can’t expect a group of beginners to promote each other. We need more capable people involved to create an atmosphere of facilitation and learning, and in my experience, this is where I feel things get easier. Since I first got to know Dash, I was thinking about creating my own components, but just relying on those little explanations of the documentation, I couldn’t play with your template at all until the faculty.ai and Emil 's projects appeared. As far as I know, I can count the current powerful component developers with one hand, and they are all driven by love. I can’t wait to see more rich components appear, you should give more vitality to this matter to attract more professionals. We need a virtuous circle.
For anyone wanting to go above and beyond the basics, making components is pretty cool and it’ s a great way to learn more about how Dash works under the covers.
And yes, you would either need to have some React and JavaScript skills or be willing to learn. Getting more people involved will help create a larger “virtuous circle” that @stu mentioned. One does exist already – the Dash community is awesome and you can see it in action every day here on this forum, stackoverflow the Dash Mantine Components Discord channel, and in other community projects.
If you would like to learn more about making components, I’d like to encourage you to get involved with the Dash AG Grid project. The community developer team is getting support and guidance from Alex Johnson, the CTO of Plotly. There are opportunities for people of all skill levels to contribute - from helping with the docs, adding examples, writing test, fixing bugs, and adding new features to the component. Not to mention— it’s a lot of fun! Please contact @adamschroeder for more info.
A while ago, I started working on some suggested changes for the Creating your own components section of the dash docs. It’s not completed yet, but I thought what I have might be helpful. You can find it in the Book of Dash GitHub in the Bonus Content Folder (along with some other short articles and tutorials).
I just started a Tips & Tricks section. Feel free to add to it!
Part 5 Creating your own Components – Tips & Tricks
Testing
Prior to using a new component in a production environment, it’s a best practice to create tests, especially if it’s a complex component or a component library. The dash-component-boilerplate creates a simple integration test for the sample component. To start, you can modify that test to use with your own component.
To see examples of converting Dash components from classes to functions, check out the dash-bootstrap-components library. The components were refactored to use functions and hooks in 2020. If you look at the git history, you can see the before and after and it makes it really easy to see how to make the components both ways. See for example the conversion for the dbc.Alert component.
Start by going through the Custom Dash Component guide from scratch; you’ll see that the Dash-Component-Boilerplate tool has been broken for months due to package incompatibilities.