I am intrigued

[Odonno]

Hi @tpetrina, I plan to make a C#/XAML component system and your library seems to be a good start. My first goal is to make a full component system for UWP apps but the long term would be to make it available for UWP/WPF and Xamarin.

I think the "virtual dom" implementation is absolutely necessary but I wonder how to stay synchronize with the XAML tree. I mean, re-rendering every time when the state change will re-render the entire page for now but I need to dig deeper to find the best way to re-render only when and only what's needed.

I have some ideas like if you do conditional rendering, display all possible UI element but set Visibility=Collapsed for all unless they are used. And of course, we should make a single reference per UI element.

I would like to share with you if you have ideas on this and if we can share some code?

[tpetrina]

Hi @Odonno, glad you like the idea. This project is currently stale and I had no luck getting JSX style syntax in C# needed to make this smoother. There is an alternative project made by @praeclarum called ImmutableUI https://github.com/praeclarum/ImmutableUI, might want to check that.

As for your question, typically you have a handler object that maps from v-dom to the real dom. This enables you to just toggle a property on the real object if just a single property was changed. Also, you might use Visibility or you might literally show/hide an object in UI.

On the final note, XAML has things like markup extensions, attached properties and dependency properties which are hard to translate into a simple model based on vdom. If you have some ideas I would appreciate not working alone on this :D

[Odonno]

The JSX style syntax can be great but it is not the primary objective. It will require a new format and a new compiler to C# code. I don't think it is too hard to do but not that urgent. I will take a look at ImmutableUI.

About the virtual dom, more likely to be named virtual XAML tree, I have more and more ideas by thinking about it. Indeed, I will have to play a lot with Name and Visibility properties. I will write some code to check my ideas first.

Yes, XAML can be a complicated thing with DP but again, I will start with simple UI.

I will try things and keep you in touch.

[tpetrina]

Looking forward to it! I would love us to bounce ideas off each other.

[Odonno]

@tpetrina I have made some experiments lately and I am pretty happy with the latest one. I made experiments using C#/XAML in UWP but I suppose it can work similarly on other platforms.

I have made a virtual XAML tree that can be optimized in a way I can reuse UIElement. It's still an early stage prototype so I only tested my code with a simple UI and there is a lot of things to try before completion.

But here is what I get so far:

• Each element is encapsulated in a Node object
• A Node is a combination of a UIElement, InitialProperties, CurrentProperties and Children properties
• I store each Node (in a Dictionary) based on their name in the tree (when you initialize a component). That's here the optimization is made because if you already have the name in the Dictionary, you will reuse a previous Node/UIElement. And by design (for now), name is optional so you can also create ephemeral nodes (but of course, no optimization made)
• You can create a Node from a type (ex: TextBlock) or from a UIElement (that's how I listen to initial properties)
• A Node also have an internal list of events (like updating props or adding a child node). All of these events are stacked until the Render method is called
• When a Render method is called (on a root element for example), the current element and their children are re-render (and so recursively). If elements (children) are not in the tree, they are unrender

Well, without code, I can understand it's a bit difficult to understand but I will continue to experiment to see if it behaves like expected on more complex UI. I also need to make a roadmap to check the long road of things that needs to be done.

I also take a look at ImmutableUI library. It looks pretty good but I chosed to use reflection instead of creating classes on top of each UIElement.

[Odonno]

I just found this repository https://github.com/demigor/nreact

I also find it interesting even though the project seems ambitious. I checked quickly but there is already a detailed implementation of patching which I may take inspiration for some experiments.