MUI 5

[marcpiechura]

Hey,

are there any plans to update the bindings for MUI/MaterialUI 5?

regards,
Marc

[halcwb]

I think upgrading to version 5 would be great. I can imagine that the company maintaining the SAFE-stack would also be willing to maintain this project as it provides a superb user interface experience. I will ask them. Also, Zaid Ajaj could be interested in contributing. I am also willing to help but have not enough skills.

[marcpiechura]

@ArtemyB updated pull request brought this issue back to my attention, given that the project is no longer maintained, I had to search for other options and with the new upcoming Fable V4, I found one. So for people who want to use V5 and don't mind if they loose a bit of type safety, you can use the new JSX extension from Fable V4 to write "native" JSX code in your .fs file, without the need of bindings. That also works for other React libraries, e.g. react-window. Sometimes it's a bit hard to get the event handlers right (you may have to explicitly use Func<param1, param2, result>(fun param1 param2 -> ())) , but otherwise it's pretty straight forward, especially when Copilot writes the import statements. For anyone who is interested, I created a sample application to get started.
https://github.com/marcpiechura/JSX-Example

[ArtemyB]

@marcpiechura yep, JSX is a nice option indeed, but unfortunately imposes some tooling restrictions -- e.g. in VS you'll have to work with plain strings, without any IntelliSense for non-F# parts. Only VS Code has the appropriate extension for now (still haven't tried it though). Despite this it is a real time saver for some not frequently used components. However for something like UI-toolkit, that is being used again and again, bindings are noticeably more convenient (if they're maintained of course 😄, which requires extra work).

[marcpiechura]

Yes, VS isn't really an option but in VS Code and with the plug-in, syntax highlighting works really well.
To be honest, I rarely miss intellisense and even with the bindings, I had to look up the correct way of using a component, if I had to use a new one. For the regular stuff, it doesn't matter much because you use it so often that you know the props out of your head.
After porting my relatively large business application to JSX, I would actually prefer JSX even if bindings would be available for V5.
The fact that I can more or less copy and paste the examples from the docs, that things like ...prop work out of the box, that I can use other components easily ( MUI X DataGrid, react-window) and much less intention, are much more important to me than the missing parts.

But in the end, tastes differ and more options are always better, so keep up the hard work with the bindings 👍

[ArtemyB]

@marcpiechura the bindings for V5 from my fork are pretty ready -- I've been using them myself since October-November and so far there have been almost no problems. However if I encounter any, usually it's quite easy and fast to fix. So now the point is to find them -- there aren't any automated tests in the project and I personally don't use all the components equally extensive.
The only thing is completely missing is MUI X DataGrid, but I personally don't need it, so didn't bother 😄

[halcwb]

@ArtemyB Actually, if you would like to use for example the x datagrid, you can just mix you're bindings with the new JSX approach. Only, you will need to upgrade to the latest react and fable libs.

I, for one, am really pleased with using JSX. This has saved me tons of time getting up to speed writing a fairly complicated UI, see: https://github.com/halcwb/GenPres2 as an example.

[ArtemyB]

@halcwb yes, I've already tried Feliz.JSX a bit recently. But thank you for the example anyway -- It looks demonstrative indeed 👍 To me Feliz.JSX seemed really good for quick prototyping because of being able to just copy-paste ready-made examples. However when writing by hand I still miss props autocomplete (even VS Code with the Highlight templates in F# does not do that for 3rd-party components -- it handles only the coloring). But when there are no ready-made Fable-bindings Feliz.JSX is definitely a win (vs. making the bindings yourself before using the lib) 👍

By the way, I've already updated my Feliz.MaterialUI fork to use Feliz >= 2, Fable.React >= 9 and MUI v5.11 👌

[reinux]

@ArtemyB Quick question: is your fork good to go with Fable 4?

[ArtemyB]

@reinux yes, I'm personally using it with v4 for several months. And from the v5.11.0-beta.1 it also targets Feliz >= 2 and Fable.React >= 9 (there are some breaking changes between the major versions of these packages)

[reinux]

Cool, thanks!