9 ms·

Is anybody working on bringing reactivity to GUI development? After working with Vue/React, doing GUI apps "the old way" feels like writing quick-sort in assem

Is anybody working on bringing reactivity to GUI development? After working with Vue/React, doing GUI apps "the old way" feels like writing quick-sort in assembly language.

rohan1024 7y ago
Check out flutter
baybal2 7y ago
I've been in involuntarily involved in webdev for quite a few years. I will give everything to get that quick and easy manner of building GUIs in GTK+ to the web. I wrote my first GTK+ program in my high school years in 2014-2015, and I can't think of any native toolkit ever approached the ease of work of GTK.
- baybal2 7y ago
  Typo, my school years were a decade earlier :)
- Narishma 7y ago
  > I can't think of any native toolkit ever approached the ease of work of GTK. Which other native UI toolkits do you have experience with to make that claim?
  - baybal2 7y ago
    Been working on Windows side with every Microsoft's take on GUI library, Android, tried Qt (before QML,) and am involuntarily dealing with all those Web toolkits on almost every project involving web.
vnorilo 7y ago
Microsoft and others have MVVM frameworks, such as WPF, which have reactive data binding. Qt Quick also, but I haven't tried it myself. That said, it is not that similar to React or Vue because the "DOM"s are so different.
- baybal2 7y ago
  Try to use WPF from anything other than dotnet. It will be hard, given that you will have to hack its main loop to work with an external code. I'm not sure if that was ever done.
  - pjmlp 7y ago
    It works from any language that speaks COM.
    - baybal2 7y ago
      Any real world examples?
      - pjmlp 7y ago
        Probably not the way you are thinking. - Write the WPF view code in any .NET language and expose the classes to COM as COM Callable Wrapper (https://docs.microsoft.com/en-us/dotnet/framework/interop/com-callable-wrapper https://docs.microsoft.com/en-us/dotnet/framework/interop/co...) - Similar way, but using Windows HWND messages instead, https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/walkthrough-hosting-wpf-content-in-win32 https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... - Or if using Windows 10, given that UWP is COM vNext, and Microsoft is merging both worlds, use XAML Islands, https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/using-the-xaml-hosting-api https://docs.microsoft.com/en-us/windows/apps/desktop/modern...
awestroke 7y ago
https://github.com/maps4print/azul https://github.com/maps4print/azul
rpeden 7y ago
Microsoft very actively works on React Native for Windows, and last I checked there were decent RN desktop ports for Linux and MacOS. So that's one potential option.
- pjmlp 7y ago
  Given that they were even measuring the performance against Electron, there is some small hope that eventually VSCode gets rewritten in it.
  - Const-me 7y ago
    I don't think they care about performance a tiny bit. Here's very simple to implement change which saves dozens of MB of IO bandwidth every startup: https://github.com/Microsoft/vscode/issues/61343 https://github.com/Microsoft/vscode/issues/61343 "We will very likely not do this."
    - pjmlp 7y ago
      Then check BUILD 2019 talk about React Native for Windows. Electron gets a couple of jabs, including a very nice bar comparison chart.
ubercow13 7y ago
Maybe https://github.com/revery-ui/revery/blob/master/README.md https://github.com/revery-ui/revery/blob/master/README.md
robto 7y ago
I know about revery[0] and cljfx[0], though I haven't had the chance to use them in anger. These both seem like very nice approaches to me - I'm partial to cljfx because I've been utterly spoiled by the clojure/script development experience, but I've also come to enjoy the typescript environment and revery seems to another step along that road. [0]https://github.com/revery-ui/revery https://github.com/revery-ui/revery [1]https://github.com/cljfx/cljfx https://github.com/cljfx/cljfx
- geokon 7y ago
  Be sure to also check out fn-fx. I've tried both but haven't really done anything complex enough to bring out which one is a clear winner https://github.com/fn-fx/fn-fx https://github.com/fn-fx/fn-fx Fn-fx is a more complex beast and no one seems to really know how it all works internally except the creator who isn't maintaining it.. so unfortunately it's in a semi unmaintained state. But the interface was a bit cleaner when I tried it
  - robto 7y ago
    cljfx is actually inspired on fn-fx, and presents a much cleaner and more usable api, just by comparing the docs. I'm pretty sold on data-based apis instead of macro-based ones, though, so maybe it's just catering towards my preferred style of development.
    - geokon 7y ago
      oh okay. you sound more knowledgeable than me, so thanks for the input. I'll stick to cljfx then. I found it clunkier to mix with Java code, so I was considering switching back to fn-fx
kbumsik 7y ago
Actually reactivity in GUI (maybe declarative GUI programming is a more accurate form?) is also "the old way" in the GUI development. I mean it is already done a decade ago, even before react. Try QML. The view is automatically updated when a signal is triggered or its state changes. You will notice that it is surprisingly simpler than React. React got so popular because React implemented it very nicely in the web browsers, not because it brought new concepts.
- sunebeck 7y ago
  Oh, I see - I take my comment back then :-)
