Why I chose Electron.js for my side business(getloaf.io) |
Why I chose Electron.js for my side business(getloaf.io) |
Learning takes time and effort, and the more general the tool I use the better.
If I had to implement a desktop app tomorrow, I would default Electron, no contest.
A bit of an aside, but I was thinking lately, it would be great for linux to have an SSD benchmarking app, just like CrystalDiskMark, I would never attempt to implement something like this in Qt or GTK, there's just too much to learn beforehand compared to simply going with CSS, wrapping the fio command in a JavaScript shell call then publishing everything as an appimage. This way I know it will work everywhere and it will have a consistent look and feel everywhere. I might actually set this up as a weekend project sometime next month. Without Electron it would take me months of intense dedicated time, which I would rather spend on something else.
Electron app memory usage: 150MB
Native app memory usage: 0 MB (because you never ship it)
really hit home for me.
Of course it does not apply to everything, some apps do need every last clock cycle of speed, but so far none of mine had.
I cloned a 165mb Electron app in Sciter, and it was only 6mb:
In fact, you can write GTK apps in JS. A year or two before Electron came along, the Gnome folks had the foresight to declare that JS would be the language of choice for promoting GTK and Gnome app development, with the option to drop back to C otherwise. This caused a minor controversy, where the community decided to rage against this effort and essentially rejected it. Here we are then, instead.
Rather than the "default" toolkit of choice in 2020 being GTK, which is cross-platform, provides an opportunity to get closer to "native", and has the roots and traditions of pre-GitHub FOSS, an vacuum was left wide open—unfilled due to the internal revolt/denial of the Linux desktop crowd. So the NodeJS and web developer community swooped in and filled it, with their dubious sui generis practices pushed to the forefront instead, and the world is shipping apps in browser runtime containers.
I'll eat my hat if it's as easy to write a hello world in GTK as it is in Electron/nw.js.
Keep in mind that with Electron/nw.js I download the toolkit binary and then simply declare an arbitrary webpage or js file filled with arbitrary modern HTML5 to be my "main" page/script. That means any frontend dev can immediately get a "hello world" running with no extra tooling and immediately access the full dev environment they are used to. Aside from the json file they don't even have to learn any of the non-HTML5 APIs (which, btw, are typically where the most nefarious bugs live in these toolkits).
What is more, the dev can immediately bring in any of the zillion frameworks they depend on to pad strings or whatever.
I'm guessing GTK has a way to hook into its own API through javascript. But if it's anything more than a single call to create a window and fill its webview with a page (or execute a js in its context), it's already more complicated and electron/nw.js wins.
Edit: typo
The fact of the matter is, ecosystem trumps everything else. For UX development, nothing comes close to javascript. The language may suck, npm is somewhat of a trainwreck, and yet, if you want any sort of esoteric component, you'll find it in JS.
It's got so many tools that it simply isn't uncommon for newer desktop apps to have embedded browser in them as an option.
Want proof?
- Show me a Lazarus native flamegraph.
- Show me a Lazarus graph library that comes close to D3
- Show me a Lazarus date picker :D
Sure, if you are doing something like game design or whatever, then JS is probably a poor fit. However, for pretty much any cooperate application, it is really hard to beat the JS ecosystem. Further, the hard part of distributing those sorts of applications have already been solved. Electron works great if you need a dedicated app. However, you can also just make things a webapp and be done with it.Yeah, I hate the language. I even hate parts of the ecosystem (is-even... WTF?!?!?!). However, you just have to admit that nothing comes close to the tools and widgets you get for free by adopting js. It was built for UX.
Yes I hate bloat but I'm starting to hate it less and less each day due to understanding more and more the effort required to build things (in general, not just desktop apps).
I think, unless you have the resources to dedicate yourself to just one OS/toolkit, for which your app performance is an absolute must, it's better to prioritize delivery speed and adoption, using generic tools, with plenty of resources and skills that can be transfered from other areas, like web frontend is in this case. One thing is for sure, I don't have time and resources but I have a pretty fast laptop, so the choice is easy in my case.
Not weird at all.
c'mon, getting the very basics of it in Qt took the better part of 15 minutes and less than 100loc - then it's mostly a menial "where to show which data"
I used to think this same way about things because I had so much time in the tools that I never looked at stuff from a perspective of people who have no clue.
Now that I have a friend going through coding schools and everything with zero understanding, everything I think is "just a 15 minutes of tinkering and you'll know all the bits you need" is actually 3 months of banging your head against the fucking wall.
Don't let your existing experience cloud your judgement.
I can almost guarantee you that an average frontend developer (web) would not be able to do that.
Learning takes time and effort, and the more general the tool I use the better.
I mean, you could have just written this. It's fine you don't want to learn anything new, but it makes your judgement suspect - hence the "Wayland vs X" confusion.1. Learn Electron and implement an app, publish to all platforms.
2. Choose your target OS, learn the native toolkit, implement the app, switch to other OS, implement again, rinse and repeat for all, and in the case of linux you have to deal with multiple toolkits and you have to know the quirks around Wayland support (with electron you don't necessarily as chromium handles most of that).
One of them simply takes way more time and effort than the other.
Users are acutely sensitive to apps that feel right. It's something Java learned the hard way, or not at all: there's an uncanny valley if you get it wrong, and users hate that. Native apps will always be better than a web app, but a web app will be better than an app that doesn't really have a home on any platform.
It would have been great if users were willing to say, "Oh, I know this, it's a Swing app, just like the one I used on my Mac/PC/Linux/etc." But Swing never really succeeded, and web browsers did.
Congrats on the app, it looks great :)
People love Discord. On a desktop they have no choice but to use its Electron client. Some people love Skype, but I guess not one of them wanted for native Skype to migrate to Electron. The list goes on.
Electron app developers are dime a dozen, comparing to native app developers. That's the biggest driver behind Electron popularity: business decision.
These are just the last few results for `yay -Ss discord`:
aur/purple-discord-git v0.0.r637.d47f0bc-1 (+13 0.24)
A libpurple/Pidgin plugin for Discord.
aur/ripcord 0.4.27-1 (+20 0.66)
Qt-based Discord and Slack client
aur/discord-canary 0.0.115-1 (+29 2.70)
All-in-one voice and text chat for gamers that's free and secure.
aur/discord_arch_electron 0.0.12-4 (+46 17.96)
Discord (popular voice + video app) using the system provided electron for increased security and performance
community/discord 0.0.12-2 (50.8 MiB 173.6 MiB) (Installed)
All-in-one voice and text chat for gamers that's free and secure.I have never seen people avoiding them, because they don't have a native interface. As long as interface is intutive, people are happy to use them.
* button/link handling: win desktop uses the pointer with hover effects; electron uses a hand cursor with hover effects
* minimize/maximize/close buttons, and title bars in general; electron apps tend to have them being bigger than native. Native tends to vary by framework, with UWP explicitly not allowing some of the desired customization.
* Electron and web apps in general tend to allow more text selection than native does, and with different patterns; there are pros and cons to this.
* Electron apps tend to handle high and mixed DPI better than the native frameworks (I can’t believe I’m typing this). UWP dialogs are super buggy on high and mixed DPI. WPF needs lots of manual configuration otherwise it will look blurry at least some of the time (the very latest changes _may_ have fixed this)
I tend to support native development in general, but in the case of win desktop, the native frameworks are so bad and inconsistent, I’d rather just follow the web patterns. E.g. I think the hand cursor on buttons and things is actually quite nice and worth emulating, same with non-shit titlebars.
Because so many daily use apps (VS Code, Teams, Slack, all of the web) are electron, electron often feels more native than native, at least on Windows.
Edit, since I was suddenly triggered: SVG support on Windows is shit. WPF can sort of do it if you convert to Path geometries, but that isn’t a perfect match or convenient in any way. UWP does that, but with the added bonus of an extremely buggy rendering engine that falls down on even the simplest icons.
We will of course ship native iOS/Androids apps at some point and then there will come a reckoning. Some sort of a hybrid solution is an option of course (make the bulk of the app native and have a small webview for the editor).
0: https://kitemaker.co, a super fast issue tracker with deep integrations to all of your tools
We do every once in a while end up with really embarrassing bugs though since we rarely touch the mouse ourselves.
I've also heard that PWAs have made significant progress toward being a viable option for building a desktop app. Curious what folks think about this as an Electron / native alternative.
Obviously they do, but it seems like explaining things to developers should be table stakes.
Will Flutter keep improving? Or will Google get bored with it and neglect it, like they have with Angular? I have a guess.
Still in Alpha.
I hope Flutter will solve that
Browser-based apps have no common UI rules at all, which makes them significantly more confusing to use.
For my own desktop apps, I'd choose Qt, since cross platform support is top notch.
With that said, I understand that nowadays, C++ developers are harder to come by, and memory corruption issues are not fun to work with.
Though I haven't done anything that I would consider extremely complex, memory corruption seems easy enough to deal with by planning.
Maybe because it is so ingrained as whenever I heard discussions of C++, memory (de)allocation and memory corruption was always the first thing people talked about. Dealing with de-allocation feels like closing a curly brace, almost automatic.
Currently I sell about 100 copies per month (and donate $350 of it to charity).
Public: https://videohubapp.com/
GitHub: https://github.com/whyboris/Video-Hub-App
ps - and I have a free file renamer made in Electron and Angular: https://yboris.dev/renamer/
There is a measurable cost to me for using these “lazy” apps:
- time and data plan spent downloading and updating these monsters
- my disk space (yes, my previous laptop ran out of space, which is hard to accept when you see “simple” apps using hundreds of megabytes)
- my battery life and utility bill (it is easy to measure the absurd CPU use of some of these things)
I am literally subsidizing your development with my own resources, because you couldn’t be bothered to create something that is at least moderately optimized for users.
In practice you are getting a "discount", because there was a time when most apps were paid for, while all the electron apps I use at least are free -- so there isn't anything to discount.
Due to money (development costs) and ongoing support (being able to improve and maintain the UI with CSS) I had to find a tool that would work for me.
Maybe one day with enough time and money, I'll be able to develop some beautiful native desktop apps for macOS and Windows. That would be nice :)
My understanding is that you could not use these apps. So how could one feel entitled to discounts based on implementation quality?
I bet most people who have a problem with Electron are laptop users. I use a refurbished HP desktop i7 that I bought two years ago for $300 on Amazon and upgraded the SSD and 32gb RAM for another $250 or so. I can run numerous instances of VS Code, Chrome, Slack, Postman, etc all day without even a hint of a slowdown. I also never hear my fans go on, not ever.
I work in a nice quiet room and I don’t have to travel to work. I never understood why people want to optimize for working on trains, planes and in meetings. Even when I was going into the office, I didn’t need to bring my computer home because I had the exact same machine at home since it was so cheap.
Sure one or two apps are ok. But since each app is Electron (not literally but a huge number). Your RAM melts like butter in near Sun's orbit.
It's both interesting and exasperating that the modern JS ecosystem and its influencers have managed to recreate the experience of downloading SDKs and fiddling with configuration options and dealing with builds that sometimes fail, and that when they don't, build success means producing inscrutable blobs where View Source is rendered useless. On the whole, it's a community that has neglected to maintain the ecosystem's original strengths.
https://www.colbyrussell.com/2019/03/06/how-to-displace-java...
To give my own experience, I'm almost exclusively a C++ coder but had to do two Web projects earlier this year, a React one and a custom one, and even though both times it felt like eating nails, it didn't take more than a day to "get in" ; I'm confident that it's be the same no matter the language except maybe APL and derivatives :)
In CSS it's "user-select: none;" and you're done. Playing to your strengths is important when building a business so that's exactly what I did :)
It kinda really isn't. "Great UX" is not something I associate with any web app. They're generally slow and unresponsive, have atrocious accessibility, and don't integrate with OS native UX concepts.
That's not really the point I was making. The point I was making is that if you want to do anything more complicated then "push this button", you'll quickly find out how limited pretty much every other UX environment is.
Javascript isn't "Great UX" it is "Great UX ecosystem".
To put it frankly: they're all flaming heaps of dog shit.
sure - but to give you an example doing something like that is the kind of project that I'd give to beginning computer science students that know pretty much nothing outside of for-loops and variables, and I know from experience doing that every year that they'd get it done in a few weeks, including learning enough of Qt to achieve it. So if you have existing programming knowledge it should not take more than a week, even without knowing C++.
I think folks who are steeped in the webdev stuff and UI don't always grok languages like C++ or its many footguns as easily as one may suspect. fwiw I feel the same way when I have to do any web stuff (i.e. out of my element). C++ may seem easy, especially when using a framework like Qt, but students tend to get really overwhelmed by all of the rules to avoid the language's pitfalls (e.g. the GSL rules, abseil's tips, Scott Meyer's books and so many other authors, etc).
Perhaps if one is a great teacher, the pedagogy can introduce these things in a tolerable progression. I found as long as students stuck to value semantics only they got it, but as soon as they used a framework that dealt in references / pointers it was a real step function in difficulty. Thinking about the lifetime pitfalls and related UB really ratcheted up the mental load, and I was not really trained how to teach effectively (like most grad students).
It's not specific to web developers. "Grok" has a meaning (and C++ a beastliness) that precludes most C++ programmers from being able to be described as "grokking" C++. Most C programmers don't even grok C, and as far as feats go, it's one that's many times smaller than the one discussed here.
> Keep in mind that with Electron/nw.js I download the toolkit binary and then simply declare an arbitrary webpage or js file filled with arbitrary modern HTML5 to be my "main" page/script.
I don't know why you assume that GJS is any different. Well, actually it is different: you don't have to "declare" any file. You can open up a file hello.js, write your code, and... there it is, in a dozen SLOC. (If you really wanted to, you could write an entire app in that one file.)
Not that any of this is even relevant, because you totally misread my comment. It was not about how GJS is better than Electron and the Electron folks just won't admit it. It was about how Electron is better than whatever the JS-hating GTK developers wanted, but they were too shortsighted to see the future we were going to end up in with or without their endorsement. So your kneejerk defense of your tribe is off the mark.
https://developer.gnome.org/gnome-devel-demos/stable/hello-w...
The actual file is 42 lines there, which includes a shebang and a bunch of calls to GTK stuff.
And that is my point-- it's 42 lines too long to matter whether or not we travel back in time to beat back the "JS-hating GTK developers." Because as it turns out, most devs are not looking for a way to use GTK from their favorite language Javascript. They just want to continue their frontend development in a box as if they are simply developing for the web, and then have the results show up as the GUI for a cross-platform desktop application.
> The actual file is 42 lines there
Okay? If you encounter an argument "There exists an X", proving it wrong is not as trivial as pointing out "I can show there (also) exists a Y".
I wrote what I wrote for a reason. Write such a hello world program in a mainstream idiomatic style that most closely resembles the way a JS programmer would write, and a GTK hello world app is (shocker!)... 12 SLOC, as mentioned:
$ ls -l ./scratch/hello.js # written yesterday
-rwxrwxr-x 1 asmithee asmithee 402 Nov 20 13:54 ./scratch/hello.js
$ cloc ./scratch/hello.js | \
> grep -ie javascript | \
> sed "s/ \( \+[0-9]\+\)\{3,3\}/ /g"
Javascript 12
$ cat ./scratch/hello.js
const Gtk = imports.gi.Gtk;
let mainWindow = null;
let app = new Gtk.Application();
app.connect("startup", function buildUI() {
const text = "Hello, World";
mainWindow = new Gtk.ApplicationWindow({
application: app, title: text
});
mainWindow.add(new Gtk.Label({ label: text }));
});
app.connect("activate", () => { mainWindow.show_all() });
app.run(ARGV);
> includes a shebangYour thumb is on the scale. No shebang is necessary, and as you pointed out yourself, the equivalent in the Electron world is to 'simply declare an arbitrary webpage or js file filled with arbitrary modern HTML5 to be my "main" page/script'. And speaking of package.json...
> a bunch of calls to GTK stuff
Your thumb is on the scale. Electron developers learn how to deal with "Electron stuff". And, hello? JSX? React? These are things that are used extensively in this space and come with their own complexities and have to be learned. (And neither are even inherently Web things. They're inventions of "framework" people and live entirely in that layer.)
> And that is my point-- it's 42 lines too long
Your thumb is on the scale. There is no equivalent Electron app that is 0 lines long. And let's talk about the untold number of projects whose package.json require many more lines, even for small, trivial, or incomplete programs. That's package.json alone, i.e., before we even get to writing code that actually does anything. Besides that, the community around NodeJS is renowned for bloat and esoteric tooling. As a concrete exercise, take a look at any random repo on GitHub, and you're likely to find the root of the source tree filled a dozen or more auxiliary files. Simplicity is a strength, but it's not one valued very highly by the people who've ended up writing Electron apps and participating in the larger NodeJS community.
In any case, regardless of this stupid (stupid!) attempt at a takedown, you can't ignore that (a) you're responding, as mentioned before, to an argument you're imagining rather than the one anyone is actually making, (b) even if your response were on-target, the argument in it is anachronistic. To be able to "continue" the tendencies they've settled into now in 2020 is an impossible constraint when the entire context of this subthread is how Gnome folks' actions in 2011 could have led to a drastically outcome for how mainstream, cross-platform apps written in JS are developed. To insist that Electron is the best fit for a bunch of developers who are used to and comfortable with writing Electron apps is not insightful, it's just begging the question.
Here's another example: GNOME shell uses JavaScript and CSS, and it's pretty straightforward to understand. Was looking at the code of a plugin to hide the workspace switcher popup and tried a few things to instead reduce the animation time to something that does not necessarity stick around over my windows too long to bother me when I want to view the content beneath. Took and few hours but I got it configured decently, and "live reloaded" it to get the effect instantly. Here I reused my JavaScript knowledge to solve it; if it wasn't so easy due to my previous unrelated knowledge I probably wouldn't have invested any time in it.
Personally I can't agree, since in this case using what you know involves shoe-horning a hacked together and mutated beast into a role it wasn't designed for.
It's true what you're saying, JavaScript wasn't designed for this, and chromium is being repurposed for something out of it's scope too. But hopefully it will evolve with time in the right direction, my honest opinion is that it has the potential, mainly due to it's popularity, there's and huge amount of resources and hours people are willing to invest it it.
The irony is that if you write a desktop app at one point, you will soon learn about all the things that Chromium doesn't do for you. Want to run some kind of privileged operation (since disk benchmarks came up)? Tough luck, there is no special pass for you on macOS just cause it's Chromium. And with the app sandbox, there are now lots of things that are privileged. This story repeats ten times for every OS you want to support, regardless of using CSS for your UI chrome.
For the OS specific stuff that chromium doesen't handle, that's fair, hopefully I'll have to deal with as little of that as possible.
https://en.wikipedia.org/wiki/List_of_platform-independent_G...
For comparison, the Playstation 3 has 256MB of system RAM, and manages to run GTA V.
[0] See the Ripcord application, discussed https://news.ycombinator.com/item?id=23163960
Is there a mobile app? Nope! Dead on arrival. In 2020, Slack or Teams or anything similar is literally useless without a mobile app.
Feature matrix says animated emojis will arrive "never." lol!
I remember the days of native chat clients like Skype and AIM. I remember how Linux and Mac platforms were basically half-clients compared to Windows. It sucked.
Electron applications like Slack and Spotify work everywhere, exactly the same. And if you think about it, that's why something like chat and music apps would prioritize ease of cross-platform deployment over perfect efficiency. They're not particularly demanding, and they are most valuable to people when they're ubiquitous. If Spotify isn't in every device I own it loses a great amount of value.
Nobody's sitting at their Activity Monitor staring at the RAM usage of Slack or Teams. In reality, performance is fine. It's just chat.
(Interestingly enough, I've never found a music application that skips tracks more quickly than Spotify, even for locally-stored music. It's just instant with no gaps.)
Yes, because they're just web pages. Then why not just use the browser to display them?
So does the Mac I'm using.
Slack is taking less than 1% of my Ram.
PS3 was released 13 YEARS ago.
At the time AIM was the dominant chat client, and it probably took more like 5% of RAM available.
That's why I used it for my example. Past systems are a useful benchmark for what it's practical to do with a certain level of computational horsepower.
> Slack is taking less than 1% of my Ram.
My system has 8GB, so 3.7%. I'd rather have 3.4% of my memory back.
More broadly, we should consider that we may run many bloated apps. Even if Slack doesn't do too much harm on its own, if all your desktop apps are using 10x the resources they could be using, it adds up to you spending more on hardware than you should have to.
You paid for that 16GB of RAM. That should let you do a lot more than old computers can, rather than doing the same things we did 15 years ago with bloated software.
> At the time AIM was the dominant chat client, and it probably took more like 5% of RAM available.
Right, like Ripcord, it did roughly the same thing Slack/Teams do, using far fewer resources.
Sure, people could spend more money to mostly sidestep the issue (supposing they didn't have any workloads which actually benefited from all available RAM), but that doesn't make it a non-issue.
Slack has, to put it mildly, plenty of money, and gave us a 300MB bloated client. Ripcord is a payware alternative client made by a single developer.
Things seem to be precisely backward.
I think there are some UI niceties to the 'app' version but it's essentially the same.
Teams refers to Microsoft's competing product. Like Slack, its desktop app is really just the web version.
However, it might also make it harder to find bugs and it will produce bloat with real, noticeable consequences - e.g. increased RAM, CPU and disk usage, more sluggish UI behavior, etc - except, those effects will happen on the user's machine, not the developer's, so a developer might be tempted to ignore them.
I would expect that a pinned Slack tab in Chrome/Edge would be able to share some resources with the browser that a separate Slack app can't.
Has anybody tested the performance difference between running 100 browser tabs vs. running the same webapps as 100 electron processes?
Is the bottleneck in your system actually ram usage? Because I think implicit in your view is that you have a better usage for that ram. If so, what?
Because I really struggle coming up with more than about 5 electron apps I might ever run at any given time (Slack, VSCode, Discord, maaaybe Etcher..., and I'm basically out of ideas). Even then, two of those apps are both chat apps and I probably shouldn't have Discord open for work, and I don't use slack for any personal reason.
Basically - Electron apps are all applications that are UI heavy. I don't have the mental power to manage more than about 5 open and active UI apps before I'm the bottleneck, not the computer.
So at 5, you're spending 15-18% of your RAM on 5, 5! apps that you want to be interacting with rich GUIs at any given time. I just don't see it.
At least for my use cases, electron apps almost always make up a trivial amount of my total ram usage. Docker/Development Env/Vms DOMINATE in comparison.
So while I get that it could be faster, the reality of the situation is that without electron, none of the apps I listed would work on Linux at all. Instead they all do by default.
So right now on amazon, 16gb of ram is 53 bucks for a decent module. 150/16000 = .009. So basically - I paid 49 cents, and got apps that work by default on my platform of choice. That's pretty fucking amazing compared to old platform specific apps.
That said I can think of some pretty good reasons.
- Users don’t understand it as well or are less comfortable with it.
- Users’ general preference for logical separation
- Mobile safari doesn’t support browser notifications.
- You won’t get browser notifications if you close the tab by accident
- You lose OS integration, like replying via OS notifications in Slack or using OS Music controls with Spotify
On top of all that a browser tab uses plenty of RAM as well so I don’t really see the upside of using the browser for these apps, either.