Why I chose Electron.js for my side business

https://getloaf.io/blog/why-i-chose-electronjs/

by knowingathing • 6 years ago

127 121 6 years ago

For all the hate it gets, this is exactly why I'm glad Electron exists: tooling that empowers people to create things that would otherwise be entirely out of reach for them.

Congrats on the app, it looks great :)

shanehoban• 6 years ago

Cool product, it'd be interesting if a marketplace style thing could exist in it too to vastly increase the number of available images, and allow others to profit off your app too (you take your cut of course).

moneywoes• 6 years ago

How is Flutter for Windows and MacOS in contrast to electron?

thefounder• 6 years ago

I guess it is like Dart is for the web in contrast with JavaScript?

Slartie• 6 years ago

It is alpha and it is from Google. Electron has neither of those flaws (which btw combine in my opinion to some kind of super-flaw, like those Transformers toys).

apozem• 6 years ago

Many years ago, after they iced one of their half-assed messaging apps, I joked that the Google motto is, “If it’s worth doing, it’s worth doing badly.”

Will Flutter keep improving? Or will Google get bored with it and neglect it, like they have with Angular? I have a guess.

judge2020• 6 years ago

https://flutter.dev/desktop

Still in Alpha.

cercatrova2• 6 years ago

Much faster as it compiles to a native binary, but still in alpha.

cocoa19• 6 years ago

Perfectly valid decision.

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.

intrepidhero• 6 years ago

Qt is very doable from Python these days. I've found it quite nice to work with. I would guess you still have a bigger pool of engineers to draw from with web tech though.

Spooks• 6 years ago

I started working with C++ several months ago, mostly due to curiosity.

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.

_odey11• 6 years ago

No matter how much I hate the bloat, and no matter how much I don't like JavaScript as and language due to it's behaviour around type coercion, I can't help it but to agree with everything in this article. Reusing the frontend skills I learned throughout the years to build desktop apps when needed, instead of having to learn an OS toolkit (and in the case of linux, multiple desktop environments, neve mind Wayland vs X) is the difference between shipping something and not shipping at all.

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.

zaro• 6 years ago

You should check Gnome Disks, it alrady has bencmarking builtin and is installed by default on Gnome environments.

_odey11• 6 years ago

Thanks for pointing this out to me, I did not know about it, is it new? I remember a few years ago when I would start "Disks" in Ubuntu it would open the "baobab" tool. Might be just an unfortunate naming colision...

_ea1k• 6 years ago

I just tried it and got some crazy high numbers for a VM image mounted on an external USB drive. Something seems off about how it is assessing caching.

stefan_2• 6 years ago

    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.

_odey11• 6 years ago

No, I do want to learn things, but the choice is simple, you either:

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.

AnIdiotOnTheNet3• 6 years ago

Werid. You hate the language and the bloat, but you still would choose Electron over something like Lazarus?

dave84• 6 years ago

Reusing to the frontend skills I learned throughout the years

Not weird at all.

_odey11• 6 years ago

Lazarus meaning the Delphi / Pascal IDE? I haven't touched any Pascal code since the first year of highschool over a dousen years ago :). Forgot it even existed.

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.

cogman102• 6 years ago

In a heartbeat.

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.

jsdavid• 6 years ago

The tweet mentioned in the article, saying:

Electron app memory usage: 150MB

Native app memory usage: 0 MB (because you never ship it)

really hit home for me.

_odey11• 6 years ago

I used to disagree with this view, since I was "raised" in school to think that raw performance is the only worthy attribute of a computer program, regardless of purpose. Then, when I started working on real products instead of homework I learned how wrong that way of thinking was.

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.

GirkovArpa2• 6 years ago

Sciter.JS is going to change that: https://github.com/c-smile/sciter-js-sdk

I cloned a 165mb Electron app in Sciter, and it was only 6mb:

https://github.com/GirkovArpa/clipper-sciter

jcelerier3• 6 years ago

Without Electron it would take me months of intense dedicated time, which I would rather spend on something else.

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"

https://github.com/jcelerier/fio-ui

_odey11• 6 years ago

