- consistent rendering/support across multiple platforms and versions
- multiple windows
- rendering to a window that isn't owned by the UI being rendered or created by the framework
Can I do that all in React native? Edit: don't need to bring up electron.
- multiple platforms...
Yes: Windows (x32,x64, ARM64), from XP to 10, MacOS, Linux/GTK, IoT and mobiles.
- multiple windows -
Yes. Multiple desktop windows and you can even render separate DOM elements in popup windows.
- rendering to a window that isn't owned by the UI being rendered
Yes, you can render it on top DirectX, OpenGL, Vulkan (coming) or in child window/nsview/gtkwidget. There is also Sciter.Lite that allows to render UI without any DWM - on frame buffer / video memory directly. Check : https://sciter.com/sciter-and-directx/
- don't need to bring up electron.
Not Electron. All this in monolithic dll/so (5..9mb) that even can be linked in statically.
- consistent rendering across multiple platforms.
Check screenshots of https://notes.sciter.com/ , are they consistent enough?
- ... for React
React (Reactor in Sciter terms) is implemented natively. JSX (SSX in Sciter) is a part of language/runtime - no need for additional compilers, etc.
- I'd love to abandon my C/C++ ...
No need to. You can still manage (update, handle events) UI directly from C++ if needed. You can even create custom native DOM elements that can even draw themselves by native code.
I can't really commit to sciter and your flavor of JS until it has a larger community, more docs, and more onboarding materials so I can get teams up to speed and working quickly, reinventing fewer wheels, and have more discoverability in your docs and community so I can even know how to do things and what I don't need to rewrite.
Some bencharks comparing engine performance to V8 would also be much appreciated.
2. "larger ecosystems..." Sciter is embeddable and extendable engine, this means that you can extend it by existing native libraries, time proven and effective. Here is how SQLite native namespace looks in Sciter: https://github.com/c-smile/sciter-sdk/blob/master/sqlite/sci...
3. "it has a larger community..."
I am aiming not to larger but rather more professional community. Sciter sources contains patches from these dev teams: https://sciter.com/#customers Security audit was made by Symantec and 3 more AntiVirus vendors. All that... Source code base is compact enough for a C++ programmer to get into when needed.
"Some bencharks comparing engine performance to V8"
Slower than V8 but faster than Python 3. But script performance in Sciter is not that critical (never been a bottleneck) for simple reason: script treated as a glue between native function calls. If you need something to run with bare metal speed - just provide native function(s) for this functionality. JS approach in this respect is simply crazy: to run something fast add megatons of JIT implementation and then another twist: WebAssembler. Why not just to compile what is needed with C++ into native code and call it? Again, Sciter is embeddable and extendable by design.
I see someone actually submitted the homepage 40 mins ago so I upvoted it for awareness. This is so feature complete I'm frankly surprised it hasn't hit the front page before.
Consider the following:
Native UI: is a tree of widgets. Each widget has sematic properties / attributes. Each widget may have style properties (colors ,fonts, etc.). Each widget has exactly on parent and may have multiple children. There is an API for all of these.
HTML/DOM UI: Same as above, just replace "widget" by "element".
Could you explain then why one of these is "fundamentally unsuited" and other is a perfect match?
And just about all of these things are made worse by both the cascade rules and complicated precedence system of CSS.
This has nothing with the DOM (or HTML or CSS for that matter).
Yes, sometimes in desktop UI you will need to know exact element position/dimensions. That's why in Sciter I've added:
1. element.update(); method, it will force dimensions to be calculated at this moment.
2. element.onSize = function() {...} called when dimensions of the element change.
3. element.paintContent = function(graphics) {} called to paint the element on graphics. Dimensions and position of the element is known at this moment.
4. There is a Graphics.Text object that allows to calculate (not just render) text and glyph positions.
My main point with all this: it is a matter of API provided and has nothing with HTML/CSS per se.
For that matter, Flutter also uses DOM (tree of widgets, etc.). It is just that its style system is not declarative and misses cascading - for some reasons they decided to use WPF/XAML way of doing business. But we've already sang "Sic transit gloria mundi" to WPF ...
For the text editing... check html-notepad : https://html-notepad.com/ . Left sidebar (structure outline) is computed and painted in immediate rendering painting mode - when paintContent of the document is invoked.
Only with flexbox it became kind of usable for "apps". But still, the widgets are not native. You can keep emulating and emulating, but it's very easy to spot and quite frankly super annoying.
Can the native UI framework do multiple windows? - Then React-Native can do multiple windows.
Rendering to a windows that isn't owned by the framework is what React-Native refers to as Brownfield apps. This is absolutely supported. For instance, Microsoft Office is using React-Native for some parts of their UI in Android, iOS, Windows and macOS. And the Office window is not created or owned by react-native.
I once used a native library I installed with iOS' native package manager, Cocoapods. I rendered a React Native view inside the native view, which was contained inside a react native view. The only limitation is that the two react native views used separate bundlers i.e. the two react native views can only communicate through the native platform, they couldn't communicate to each other via JavaScript.
It's a hairier problem than you'd expect it to be. I'm not an expert but my understanding is that it's tricky to deal with the event loops when you're not the master of your domain, at least in a platform agnostic way. The workaround is usually to spawn multiple processes, but then the management of app state has to have an IPC layer underneath the internal APIs and there needs to be a master daemon running somewhere.
In keeping with front page posts, the plugin API for Apple's Logic Pro (audio units) is an example of that. You are handed an NSView* and need to render on it, but you don't create it.
Legit question, I just started using Electron, hadn't heard of the former and thought the latter was a selling point because all platforms wrapped Electron's Chrome.
Rendering consistency is generally pretty good; I haven't run into any issues with that.
EDIT: Ok I see now, you listed your requirements and just stated that Electron doesn't satisfy them. The construct is confusing to me because the way it's worded seems to suggest Electron doesn't satisfy any of them, but I understand now.
STMicroelectronics uses it for almost all of their applications, which ship in one zip file with binaries for Win/Mac/Linux.
It ticks #1 and #2, but I don't know about #3.
Of course, I'm not sure if having web-like programming is your implicit #4?
Or you can build native WASM apps?
There seems to be some preview on the mobile native, though, it's probably not strictly a WASM as it provides binding through Xamarin...[0]
[0]: https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings...
If electron is Chrome and Edge is Chrome and Microsoft uses Edge for this - then its all chrome in all directions. Native is much faster and more powerful - WE MUST RESIST!
Here's the GitHub for the Windows implementation: https://github.com/microsoft/react-native-windows
And here's the fork of React Native for the Mac one (it doesn't seem to be as polished as the Windows one yet): https://github.com/microsoft/react-native-macos
It uses flex-box (and only flex-box) for layout, adds some convenient shorthands - marginVertical, marginHorizontal, and does some surprising (but useful) things like has transform take a JS array of key value pairs - https://reactnative.dev/docs/transforms#transform
React scripts native widgets, not HTML.