HTM/CSS/JavaScript-Framework für Desktop und Browser

[joggel]

Guten Morgen,

ich habe vor meinen Editor umzugestalten, und zwar so das er zur Crossplatform-Anwendung wird; soll heißen: auslieferbar auf Win/Linux oder Mac und: ich möchte mir die Möglichkeit offen halten, dass die App im Browser laufen kann.

Backend soll C++ sein (einfach weil ich mich nun schon eine Weile damit auskenne).

Ich habe ElectronJs gefunden, aber dieses Framework unterstützt den Browser nicht. Zumindest nicht mit zusätzlichem Aufwand, soweit ich das ersehen habe.
Ich habe noch React und React Native gefunden. Muss ich mir aber noch mal genauer anschauen und weiß auch nicht recht, was da genau der Unterschied ist.
Es gibt noch Flutter, mit der alle Plattformen unterstützt werden; von Win, Linux und macOS, Android, iOS, Embedded bis Browser. Nachteil ist, dass es nicht JavaScript verwendet.

Meine Frage ist nun, gibt es ein JavaScript-Framework was dafür besonders geeignet ist? Hat jemand von Euch da vlt Erfahrung oder ein paar Ideen?
- HTML/CSS/JavaScript
- App lauffähig unter Windows/Linux/Mac-Desktops und im Browser
- mit C++-Backend

LG
joggel

[kristof]

Kommt sicher stark darauf an was dir das Framework alles abnehmen soll und wie komplex am Ende deine Anwendung werden wird.

Neben React würden mir spontan noch Angular und Vue einfallen. Ich hatte bisher nur mit Angular etwas Berührung. Aber so weit ich weiss, setzen alle drei stark auf "reactive programming" um die Komplexität eines größeren UI im Griff zu halten. Angular setzt auf wiederverwendbare hierarchische Komponenten, die man zusammenstecken kann wie man mag. Die anderen haben sicher ähnliche Konzepte.

Wenn es mehr Richtung vollständige IDE gehen soll fällt mir spontan nur Eclipse Che ein. Ist aber vielleicht etwas overkill und erfüllt auch deine Sprachwünsche nicht.

Noch eine ganz andere Richtung, die du überlegen könntest wäre alles in C++ zu machen und nach WASM zu kompilieren. Hätte den Vorteil, dass Frontend und Backend sich Teile des Codes teilen können. Bin mir aber nicht sicher ob es da schon gute UI Frameworks für gibt. Vermutlich müsste die DOM Manipulation dann doch in JavaScript gemacht werden, was dich dann wieder zu React und Konsorten bringt.
Ich hatte für eines der letzten Ludlum Dare mal mit WASM gearbeitet (https://github.com/knied/LD48) Da erzeuge ich im Browser allerdings nur ein bildschirmfüllendes Canvas und male da mit WebGL rein.

[joggel]

Kommt sicher stark darauf an was dir das Framework alles abnehmen soll und wie komplex am Ende deine Anwendung werden wird.

Naja, lediglich rendern des GUI's, Rückmeldung geben, und OpenGL-Kontent rendern.

Ja, den Weg über WASM zu gehen habe ich auch schon in Erwägung gezogen. Qt bietet da ja auch ein Framework an: https://www.qt.io/qt-examples-for-webassembly

Der Grund warum ich mich für JavaScript mit HTML/CSS entscheiden will ist der, dass es dafür einfach mehr UI-Libs gibt. Und ich so den Eindruck hatte, dass viele davon sehr ansprechend und moderner aussahen... zumindest was ich so er-googelt habe^^

Angular und Vue werde ich mir mal anschauen. Auch danke für den Stichpunkt "reactive programming".

Vlt nehme ich mir da auch zu viel vor, und ich könnte alles mit Qt und deren WebAssembly-Framework erschlagen.
Naja und andererseits, würde ich aber auch gerne etwas über moderne App-Entwicklung lernen... Das ist halt auch der Hauptgrund warum ich dazu ein modernes Framework nehmen will.

Danke aber erstmal :)

[joggel]

Wenn ich gerade darüber nachdenke, dann wäre es doch die flexibelste Möglichkeit auch das GUI in einem OpenGL-Kontext zu rendern. Das einzige was dann auf jeder Plattform gemacht werden muss, ist lediglich ein OGL-RenderWindow erzeugen und darin findet dann alles statt 🤔