From your GH profile I see you're quite familiar with C++ development. Personally I'm not, at all, I'm barely comfortable enough with installing Emacs from source. Considering the time I need to dedicate to my dayjob and the limited amount I have on the weekends I'm not exagerating when saying it would take me months to reach and level where I would be comfortable developing something in Qt. Not impossible, of course, just time consuming.

adzm• 6 years ago

It's not only that, it is also leveraging the very rich ecosystem built on html and js

serial_dev• 6 years ago

It might be 15 minutes for you, because you already know and used Qt.

I can almost guarantee you that an average frontend developer (web) would not be able to do that.

joshmanders• 6 years ago

c'mon, getting the very basics of it in Qt took the better part of 15 minutes and less than 100loc

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.

maxk42• 6 years ago

This code genuinely looks simple. Can you recommend a good resource for getting started with Qt? Also, is this just for desktop development or is there a relatively straightforward to make it cross-platform compatible? If I can build one Qt app and export it to iOS and Android then I'd much rather do that than Electron.

pwdisswordfish43• 6 years ago

I would never attempt to implement something like this in Qt or GTK

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.

jancsika2• 6 years ago

In fact, you can write GTK apps in JS.

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

nvrspyx2• 6 years ago

GTK is barely cross-platform. It's an utter pain to get anything usable in either Windows or macOS. It also doesn't look native on either platform, especially Windows though, because of the default Aidwata theme.

fulafel• 6 years ago

People like to complain about JS but the fact is that it's been completely optional on the frontend to write in it for 8-10 years, certainly the whole time Electron has been around. JS is a fine compile target though.

wayneftw• 6 years ago

I wish more companies would choose Electron instead of native apps so they could iterate faster on all platforms.

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.

Ygg2• 6 years ago

I have desktop and I hate Electron apps with a passion.

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.

altdatathrow• 6 years ago

Discord somehow manages to run quite efficiently in contrast to nearly every other Electron app out there.

jfengel• 6 years ago

For me the big win is that it feels familiar to users. It's not a native app, but it looks like their native browser.

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.

chungus_khan• 6 years ago

Users don't recognize Swing, but I wouldn't say it didn't succeed. There are an unbelievable number of little utilities, obscure programs, and company-internal tools written in Swing that people use every day and don't really think about. Swing didn't catch on much for big name software, but it still manages to be everywhere, and is much of the reason a lot of intermediate users reflexively install Java on new systems when they get them.

theobeers• 6 years ago

Exactly: a world full of Chromium natives. I'm torn between accepting this while waiting for the next paradigm shift, and resisting it out of a sense that someone has to.

speedgoose• 6 years ago

I think you are spot on about the uncanny valley of non native apps that try to look native. Java Swing apps or Qt apps look and feel bad on Mac or Windows. It's a bit better on GNU/Linux but a GTK app in a KDE environment or a Qt app in a Gnome environment will feel a bit wrong. Meanwhile an Electron app will look very normal and modern.

IggleSniggle• 6 years ago

This is how I feel about Flutter today. Seems like a cool paradigm on the face of it, but they never feel native nor do they feel like a WebView or what-have-you. They're in their own uncanny valley.

blackoil• 6 years ago

I understand performance concerns, but not "native" app. Most popular thing on desktop used by people are Facebook, Youtube, Instagram, Gmail and Google Calendar, Reddit, Netflix, Wikipedia.

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.

nxc18• 6 years ago

I’m working on some Windows apps currently in the native-ish WPF and UWP frameworks. Being somewhat detail-oriented, I’ve noticed a few major areas where Electron apps tend to deviate from native:

* 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.

sroussey• 6 years ago

The button hover and the text selection issues are one line CSS changes.

nvrspyx2• 6 years ago

Hopefully WinUI3 will help with a lot of Windows native UI toolkits' shortcomings. I haven't looked much into it myself though.

thrower123• 6 years ago

I miss the apps of the XP era, where people actually experimented and did some novel things with UI. Everything is very boring, and there's nothing like a WinAmp skin in sight.

jamifsud• 6 years ago

We just recently launched our desktop app on Electron for very similar reasons.

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.

VengefulCynic• 6 years ago

To my mind, it's not a huge market, but purists definitely exist. Do they justify the cost? It seems worth analyzing, but it's definitely a big cost if you want to stay cross-platform but use native tools.

yesimahuman• 6 years ago

