Document tips and tricks + best practices for contributing models, panes, layouts and widgets

[MarcSkovMadsen]

My Pain

I'm trying to contribute a PyDeck pane to Panel. And it's difficult as there are many things to learn and it's not documented.

I have to use a lot of features and understanding from Bokeh, use typescript and understand the architecture of Panel.

I can look at the existing code base and then go by trial and error.

It would be helpfull if there was some kind of guide providing

• A general overview of what is needed and the architecture involved
• A few examples (Maybe these are just links to the code of some simple, well documented files)
• Some documentation on how to build an compile the extensions.

A lot of the knowledge is really Bokeh knowledge, so maybe that documentation should be improved as well.

I believe that lowering the friction to contributing to Panel could enable a lot of awesome contributions of new templates, models, layouts, panes and widgets. Some of the things I would hope to contribute or see are more awesome looking layouts and widgets. That would be awesome.

Solution

Document tips and tricks + best practices for contributing models, panes, layouts and widgets

[MarcSkovMadsen]

I believe one of the things that makes it hard for people to contribute to or extend Panel is the lack of documenting in this area.

Inspired by the recent launch of Streamlit Components I've started working on this.

I actually hope that this could be integrated back into Bokeh and/ or Panel. But I would need help from @bryevdv or @philippjfr to tell me how.

For example I think it would be a good idea to show the code examples as notebooks in the Panel Gallery in the section External Libraries (pn.pane.HTML extension examples) and Panel Extensions (Bokeh extensions examples).

For now I think a separate repository is fine in order to speed things up in the initial phase.

There are also things that I think are essential to describe and hope some skilled bokeh/ .typescript developer like @mattpap could help contribute or just get me started on. For example

• How to develop, test and debug bokeh models.
  • How to efficiently use VS code in the process.
• How to use a front end framework like react, vue or maybe angular.

I would also hope that an advanced developer like @xavArtley could see that this is important for Panel and could share his tips and tricks. And someone who cares about lowering friction like @maximlt could come with helpful hints and suggestions.

You can find the repository here https://github.com/MarcSkovMadsen/panel-extensions-template

I will draw inspiration from Streamlit Components Documentation and the Streamlit Component Template on Github. I believe the flood of new Streamlit components that we will see will actually make it easier to create components for Panel as well.