- realharo 7y ago
  Last time I looked at QML (a few years ago), you couldn't just use any data in your UI directly, you had to wrap it in clunky models. When using C++, looks like you have to use things like QAbstractListModel https://qmlbook.github.io/ch16-qtcpp/qtcpp.html#a-simple-model https://qmlbook.github.io/ch16-qtcpp/qtcpp.html#a-simple-mod... Even without C++, there are things like ListModel and ListElement https://qmlbook.github.io/ch07-modelview/modelview.html https://qmlbook.github.io/ch07-modelview/modelview.html This is a far cry from React where you just use language-native data structures directly (you only need to do mutations in specific ways). As far as I can tell, you also can't just use native language constructs like functions/ifs/.map, etc. to compose the UI elements. Instead you have containers like Repeater. It seems very different to me compared to React, like built around a significantly different philosophy.
  - asveikau 7y ago
    Your comment seems to just be highlighting the fact that inspecting types at runtime is non-idiomatic at best in C++ or similar languages, so it would make sense to require a specific data structure or format. Even defining what a "native" type is seems like it would be fraught. I guess the c++ way would be to accept begin and end iterators - but of what type?
    - 7y ago
floatboth 7y ago
https://github.com/antoyo/relm https://github.com/antoyo/relm
FreezerburnV 7y ago
JavaFX actually has a lot of reactive elements in its design. Basically every attribute of any GUI element are an “observable” type which allow you to register handlers for doing stuff when the internal value changes.
- walkingolof 7y ago
  JavaFX is great and looks fantastic, surprised it’s not used more
  - FreezerburnV 7y ago
    There seems to be a perception that anything running on the JVM is going to be slow and look bad. Considering I work with Java every day in a gigantic Swing application, (IntelliJ IDEA, if you didn’t guess) and it has great performance for all the things it’s doing for me, that seems to be an old holdover from early days of Java. Also enterprise apps, which of course are going to be bad and slow. At least the JVM has real threads for background work which don’t take another 100MB of RAM like an electron background worker :)
    - walkingolof 7y ago
      Yea, its hard to wash out a stain like that, in general, JIT:d JVM based applications performs as good or better than AOT application, but do still need more memory.
      - FreezerburnV 7y ago
        The “or better” tagged into JVM applications really needs to go away. Realistically, most JVM applications do not have as good performance as native ones. Yes, it’s possible to run better, but it’s very hard to create code that JITs to something faster than a thing written in C/C++/Rust/etc. You have to basically write code that looks like C to make it run as fast or faster, because there’s real overhead that comes with a lot of things in the JVM. You don’t just write standard Java or Scala and suddenly it’s as fast as C++, in general. It’s still heckin blazing fast, to be fair, but not AS heckin blazing fast. (As long as you aren’t just going insane with objects, at least, such as huge lists of integer objects)
