BasicUI with Paravieweb as client, React and Vue

Web Support
#1

Dear all,

I have just started to experiment with web remote rendering with VTK as server and ParaviewWeb as client and I am currently on stage of creating UI.

I would like to check my understanding of how js-based UI communicates with remote python and what general development paths I have.

  1. From my basic understanding all communication is always handled by wslink library, right?. For example, in UI I found here: https://github.com/tsgouros/ParaViewWeb-SimpleDemo as I understood the js UI executes RPC calls linked by @exportRPC decorator from wslink library.

There are also seems NativeUI and Reactor UI defined directly within ParavieWeb in addition to reactor.js.

  1. Also when I went through VTK.js/ParavieWeb options for a client discussion on forum I came across VTK based example here that seems to be a bit different (not as far played with it). It seems to be based on vue components and vue cli. Am I right that this is an option only for VTK.js?

So, I am completely new to both React and Vue:) So what path I am better to choose and start learning as a beginner? Are there any other additional examples/tutorials on the problem?

Thank you very much in advance,
Best regards,
Evgeniya

1 Like
#2

You understanding of the communication based on wslink is correct.

vtk.js in general is framework agnostic. So picking a framework is really up to you and what you prefer.

As a beginner, I would start with vue as it give you a better approach to structure code and “force” you with some good libraries and patterns. React is great too, but it gives your too much freedom which can lead to even more confusion.

Also in general the JS library paraviewweb (not the framework) should be considered as deprecated. The way forward is to use vtk.js/wslink with a preference with Vue.js/Vuetify which makes the second example a better starting point. That example should be cleanup, as some classes have been left in the repo while they are not used anymore. But it you follow the path of the imports, you should be good to start understanding the mechanic behind all of it.

HTH,

Seb

1 Like
#3

Thank you very much,

Best regards,
Evgeniya

#4

The example is now cleaned up and should be easier to follow.