Looking for a correct style to develop reactive UI with Eliom

Hello everyone,

I am currently developing a website using eliom, trying to make the best use of reactive elements. I have just rediscovered a bug initially found by @mfp, which is related to ReactiveData.RList.from_signal, a function used to create a reactive element from a react signal. This bug shows as soon as one tries to define a react signal which calls RList.from_signal during an update. I met this situation while trying to define a reactive element that will sometime contain (and so sometime create during an update) another reactive element.

I’d like to read advanced examples of reactive UI in eliom, to get a better idea of the intended style. Any pointers? Thanks!

I am not aware of large parts of open source code written with Eliom and React. At Be Sport we are using react at many places but for simple features.
Ocsigen Toolkit has a good example of reactive interface for client-server Web widgets (see Ot_carousel).


Thank you Vincent!

I went ahead and had a quick read of the implementation you mention. This carousel indeed takes its inputs as react signals/events, but it seems it’s not implemented using the R flavour of Eliom_content.Html. It uses the D module instead, and performs direct side effects on the DOM during react update cycles. First, a remark: with this design, it is not affected by the bug I mentioned in my previous post, and could be used I think inside a R.div element. Second, a question: do you think writing this widget using Eliom_content.Html.R could be a viable option (modulo the bug in ReactiveData)?

Thanks again!

I don’t really see how we could implement the carousel with ReactiveData.
ReactiveData was intended to make it possible to reactively add or remove elements from a list on a page without redrawing the whole list (for example if you want an animation).