pjmlp 7y ago
Yes, about 10 years ago with WPF, QML, JavaFX.
- fasterdom 7y ago
  I've used WPF extensively 10 years ago. It's nowhere near as easy to create a complex GUI as Vue/HTML/CSS. And that just for functionality. If we talk about looks, WPF is very clunky to theme.
  - turrini 7y ago
    There is QML and it can compile natively for many platforms. With the same source code, my applications are natively compiled to: Linux, Windows, MacOS, Android, iOS, QNX, Browser (WebAssembly / WebGL Streaming) And you are free to theme it as you like, one example: https://imgur.com/Ti02n6Y https://imgur.com/Ti02n6Y
  - pjmlp 7y ago
    I happen to have the opposite view, specially with Blend and component libraries into the mix. CSS had to get WPF grid design in order to not be a poor table sibling in what concerns layouts. While WPF is backed by DirectX, CSS requires playing with Z order, so that some browsers might eventually put the rendering into the GPU, but one needs to take care because space is limited. While I can render anything down to pixel level control, if I wish to do so, I am still waiting for Houdini and worlets to actually become available. And the whole template language with events and theming for low level customisation of control behaviours? Nowhere to be seen.
    - fasterdom 7y ago
      Using Blend feels to me like using Word to create HTML pages - the resulting output is horrible. CSS layout was indeed a struggle many years ago, but now with flexbox I never failed to put stuff exactly where I wanted, and I barely understand it. And the new shiny thing, CSS Grid, is supposedly even better at controlling layout.
  - 7y ago
c-smile 7y ago
Sciter ( https://sciter.com https://sciter.com ) and Sciter/Rust for that matter: https://github.com/sciter-sdk/rust-sciter https://github.com/sciter-sdk/rust-sciter It adds single 5mb DLL to the equation. Yet it allows to build native applications where UI structure is defined by HTML, style by CSS and reactivity by script or by Rust (or by C++, Go, Python, etc.) "Sciter makes GUI programming genuinely fun!" https://sciter.com/forums/topic/attach-detach-behavior/#post-61347 https://sciter.com/forums/topic/attach-detach-behavior/#post...
- amelius 7y ago
  What HTML/CSS rendering engine does it use? And in case it has its own implementation, then how good and up to date is the HTML/CSS support?
  - c-smile 7y ago
    It uses its own HTML/CSS engine designed by myself to be embeddable from ground up. Check this: https://sciter.com/10-years-road-to-sciter/ https://sciter.com/10-years-road-to-sciter/ As of HTML: most of HTML5 constructs (I participated in HTML5 spec development at W3C as Invited Expert) As of CSS: CSS2.1 in full. Some practically useful modules of CSS3 - transitions, transforms, etc. I haven't added FlexBox as I think it is an architectural disaster - will not survive on the long run. Instead Sciter offers "flow and flex units" module: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm that covers as FlexBox as Grid in unified manner. Yet check this: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.... Yet, I've added quite a lot of HTML/CSS features that are the must for specifically desktop UI: - <menu class=popup> and <popup> elements and their CSS support - windowed DOM elements that are rendered outside of main window canvas. - <frame type=pager> - print preview and print feature. - view.dialog("some.html"), view.window("some.html"), view.msgbox("some.html") - HTML defined windows and dialogs. - <htmlarea> - native WYSIWYG HTML editing widget. More on this: https://sciter.com/developers/for-web-programmers/ https://sciter.com/developers/for-web-programmers/
    - 7y ago
voodootrucker 7y ago
See this [0] native UI for Rust. It's the primary UI for Redox OS and it's inspired by React. [0] https://github.com/redox-os/orbtk https://github.com/redox-os/orbtk
matthewmacleod 7y ago
Swift is going this way with SwiftUI but you aren’t likely to see it anywhere except Apple platforms in the immediate future.
edwinyzh 7y ago
https://github.com/pierrejean-coudert/ReduxDelphi https://github.com/pierrejean-coudert/ReduxDelphi
tomjen3 7y ago
Microsoft. Their XAML apps are pretty much web apps done right, ie not javascript and a more powerful layout system -- and everything on the gui part is reactive.
ivanceras 7y ago
Yes, I am. https://twitter.com/ivanceras/status/1147594007897202688 https://twitter.com/ivanceras/status/1147594007897202688

Is anybody working on bringing reactivity to GUI development? After working with Vue/React, doing GUI apps "the old way" feels like writing quick-sort in assembly language.

rohan1024 7y ago

Check out flutter

baybal2 7y ago

I've been in involuntarily involved in webdev for quite a few years. I will give everything to get that quick and easy manner of building GUIs in GTK+ to the web. I wrote my first GTK+ program in my high school years in 2014-2015, and I can't think of any native toolkit ever approached the ease of work of GTK.

baybal2 7y ago
Typo, my school years were a decade earlier :)
Narishma 7y ago
> I can't think of any native toolkit ever approached the ease of work of GTK. Which other native UI toolkits do you have experience with to make that claim?
- baybal2 7y ago
  Been working on Windows side with every Microsoft's take on GUI library, Android, tried Qt (before QML,) and am involuntarily dealing with all those Web toolkits on almost every project involving web.