Dann könnte ich zB sowas nehmen: https://github.com/vurtun/nuklear
oder das: http://gaclib.net/home/gacui/rich.html

Ach verdammt...

[marcgfx]

Wieso nutzt du nicht Html5/JS/WebGL für den Browser und Electron oder NWjs für Win/Mac & Linux? Für Devader ging das gut, bis auf die Portierung auf Konsolen, was aber bei dir scheinbar egal ist. Mit NWjs lassen sich C++ module einbinden.

[joggel]

Wieso nutzt du nicht Html5/JS/WebGL für den Browser und Electron oder NWjs für Win/Mac & Linux?

Naja, das klingt so, als ob ich 2 Codebasen benötige. Eins für Broswer und eins für Desktop. Dachte mir, vlt gibt es da etwas wo ich nur einmal was schreiben muss.
NWjs muss ich mir mal anschauen. danke :)

[marcgfx]

Electron/NWjs ersetzen einfach den Browser. NWjs benutzt Chromium von Chrome. Ich kann Devader fast 1:1 laufen lassen, bis auf die Steam-Module die nicht im Browser laufen. Entwickelt/getested wurde Devader fast komplett in Chrome. Die Devtools sind ziemlich gut.

[joggel]

Okay. Ich bin da ja Neuling. Des wegen muss ich mal jetzt nachfragen^^:
Electron erstellt ja eigentlich ein eigenes Browserfenster und darin wird dann alles gerendert.
Als ich mal etwas mit den Sample-Apps von Eletron rumgespielt habe, und die im normalen Browser geöffnet habe, sah das alles nicht sehr toll aus.
(Hoffe das lag nicht an meinem Brave Brwoser).
Verstehe ich richtig, dass ich in so einer Electron-App auch HTML5/JS/WebGL-Komponenten einbetten kann? Und das der ganze Code dann auch in einem normalen Browser laufen könnte?

[marcgfx]

ich habe halt NWjs verwendet und ja du kannst alles was du im Chrome Browser machen kannst auch in NWjs machen (Plugin vermutlich nicht). HTML JS WebGL alles kein Problem. Electron soll ähnlich sein, aber ich habe es nie verwendet. Für NWjs empfehle ich Chrome als Browser, da beides Chromium verwendet. Wie gesagt, Devader wurde 100% in Chrome entwickelt. Um es in NWjs zu starten muss es einfach richtig Konfiguriert sein (Pfad zur ersten Datei, alles im Ordner wo die NWjs.exe ist)

[joggel]

Okay, danke. Ich mache mich da mal schlau und teste...

[NytroX]

Ja genau.

Also du musst zwischen den beiden quasi unterscheiden.

Für HTML/CSS/JS brauchst du IMMER eine Art Browser.
Hier hast du grundsätzlich 3 Möglichkeiten:
a) Der User hat einen Browser, und du lieferst das HTML/CSS/JS über HTTP aus (web)
b) Du lieferst eine Art Browser mit aus. Also genauer gesagt die Browser-Engine in Form von ElectronJS, NWJS, NeutralinoJS, hastenichgesehn...
c) Der User hat die Browser-Engine auf seinem Rechner, und das setzt du voraus und du sprichst die Engine aus deiner Applikation heraus an. Das wäre dann sowas wie WebView.

Der zweite Punkt ist, wie du die eigentliche GUI machen willst, die dann in dem Browser-Teil laufen soll. Da kannst du dann eigentlich alle gängigen Frameworks nehmen (Angular, React, Vue, Svelte, schlagmichtot, ... wenn du keine speziellen Anforderungen hast wie z.B. dlls zu benutzen. Dann isses halt logischerweise nicht mehr cross-platform, wenn du eine DLL oder SO lädst :-)

Eine interessante Alternative zu den ganzen Frameworks ist auch VanillaJS:
http://vanilla-js.com (fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications)
(sorry, der musste sein :-P)

[joggel]

Okay, verstehe.
Ich schaue mir das VanillaJS auch mal an.
Danke!

[joggel]

Eine interessante Alternative zu den ganzen Frameworks ist auch VanillaJS:
http://vanilla-js.com (fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications)
(sorry, der musste sein :-P)

Lol.