6 ms·

A React Renderer for Gnome JavaScript

141 points by bcye 2y ago

ingen0s 2y ago
This has all of the keywords for me to be interested
- globnomulous 2y ago
  Likewise, but with an added layer of dread and sadness. I do not welcome the web- and JavaScript-ification of non-web software.
  - jeroenhd 2y ago
    Plenty of GTK3 software is backed by Python, so switching to GJS should actually improve responsiveness. GTK can certainly be used without declarative GUI and stylesheets, but most programs seem to use both to design the GUI already. I think React + GJS is a good fit. I don't think it's a good idea to replicate this to other GUI frameworks (Qt, Win32, etc.), but GJS already has most of the components necessary built right into it. Perhaps there are more light-weight alternatives, but this specific combination is a win-win in my opinion.
gedy 2y ago
This looks quite nice/simple imho, and avoids Electron: // App.tsx import Gtk from "gi://Gtk?version=3.0"; import * as React from "react"; import { Box, Label, Renderer, Window } from "react-gjs-renderer"; Gtk.init(null); const App = () => { return ( <Window quitOnClose minWidth={200} minHeight={200}> <Box> <Label>Hello World</Label> </Box> </Window> ); }; const renderer = new Renderer({ appId: "com.example.app", }); renderer.start(<App />);
- techwizrd 2y ago
  Agreed. I don't think I'll drop gtk-rs any time soon, but this is certainly much faster for prototyping. I hope this encourages more folks to develop native Gnome applications.
iddan 2y ago
A few years back I wished there were such things when I tried building for Gnome.
carlgreene 2y ago
Somewhat kinda sorta related. I have been working in React for the past 7ish years or so. I decided to try Svelte/Kit for my last project that I have been working on for a year and a half. I liked it, but didn’t think much of it. That was until I joined a new company a few months ago that was building a NextJS app. It was amazing how overly complicated all the app code seemed to do relatively simple things. Comparing readability to my Svelte code was like me trying to read hieroglyphics. React was amazing for complex web apps coming from JQuery. But there are other more modern and much simpler and ergonomic frameworks that have built on and learned from the past decade of React development. Seems like the industry has a bit of Stockholm syndrome thanks to the amazing ecosystem React has…which no other front end framework comes close to IMO.
- phildenhoff 2y ago
  On the other hand, while I really enjoyed using Svelte for a side project, I ended up rewriting it back in React. I’ve got years of experience with React and found the Svelte story just wasn’t as refined. Particularly, I was missing support in Biome and Storybook integration was essentially not there a year ago. I’m not sure what it’s like today! But that’s the joy of bleeding edge tech vs. a tool that’s been a market leader for a decade
- gedy 2y ago
  A more apples to apples comparison is NextJS and SvelteKit - you'll see they have similar levels of complexity when solving the same type of problems. (I like Svelte too, but NextJS is pretty convenient for what it does.)
  - carlgreene 2y ago
    SvelteKit is what I used and I think they are both pretty reasonable in how they approach server vs. client side rendering, REST API's, etc... But strictly in dealing with client-side interactions and state, Svelte seems to just get out of my way, while React has so many foot-guns I have to conciously to avoid.
- no_wizard 2y ago
mattlondon 2y ago
I think what was more interesting to me was GnomeJS itself! I had no idea this was a thing, and it appears that they have built a few official things in Gnome using it (weather app, sound recorder app). Very interesting! Edit: looks like most/all (?) of gnome's shell is JavaScript too! https://gitlab.gnome.org/GNOME/gnome-shell/-/tree/main/js/ui?ref_type=heads https://gitlab.gnome.org/GNOME/gnome-shell/-/tree/main/js/ui... seems like NPM is nowhere to be seen too - brilliant.
- freedomben 2y ago
  Yeah, JavaScript has been at the core of Gnome now for years. It's brilliant IMHO because it enables the huge ecosystem of web devs to build native apps. The only thing is it's very poorly known/advertised for some reason. It works quite well too and is very easy to get started. I've hacked together some gjs snippets a few times and it was so, so much easier for a drive-by hack than in the past trying to deal with a complex build system.
- moondev 2y ago
  You can also use html5 as a display output for gtk applications. https://docs.gtk.org/gtk4/broadway.html https://docs.gtk.org/gtk4/broadway.html