vnorilo 7y ago

Microsoft and others have MVVM frameworks, such as WPF, which have reactive data binding. Qt Quick also, but I haven't tried it myself. That said, it is not that similar to React or Vue because the "DOM"s are so different.

baybal2 7y ago
Try to use WPF from anything other than dotnet. It will be hard, given that you will have to hack its main loop to work with an external code. I'm not sure if that was ever done.
- pjmlp 7y ago
  It works from any language that speaks COM.
  - baybal2 7y ago
    Any real world examples?
    - pjmlp 7y ago
      Probably not the way you are thinking. - Write the WPF view code in any .NET language and expose the classes to COM as COM Callable Wrapper (https://docs.microsoft.com/en-us/dotnet/framework/interop/com-callable-wrapper https://docs.microsoft.com/en-us/dotnet/framework/interop/co...) - Similar way, but using Windows HWND messages instead, https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/walkthrough-hosting-wpf-content-in-win32 https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... - Or if using Windows 10, given that UWP is COM vNext, and Microsoft is merging both worlds, use XAML Islands, https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/using-the-xaml-hosting-api https://docs.microsoft.com/en-us/windows/apps/desktop/modern...

awestroke 7y ago

https://github.com/maps4print/azul https://github.com/maps4print/azul

rpeden 7y ago

Microsoft very actively works on React Native for Windows, and last I checked there were decent RN desktop ports for Linux and MacOS. So that's one potential option.

pjmlp 7y ago
Given that they were even measuring the performance against Electron, there is some small hope that eventually VSCode gets rewritten in it.
- Const-me 7y ago
  I don't think they care about performance a tiny bit. Here's very simple to implement change which saves dozens of MB of IO bandwidth every startup: https://github.com/Microsoft/vscode/issues/61343 https://github.com/Microsoft/vscode/issues/61343 "We will very likely not do this."
  - pjmlp 7y ago
    Then check BUILD 2019 talk about React Native for Windows. Electron gets a couple of jabs, including a very nice bar comparison chart.

ubercow13 7y ago

Maybe https://github.com/revery-ui/revery/blob/master/README.md https://github.com/revery-ui/revery/blob/master/README.md

robto 7y ago

I know about revery[0] and cljfx[0], though I haven't had the chance to use them in anger. These both seem like very nice approaches to me - I'm partial to cljfx because I've been utterly spoiled by the clojure/script development experience, but I've also come to enjoy the typescript environment and revery seems to another step along that road. [0]https://github.com/revery-ui/revery https://github.com/revery-ui/revery [1]https://github.com/cljfx/cljfx https://github.com/cljfx/cljfx

geokon 7y ago
Be sure to also check out fn-fx. I've tried both but haven't really done anything complex enough to bring out which one is a clear winner https://github.com/fn-fx/fn-fx https://github.com/fn-fx/fn-fx Fn-fx is a more complex beast and no one seems to really know how it all works internally except the creator who isn't maintaining it.. so unfortunately it's in a semi unmaintained state. But the interface was a bit cleaner when I tried it
- robto 7y ago
  cljfx is actually inspired on fn-fx, and presents a much cleaner and more usable api, just by comparing the docs. I'm pretty sold on data-based apis instead of macro-based ones, though, so maybe it's just catering towards my preferred style of development.
  - geokon 7y ago
    oh okay. you sound more knowledgeable than me, so thanks for the input. I'll stick to cljfx then. I found it clunkier to mix with Java code, so I was considering switching back to fn-fx

kbumsik 7y ago

Actually reactivity in GUI (maybe declarative GUI programming is a more accurate form?) is also "the old way" in the GUI development. I mean it is already done a decade ago, even before react. Try QML. The view is automatically updated when a signal is triggered or its state changes. You will notice that it is surprisingly simpler than React. React got so popular because React implemented it very nicely in the web browsers, not because it brought new concepts.

sunebeck 7y ago
Oh, I see - I take my comment back then :-)
realharo 7y ago
Last time I looked at QML (a few years ago), you couldn't just use any data in your UI directly, you had to wrap it in clunky models. When using C++, looks like you have to use things like QAbstractListModel https://qmlbook.github.io/ch16-qtcpp/qtcpp.html#a-simple-model https://qmlbook.github.io/ch16-qtcpp/qtcpp.html#a-simple-mod... Even without C++, there are things like ListModel and ListElement https://qmlbook.github.io/ch07-modelview/modelview.html https://qmlbook.github.io/ch07-modelview/modelview.html This is a far cry from React where you just use language-native data structures directly (you only need to do mutations in specific ways). As far as I can tell, you also can't just use native language constructs like functions/ifs/.map, etc. to compose the UI elements. Instead you have containers like Repeater. It seems very different to me compared to React, like built around a significantly different philosophy.
- asveikau 7y ago
  Your comment seems to just be highlighting the fact that inspecting types at runtime is non-idiomatic at best in C++ or similar languages, so it would make sense to require a specific data structure or format. Even defining what a "native" type is seems like it would be fraught. I guess the c++ way would be to accept begin and end iterators - but of what type?
  - 7y ago

