logo

drewdevault.com

[mirror] blog and personal website of Drew DeVault git clone https://hacktivis.me/git/mirror/drewdevault.com.git

Electron-considered-harmful.md (5310B)


  1. ---
  2. date: 2016-11-24
  3. # vim: set tw=80 :
  4. layout: post
  5. title: Electron considered harmful
  6. tags: [electron, javascript]
  7. ---
  8. Yeah, I know that "considered harmful" essays are allegedly [considered
  9. harmful](http://meyerweb.com/eric/comment/chech.html). If it surprises you that
  10. I'm writing one, though, you must be a new reader. Welcome! Let's get started.
  11. If you're unfamiliar with Electron, it's some hot new tech that lets you make
  12. desktop applications with HTML+CSS+JavaScript. It's basically a chromeless web
  13. browser with a Node.js backend and a Chromium-based frontend. What follows is
  14. the rant of a pissed off Unix hacker, you've been warned.
  15. As software engineers we have a responsibility to pick the *right* tools for the
  16. job. In fact, that's the *most important* choice we have to make when we start a
  17. project. When you choose Electron you get:
  18. * An entire copy of Chromium you'll be shipping with your app
  19. * An interface that looks and feels nothing like the rest of the user's OS
  20. * One of the slowest, least memory efficient, and most inelegant GUI application
  21. platforms out there (remember, we *tolerate* frontend web development because
  22. we have no choice, not because it is by any means *good*)
  23. Let's go over some case studies.
  24. **[lossless-cut](https://github.com/mifi/lossless-cut)** is an Electron app that
  25. gives you a graphical UI for *two ffmpeg flags*. Seriously, the flags in
  26. question are -ss and -t. No really, that's *[literally all it
  27. does](https://github.com/mifi/lossless-cut/blob/master/src/ffmpeg.js#L46)*. It
  28. doesn't even use ffmpeg to decode the video preview in the app, it's limited to
  29. the codecs chromium supports. It also ships its own ffmpeg, so it has the
  30. industry standard video decoding tool *right there* and doesn't use it to render
  31. video. For the price of 200 extra MiB of disk space and an entire Chromium process
  32. in RAM and on your CPU, you get a less capable GUI that saves you from having to
  33. type the -ss and -t flags yourself.
  34. **[1Clipboard](http://1clipboard.io/)** is a clipboard manager. In Electron. A
  35. *clipboard manager*. In order to show you *a list of things you've copied*, it
  36. uses *an entire bundled copy of Chromium*. Also note that despite the promises
  37. of Electron making cross platform development easy, it doesn't support Linux.
  38. **[Collectie](https://getcollectie.com/)** is a... fancy bookmark manager, I
  39. guess? Another one that fails to get the cross platform value add from Electron,
  40. this only supports OS X (or is it macOS). For only $10 bucks you get to organize
  41. your shit into folders. Or you could just open the Finder for free and get a
  42. native UX to boot.
  43. This is a [terminal](https://hyper.is/) written with Electron. On the landing
  44. page they say "# A terminal emulator 100% based on JavaScript, HTML, and CSS"
  45. like they're proud of it. They've taken one of the most lightweight and
  46. essential tools on your computer and bloated it by orders of magnitude. Why the
  47. fuck would you want to render Google in your god damn terminal emulator? Bonus:
  48. also not cross platform.
  49. This is not to mention the dozens of companies that have taken their websites
  50. and crammed them into a shitty electron app and called it their desktop app.
  51. Come on guys!
  52. By the way, if you're the guy who's going to leave a comment about how this blog
  53. post introduced you to a bunch of interesting apps you're going to install now,
  54. I hate you.
  55. ## Electron enables lazy developers to write garbage
  56. Let me be clear about this: JavaScript sucks. It's not the worst, but it's also
  57. not by any means good. ES6 is a really great step forward and I'm thrilled about
  58. how much easier it's going to be to write JavaScript, but it's still JavaScript
  59. underneath the syntactic sugar. We use it because we have no choice (people who
  60. know more than just JavaScript know this). The object model is whack and the
  61. loose typing is whack and the DOM is super whack.
  62. When Node.js happened, a bunch of developers who never bothered to learn more
  63. than JavaScript for their frontend work suddenly could write their crappy code
  64. on the backend, too. Now this is happening to desktop applications. The reason
  65. people choose Electron is because they are *too lazy* to learn the right tools
  66. for the job. This is the *worst* quality a developer can have. You're an
  67. engineer, for the love of God! Fucking act like one! Do they build square
  68. airplanes so they don't have to learn about aerodynamics, then just throw on an
  69. extra ten engines to make up for it? NO!
  70. For the love of God, learn something else. Learn how to use GTK or Qt. Maybe Xwt
  71. is more up your alley. How about GNOME's Vala thing? *Learn another programming
  72. language*. Learn Python or C/C++ or C#. Fun fact: it'll make your JavaScript
  73. better, and once you have it in your toolbox you can make more educated
  74. decisions on the appropriate tool to use when you face your next problem. Hint:
  75. it's not Electron.
  76. ## Some Electron apps don't suck
  77. For some use-cases Electron is a reasonable choice.
  78. * [Visual Studio Code](https://code.visualstudio.com/), because it's a full
  79. blown IDE with a debugger and plugins and more. It's already gonna be
  80. bloated.
  81. * [Soundnode](http://www.soundnodeapp.com/), because it's not like any other
  82. music service's app obeys your OS's UI conventions
  83. Uh, that's it. That's the entire list.