- zazaulola 2y ago
  There are pros and cons to using JS. GJS has only collected the negative features of JS. If there is some guarantee for JS applications that it will work in a few years, then each new GNOME release breaks half of the extensions. Enabling and disabling an extension freezes the system for 8-10 seconds. And it would be fine if GNOME extensions were too functional... But in fact, the functionality of GNOME extensions lags behind conky or XFCE in capabilities by at least 10 years.
bilater 2y ago
Who uses gnome? Why would you use Gnome over other linux distros? I'm not asking as a diss I genuinely don't know much about the different preferences ppl have for open source OS.
- oaththrowaway 2y ago
  GNOME isn't a distro, it's a Desktop Environment. It comes as the default in Fedora and Ubuntu, among others.
  - bilater 2y ago
    ohhh
- n3storm 2y ago
  You probably live a monovendor world for your workstation. Linux world is multivendor from the ground up. Just a simple example in your language: app panel launcher can be provided by a software with a different origin of windows manager (as in move, resize, tile windows on your desktop). Yeah, kind of like android but this concept comes from thirty years ago.
- UncleEntity 2y ago
  I've been using Gnome for over 20 years... Other than the constant battle to set the preferences back every time I do a distro upgrade can't really complain.
zb3 2y ago
GNOME, the desktop environment that doesn't let you change gamma on Wayland without using ugly hacks which are not officially supported. GNOME, the DE where the "system monitor" app doesn't display network traffic per process, but instead of adding the support for that, we have another app called "Resources" which doesn't let you see anything you couldn't in the system monitor. Whoever prioritizes tasks there seems insane to me..
- cbarrick 2y ago
  This has been the case for well over a decade. I remember in the Gnome 2 to 3 transition, they removed the ability to change screensaver options... I'm not sure that ever came back. I use Gnome daily at work, but I'd switch to KDE if I had a free day. (At home I'm on macOS + headless Linux.)
freedomben 2y ago
Awesome! I've long felt that if most devs (especially web devs and/or javascript people) knew about Gnome's excellent javascript support (gjs) they would be much more likely to switch OSes and build some really neat apps. I've been surprised at the lack of interest/enthusiasm. My theory is that it's mostly an awareness problem with a handful of papercuts/sprinkling of technology insufficiency (such as "I'm a React person so I'd like to use React to build a UI), but I'd love to hear from people if that's not the case. Really cool project! Looking forward to seeing what people do with it :-)
- pjmlp 2y ago
  GNOME adoption of JavaScript is one of the reasons why I eventually started using XFCE.
  - freedomben 2y ago
    Can you elaborate a bit more? Like Did you notice a decrease in quality?
    - pjmlp 2y ago
      The JavaScript extensions, besides requiring a rewrite from the old C model, for a long time were the root cause of performance issues given how much GNOME has outsourced into extensions from what used to be core features in the GNOME 1.x and 2.x days. Here is an old example, https://feaneron.com/2018/04/20/the-infamous-gnome-shell-memory-leak/ https://feaneron.com/2018/04/20/the-infamous-gnome-shell-mem...
      - freedomben 2y ago
        Fair. I do think it's unfortunate how "bare bones" Gnome core has gotten. It's also a gigantic pain in the ass how major releases often break good extensions. It does seem that is getting better, but for a while there I actively tried to stay on release n-1 because otherwise my extensions would all be broken.
      - 2y ago
westurner 2y ago
From https://github.com/react-gjs/renderer#elements-of-gtk3 https://github.com/react-gjs/renderer#elements-of-gtk3 : > List of all GTK3 Widgets provided as JSX Components by this renderer:
zazaulola 2y ago
Always hated GNOME 3 for their decision to implement a JavaScript engine into the base UI. Time goes by, now it's time to implement React.
vinnymac 2y ago
Are there any other desktop environments that support JS?
- niutech 2y ago
  There is AtomOS: https://github.com/ruslang02/atomos https://github.com/ruslang02/atomos
- e12e 2y ago
  Windows did, but I think it's deprecated now? https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/february/modern-apps-create-windows-store-apps-with-html5-and-javascript https://learn.microsoft.com/en-us/archive/msdn-magazine/2013...
shepherdjerred 2y ago
Is there anything like this for macOS/iOS?
- niutech 2y ago
  GTK supports MacOS: https://www.gtk.org/docs/installations/macos https://www.gtk.org/docs/installations/macos, there is GJS in Homebrew nad MacPorts.
  - bcye 2y ago
    Do you know by chance how well the support is? I understand components should look native on macOS, but I couldn't find a lot of info about Gnome on Mac
jakjak123 2y ago
Why is it gtk3? No Gtk4?

141 points by bcye 2y ago

ingen0s 2y ago

This has all of the keywords for me to be interested

globnomulous 2y ago
Likewise, but with an added layer of dread and sadness. I do not welcome the web- and JavaScript-ification of non-web software.
- jeroenhd 2y ago
  Plenty of GTK3 software is backed by Python, so switching to GJS should actually improve responsiveness. GTK can certainly be used without declarative GUI and stylesheets, but most programs seem to use both to design the GUI already. I think React + GJS is a good fit. I don't think it's a good idea to replicate this to other GUI frameworks (Qt, Win32, etc.), but GJS already has most of the components necessary built right into it. Perhaps there are more light-weight alternatives, but this specific combination is a win-win in my opinion.

gedy 2y ago

This looks quite nice/simple imho, and avoids Electron: // App.tsx import Gtk from "gi://Gtk?version=3.0"; import * as React from "react"; import { Box, Label, Renderer, Window } from "react-gjs-renderer"; Gtk.init(null); const App = () => { return ( <Window quitOnClose minWidth={200} minHeight={200}> <Box> <Label>Hello World</Label> </Box> </Window> ); }; const renderer = new Renderer({ appId: "com.example.app", }); renderer.start(<App />);

techwizrd 2y ago
Agreed. I don't think I'll drop gtk-rs any time soon, but this is certainly much faster for prototyping. I hope this encourages more folks to develop native Gnome applications.

iddan 2y ago

A few years back I wished there were such things when I tried building for Gnome.

carlgreene 2y ago

Somewhat kinda sorta related. I have been working in React for the past 7ish years or so. I decided to try Svelte/Kit for my last project that I have been working on for a year and a half. I liked it, but didn’t think much of it. That was until I joined a new company a few months ago that was building a NextJS app. It was amazing how overly complicated all the app code seemed to do relatively simple things. Comparing readability to my Svelte code was like me trying to read hieroglyphics. React was amazing for complex web apps coming from JQuery. But there are other more modern and much simpler and ergonomic frameworks that have built on and learned from the past decade of React development. Seems like the industry has a bit of Stockholm syndrome thanks to the amazing ecosystem React has…which no other front end framework comes close to IMO.

phildenhoff 2y ago
On the other hand, while I really enjoyed using Svelte for a side project, I ended up rewriting it back in React. I’ve got years of experience with React and found the Svelte story just wasn’t as refined. Particularly, I was missing support in Biome and Storybook integration was essentially not there a year ago. I’m not sure what it’s like today! But that’s the joy of bleeding edge tech vs. a tool that’s been a market leader for a decade
gedy 2y ago
A more apples to apples comparison is NextJS and SvelteKit - you'll see they have similar levels of complexity when solving the same type of problems. (I like Svelte too, but NextJS is pretty convenient for what it does.)
- carlgreene 2y ago
  SvelteKit is what I used and I think they are both pretty reasonable in how they approach server vs. client side rendering, REST API's, etc... But strictly in dealing with client-side interactions and state, Svelte seems to just get out of my way, while React has so many foot-guns I have to conciously to avoid.
no_wizard 2y ago

mattlondon 2y ago

I think what was more interesting to me was GnomeJS itself! I had no idea this was a thing, and it appears that they have built a few official things in Gnome using it (weather app, sound recorder app). Very interesting! Edit: looks like most/all (?) of gnome's shell is JavaScript too! https://gitlab.gnome.org/GNOME/gnome-shell/-/tree/main/js/ui?ref_type=heads https://gitlab.gnome.org/GNOME/gnome-shell/-/tree/main/js/ui... seems like NPM is nowhere to be seen too - brilliant.

freedomben 2y ago
Yeah, JavaScript has been at the core of Gnome now for years. It's brilliant IMHO because it enables the huge ecosystem of web devs to build native apps. The only thing is it's very poorly known/advertised for some reason. It works quite well too and is very easy to get started. I've hacked together some gjs snippets a few times and it was so, so much easier for a drive-by hack than in the past trying to deal with a complex build system.
moondev 2y ago
You can also use html5 as a display output for gtk applications. https://docs.gtk.org/gtk4/broadway.html https://docs.gtk.org/gtk4/broadway.html
zazaulola 2y ago
There are pros and cons to using JS. GJS has only collected the negative features of JS. If there is some guarantee for JS applications that it will work in a few years, then each new GNOME release breaks half of the extensions. Enabling and disabling an extension freezes the system for 8-10 seconds. And it would be fine if GNOME extensions were too functional... But in fact, the functionality of GNOME extensions lags behind conky or XFCE in capabilities by at least 10 years.

bilater 2y ago

Who uses gnome? Why would you use Gnome over other linux distros? I'm not asking as a diss I genuinely don't know much about the different preferences ppl have for open source OS.

oaththrowaway 2y ago
GNOME isn't a distro, it's a Desktop Environment. It comes as the default in Fedora and Ubuntu, among others.
- bilater 2y ago
  ohhh
n3storm 2y ago
You probably live a monovendor world for your workstation. Linux world is multivendor from the ground up. Just a simple example in your language: app panel launcher can be provided by a software with a different origin of windows manager (as in move, resize, tile windows on your desktop). Yeah, kind of like android but this concept comes from thirty years ago.
UncleEntity 2y ago
I've been using Gnome for over 20 years... Other than the constant battle to set the preferences back every time I do a distro upgrade can't really complain.

zb3 2y ago

GNOME, the desktop environment that doesn't let you change gamma on Wayland without using ugly hacks which are not officially supported. GNOME, the DE where the "system monitor" app doesn't display network traffic per process, but instead of adding the support for that, we have another app called "Resources" which doesn't let you see anything you couldn't in the system monitor. Whoever prioritizes tasks there seems insane to me..

cbarrick 2y ago
This has been the case for well over a decade. I remember in the Gnome 2 to 3 transition, they removed the ability to change screensaver options... I'm not sure that ever came back. I use Gnome daily at work, but I'd switch to KDE if I had a free day. (At home I'm on macOS + headless Linux.)

freedomben 2y ago

Awesome! I've long felt that if most devs (especially web devs and/or javascript people) knew about Gnome's excellent javascript support (gjs) they would be much more likely to switch OSes and build some really neat apps. I've been surprised at the lack of interest/enthusiasm. My theory is that it's mostly an awareness problem with a handful of papercuts/sprinkling of technology insufficiency (such as "I'm a React person so I'd like to use React to build a UI), but I'd love to hear from people if that's not the case. Really cool project! Looking forward to seeing what people do with it :-)

pjmlp 2y ago
GNOME adoption of JavaScript is one of the reasons why I eventually started using XFCE.
- freedomben 2y ago
  Can you elaborate a bit more? Like Did you notice a decrease in quality?
  - pjmlp 2y ago
    The JavaScript extensions, besides requiring a rewrite from the old C model, for a long time were the root cause of performance issues given how much GNOME has outsourced into extensions from what used to be core features in the GNOME 1.x and 2.x days. Here is an old example, https://feaneron.com/2018/04/20/the-infamous-gnome-shell-memory-leak/ https://feaneron.com/2018/04/20/the-infamous-gnome-shell-mem...
    - freedomben 2y ago
      Fair. I do think it's unfortunate how "bare bones" Gnome core has gotten. It's also a gigantic pain in the ass how major releases often break good extensions. It does seem that is getting better, but for a while there I actively tried to stay on release n-1 because otherwise my extensions would all be broken.
    - 2y ago

westurner 2y ago

From https://github.com/react-gjs/renderer#elements-of-gtk3 https://github.com/react-gjs/renderer#elements-of-gtk3 : > List of all GTK3 Widgets provided as JSX Components by this renderer:

zazaulola 2y ago

Always hated GNOME 3 for their decision to implement a JavaScript engine into the base UI. Time goes by, now it's time to implement React.

vinnymac 2y ago

Are there any other desktop environments that support JS?

niutech 2y ago
There is AtomOS: https://github.com/ruslang02/atomos https://github.com/ruslang02/atomos
e12e 2y ago
Windows did, but I think it's deprecated now? https://learn.microsoft.com/en-us/archive/msdn-magazine/2013/february/modern-apps-create-windows-store-apps-with-html5-and-javascript https://learn.microsoft.com/en-us/archive/msdn-magazine/2013...

shepherdjerred 2y ago

Is there anything like this for macOS/iOS?

niutech 2y ago
GTK supports MacOS: https://www.gtk.org/docs/installations/macos https://www.gtk.org/docs/installations/macos, there is GJS in Homebrew nad MacPorts.
- bcye 2y ago
  Do you know by chance how well the support is? I understand components should look native on macOS, but I couldn't find a lot of info about Gnome on Mac

jakjak123 2y ago

Why is it gtk3? No Gtk4?