floatboth 7y ago

https://github.com/antoyo/relm https://github.com/antoyo/relm

FreezerburnV 7y ago

JavaFX actually has a lot of reactive elements in its design. Basically every attribute of any GUI element are an “observable” type which allow you to register handlers for doing stuff when the internal value changes.

walkingolof 7y ago
JavaFX is great and looks fantastic, surprised it’s not used more
- FreezerburnV 7y ago
  There seems to be a perception that anything running on the JVM is going to be slow and look bad. Considering I work with Java every day in a gigantic Swing application, (IntelliJ IDEA, if you didn’t guess) and it has great performance for all the things it’s doing for me, that seems to be an old holdover from early days of Java. Also enterprise apps, which of course are going to be bad and slow. At least the JVM has real threads for background work which don’t take another 100MB of RAM like an electron background worker :)
  - walkingolof 7y ago
    Yea, its hard to wash out a stain like that, in general, JIT:d JVM based applications performs as good or better than AOT application, but do still need more memory.
    - FreezerburnV 7y ago
      The “or better” tagged into JVM applications really needs to go away. Realistically, most JVM applications do not have as good performance as native ones. Yes, it’s possible to run better, but it’s very hard to create code that JITs to something faster than a thing written in C/C++/Rust/etc. You have to basically write code that looks like C to make it run as fast or faster, because there’s real overhead that comes with a lot of things in the JVM. You don’t just write standard Java or Scala and suddenly it’s as fast as C++, in general. It’s still heckin blazing fast, to be fair, but not AS heckin blazing fast. (As long as you aren’t just going insane with objects, at least, such as huge lists of integer objects)

pjmlp 7y ago

Yes, about 10 years ago with WPF, QML, JavaFX.