This is the entire reason Electron is so popular, and generally users love these apps and don't care about whether apps use native OS controls. This is the same approach Capacitor takes for mobile. Being able to use your existing frontend skills and access the existing web dev market is really compelling.

viktorcode• 6 years ago

Users love functionality provided by those apps, not the fact they were made with Electron for business reason.

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.

OJFord2• 6 years ago

People love Discord. On a desktop they have no choice but to use its Electron client

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.

snazz• 6 years ago

Linux users are also super happy they're not left out of using Electron apps. If Discord were to write a native app, they might only include Windows and macOS support—or even omit Mac support altogether.

kevsim2• 6 years ago

We're in the same boat. One of our main driving factors is that in the issue tracker we're building [0], we use an editor (SlateJS) that has its own format for how documents are represented, and our issues are pretty rich and complex. To try and reproduce an editor that adhered to the same schema across multiple platforms is simply more work than we can take on as a small startup.

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

fnord123• 6 years ago

Looks awesome. Jira's shit performance is a real killer.

kevsim2• 6 years ago

Thanks! We fully agree. For us, with whatever features we decide to add, keeping it as snappy as possible and keeping it possible to do literally everything with the keyboard is a must.

We do every once in a while end up with really embarrassing bugs though since we rarely touch the mouse ourselves.

yboris• 6 years ago

Shameless self-promotion: I built Video Hub App using Electron and Angular. It allowed me with virtually 0 new learning build a cross-platform app in a few months.

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/

MR4D• 6 years ago

Your filmstrip view looks pretty cool. Nice work!

geodel• 6 years ago

Well I guess good for you. Moreover in my case electron used 0MB of memory because I did not use it. So it is pretty good.

ravedave5• 6 years ago

There's also the benefits of things like this - You want an app that supports the new Apple silicon? tadaaa most of the work's done for you already - https://www.electronjs.org/blog/electron-11-0

bestorworse• 6 years ago

This resumes the desktop app development drama.

I hope Flutter will solve that

occz• 6 years ago

If I had to bet on anything cross-platform - a stretch, for sure - it'd have to be Compose. Or SwiftUI, if it comes to Windows/Linux (unlikely)

makecheck• 6 years ago

The more I look at “modern” web sites and apps, the more I think that there should be a way to force software providers to offer discounts if their products are, essentially, bloated. (Prior to getting the software, you cannot tell how it is going to be implemented.)

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.

MattGaiser• 6 years ago

The cost to them is in you choosing not to use it if you do not view the resource use as a good deal.

sabellito• 6 years ago

I'd like to understand your point of view a little better.

My understanding is that you could not use these apps. So how could one feel entitled to discounts based on implementation quality?

CJefferson• 6 years ago

If you don't want it, you don't have to use it.

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.

knowingathing2• 6 years ago

I hadn't thought of many of these things, thanks for raising them. The flip side of not using Electron.js and going for native development (which would help solve these points) would mean I never would have shipped Loaf. That's the issue I was facing.

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 :)

gigel82• 6 years ago

I think React Native is also a contender, now with Windows and macOS support coming online. Yes, the "UI Framework" story still needs some work and it's obviously nowhere near the web, but otherwise it's a nice middle choice where you get a lot of the perf benefits and "native UX" look and feel, while still being able to leverage a lot of webdev skills like JavaScript and Flex.

sktguha• 6 years ago

Yes I am curious to see how it evolves

gumby• 6 years ago

Given how nonexistent the development documentation is (not poor, nonexistent) it feels like Apple doesn’t even want you to write native apps.

Obviously they do, but it seems like explaining things to developers should be table stakes.

cercatrova2• 6 years ago

The pervasiveness of Electron without its flaws is why I'm really excited for Flutter desktop. It really does feel like write once, run everywhere. It is much faster and has minimal RAM usage because its compiled to a native binary, plus I get mobile and web apps out of it too.

xg153• 6 years ago

To add some criticism from a user's perspective: I hate electron apps as a user. Not because of the bloat - it's annoying but doesn't cause problems in practice - but because of the UX. native GUIs all have some visual consistency and design rules and metaphors you can orient yourself by.

Browser-based apps have no common UI rules at all, which makes them significantly more confusing to use.

Why I chose Electron.js for my side business

Related Stories