[FEATURE] Tighter integration with React

[AjayThorve]

Is your feature request related to a problem? Please describe. Bokeh integration with React has a lot of potential, one of them being ability to leverage awesome libraries like react-grid-layout, but I could not find any usable examples of bokeh templates working with react.

I ended up writing a couple of examples demonstrating the same here - (https://github.com/AjayThorve/bokeh/tree/react-grid-layout-example/examples/app/dash-react-grid-layout), which prompted me to open a discussion about the possibilities of a tighter integration with react!

Also, I would appreciate a review of those examples and suggestions of if and where can they be added to bokeh repo/docs.

Describe the solution you'd like Open to discussion - one of the suggestions -> Ability to serve a react application with a bokeh backend natively?

Describe alternatives you've considered Merging html templates with jinja server-side rendering along with precomplied react

cc: @bryevdv

[bryevdv]

cc @bokeh/dev @shughes-uk @jbednar @jsignell

This example or something based on it should go in both the examples and the docs. This is is the sort of use case many people are clamoring for lately. The capability seems mostly there, we have just not done much in the way of documenting or demonstrating how to accomplish things like this.

Would love any feedback on the particulars of this example or how it could be improved or streamlined even further using existing Bokeh. Also interested in any changes we could make on our end to make things smoother/simpler.

Questions:

• Where should this go in examples? Should the existing dash example be updated to demonstrate React integration? Or should we start a dedicated place to show off integration with multiple different frameworks?

• Same question for docs, where should info (at least links to examples) go? We could add to the existing layout section if we want to expand the meaning of layout past pure bokeh layout

@AjayThorve can you elaborate on

Ability to serve a react application with a bokeh backend natively?

somewhat? This is purely my igorance of front-end/react but I am not sure what is being proposed here.

[AjayThorve]

Ability to serve a react application with a bokeh backend natively?

somewhat? This is purely my igorance of front-end/react but I am not sure what is being proposed here.

Not a 100% sure of how this would work, but what I meant was replacing jinja2 templating, or providing an alternative, to using react component templates instead of jinja. A couple of examples - pinterest.

But if the aim is to support a wide variety of frameworks like angular, this might not make much sense

[shughes-uk]

My use case is different. I hit Flask endpoints that return Bokeh JSON, then use bokehJS in react to render in react. I had to make my own bokeh react component that accepts bokeh json blobs. I did use react-grid-layout though!

[nghenzi]

Thank you @AjayThorve for this example. Readapting the code for panel holoviz works too.

In the inline example I noticed that you do not import the react grid layout component as it is done in most of the tutorials. It probably has to do with what React is building on the client.

Now I'm trying to use the Responsive grid layout (import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';), but I need the import and they don't work on the client. Can you imagine how to use it? I need to do something else? I tried to import Requirejs because in the console appears the errors (Uncaught ReferenceError: require is not defined) but it doesn't work.

I

[AjayThorve]

Hey @nghenzi, for the inline version, you may notice we import the react-grid-layout library inline in the templates/index.html file which makes the ReactGridLayout object available at runtime. Similarly the ResponsiveGridLayout object should also be available, you won't need to import it, something like ReactGridLayout.Responsive should work. You can see all the available submodules by running the demo, going to the javascript console in the browser, and just typing ReactGridLayout should display all the available submodules.

Also, would love to see the implementation with panel holoviz!!

[nghenzi]

@AjayThorve Thank you so much for the quick answer!!!! It is working now.

[nghenzi]

Hey @nghenzi, for the inline version, you may notice we import the react-grid-layout library inline in the templates/index.html file which makes the ReactGridLayout object available at runtime. Similarly the ResponsiveGridLayout object should also be available, you won't need to import it, something like ReactGridLayout.Responsive should work. You can see all the available submodules by running the demo, going to the javascript console in the browser, and just typing ReactGridLayout should display all the available submodules.

Also, would love to see the implementation with panel holoviz!!

@AjayThorve In https://github.com/holoviz/panel/pull/1530 I am working in an easy to use template based in panel templates taking your example like seed. Suggestions and comments are welcomed !!

[AjayThorve]

Hey @nghenzi, sorry I missed this message, this seems like a perfect fit for panel(and I'm glad it already is merged). Great work, looking forward to using it!

[nghenzi]

@AjayThorve , Happy to know you like it, it is based on your example. I learnt something of react!!!!

Thank you again for sharing !

In this PR there is an improvement to maximize the card to the viewport

https://github.com/holoviz/panel/pull/1688

Best regards, N

[MarcSkovMadsen]

FYI. I've created associated FR https://github.com/bokeh/bokeh/issues/10795

I would like to be able to create Bokeh extensions using React or Vue.