fasterdom 7y ago
I've used WPF extensively 10 years ago. It's nowhere near as easy to create a complex GUI as Vue/HTML/CSS. And that just for functionality. If we talk about looks, WPF is very clunky to theme.
- turrini 7y ago
  There is QML and it can compile natively for many platforms. With the same source code, my applications are natively compiled to: Linux, Windows, MacOS, Android, iOS, QNX, Browser (WebAssembly / WebGL Streaming) And you are free to theme it as you like, one example: https://imgur.com/Ti02n6Y https://imgur.com/Ti02n6Y
- pjmlp 7y ago
  I happen to have the opposite view, specially with Blend and component libraries into the mix. CSS had to get WPF grid design in order to not be a poor table sibling in what concerns layouts. While WPF is backed by DirectX, CSS requires playing with Z order, so that some browsers might eventually put the rendering into the GPU, but one needs to take care because space is limited. While I can render anything down to pixel level control, if I wish to do so, I am still waiting for Houdini and worlets to actually become available. And the whole template language with events and theming for low level customisation of control behaviours? Nowhere to be seen.
  - fasterdom 7y ago
    Using Blend feels to me like using Word to create HTML pages - the resulting output is horrible. CSS layout was indeed a struggle many years ago, but now with flexbox I never failed to put stuff exactly where I wanted, and I barely understand it. And the new shiny thing, CSS Grid, is supposedly even better at controlling layout.
- 7y ago

c-smile 7y ago

Sciter ( https://sciter.com https://sciter.com ) and Sciter/Rust for that matter: https://github.com/sciter-sdk/rust-sciter https://github.com/sciter-sdk/rust-sciter It adds single 5mb DLL to the equation. Yet it allows to build native applications where UI structure is defined by HTML, style by CSS and reactivity by script or by Rust (or by C++, Go, Python, etc.) "Sciter makes GUI programming genuinely fun!" https://sciter.com/forums/topic/attach-detach-behavior/#post-61347 https://sciter.com/forums/topic/attach-detach-behavior/#post...

amelius 7y ago
What HTML/CSS rendering engine does it use? And in case it has its own implementation, then how good and up to date is the HTML/CSS support?
- c-smile 7y ago
  It uses its own HTML/CSS engine designed by myself to be embeddable from ground up. Check this: https://sciter.com/10-years-road-to-sciter/ https://sciter.com/10-years-road-to-sciter/ As of HTML: most of HTML5 constructs (I participated in HTML5 spec development at W3C as Invited Expert) As of CSS: CSS2.1 in full. Some practically useful modules of CSS3 - transitions, transforms, etc. I haven't added FlexBox as I think it is an architectural disaster - will not survive on the long run. Instead Sciter offers "flow and flex units" module: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm that covers as FlexBox as Grid in unified manner. Yet check this: https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.... Yet, I've added quite a lot of HTML/CSS features that are the must for specifically desktop UI: - <menu class=popup> and <popup> elements and their CSS support - windowed DOM elements that are rendered outside of main window canvas. - <frame type=pager> - print preview and print feature. - view.dialog("some.html"), view.window("some.html"), view.msgbox("some.html") - HTML defined windows and dialogs. - <htmlarea> - native WYSIWYG HTML editing widget. More on this: https://sciter.com/developers/for-web-programmers/ https://sciter.com/developers/for-web-programmers/
  - 7y ago

voodootrucker 7y ago

See this [0] native UI for Rust. It's the primary UI for Redox OS and it's inspired by React. [0] https://github.com/redox-os/orbtk https://github.com/redox-os/orbtk

matthewmacleod 7y ago

Swift is going this way with SwiftUI but you aren’t likely to see it anywhere except Apple platforms in the immediate future.

edwinyzh 7y ago

https://github.com/pierrejean-coudert/ReduxDelphi https://github.com/pierrejean-coudert/ReduxDelphi

tomjen3 7y ago

Microsoft. Their XAML apps are pretty much web apps done right, ie not javascript and a more powerful layout system -- and everything on the gui part is reactive.

ivanceras 7y ago

Yes, I am. https://twitter.com/ivanceras/status/1147594007897202688 https://twitter.com/ivanceras/status/1147594007897202688