I'm about to try to make a simple electron app in a couple of hours. Never done it before. Stay tuned.
I'm not saying what the app is for because some "helpful" person will tell me it already exists. It's super simple though. Only reason for electron is because I want it to be available as a desktop app.
So my goal with this project was to see if I could glue something together quickly by reading documentation and tutorials. I've got the basic building blocks. But it turns out there are some non-trivial elements that require either more research or grabbing existing libraries.
I'll tell you what it's about now. I want a little app that sits in my menu bar and allows me to upload large files to dropbox. Again, yes, I'm almost certain this thing already exists. But I want to build it myself because I'm a huge nerd like that.
I have 2 dropbox accounts. One personal and one for work. The desktop app will only let me login to one account at a time. So when I need to upload things to my personal dropbox, I use the web. That's fine until I run into limits on large file sizes.
The dropbox docs say the limit on files through the basic file upload api is 150MB. Anything above that and they recommend you use a different api for large uploads. dropbox.github.io/dropbox-sdk-js…
So conceptually, this thing is simple. All the pieces are available. An electron interface for the desktop. Drag & Drop for files. File handling in node.js. And the dropbox file upload API. Simple right?! 🙄🙄🙄
I always tell myself to work on the easy parts first to get a framework set up. Then I can focus in on the harder parts later. Then I proceed to do the exact opposite. I dove right into the chunked uploads stuff. Time to regroup.
Here's my new checklist:
✅ Dropbox js sdk working
⬜️ Electron framework setup
⬜️ Simple area that accepts drag & drop
⬜️ Fill in the upload piece
How long will this take? I have approximately 2-3 hours before it's Daddy time again.
✅ Dropbox js sdk working
⬜️ Electron framework setup
⬜️ Simple area that accepts drag & drop
⬜️ Fill in the upload piece
How long will this take? I have approximately 2-3 hours before it's Daddy time again.
More than anything else, this is a test of the quality of various documentation. So far I've had to dive into the Dropbox API, electron set up tutorials, the web drag & drop api and node.js docs to remember how the filesystem api work.
I'm so easily distracted. This is why I side eye y'all folks who like to talk about working from home. I would be a terrible remote employee.
Okay. Second problem installing electron from npm works fine. But when I require('electron') in my script I get a string, not a module. Very annoying. Electron has officially failed the "just works" test.
Ugh. Really? electronjs.org/docs/faq#requi…
Okay. Back on track. I have a window that pops up with an ugly blue background and says "Try to upload something". For the record install electron globally (npm install -g electron), then use the electron command instead of the node command.
✅ Dropbox js sdk working
✅ Electron framework setup
✅ Simple area that accepts drag & drop
⬜️ Fill in the upload piece
⬜️ Integrate the app into the mac menubar?
* cracks knuckles *
✅ Electron framework setup
✅ Simple area that accepts drag & drop
⬜️ Fill in the upload piece
⬜️ Integrate the app into the mac menubar?
* cracks knuckles *
Well. This is officially a headache. The dropbox api is finicky. When I try to change the filename that gets uploaded, it fails. Apparently it checks filenames against some internal regex? Probably have to upload and then change the filename separately. Another unhelpful detour.
You mean not everybody uses macs? 🤓
Mostly I'm still getting distracted. Probing at the quirks in the dropbox API instead of doing my actual project. I don't know about y'all, but this is a common pitfall for me on side projects.
Okay. I'm almost out of time. I'm blocked on some of the electron stuff. Specifically, I need to figure out passing messages between the html page and the main node process. The tutorials don't work out of the box.
The example code is quite magical. Expects you to require modules using node syntax in the web page code. But doesn't tell how that is supposed to work exactly. electronjs.org/docs/api/ipc-m…
Oh shit. So it is actually magical. When your html file is loaded by electron, you can require('electron') and it just works. I understand the desire for ease of use. But I don't like this mixing of paradigms. It's gonna confuse the hell out of people.
Meh. I didn't get very far. I gotta say though. Being able to assume all the most modern features of node, es6, and a chrome browser is really nice. github.com/polotek/dropbo…
So I may not get a chance to work on my side project from yesterday again soon. But I’ve been doing some research on electron in order to have more of a plan when I come back to it.
There’s a growing ecosystem around developing apps with electron. I’m fairly impressed by the resources that are available. github.com/electron-userl…
It feels like most of the effort is being put into helping people with packaging and distribution. That makes sense. Cross platform portability is a core value prop of electron. So the community has to make sure that doesn’t feel like a barrier.
I also have questions about the architecture of an electron app. I don’t think I developed a strong mental model of how it operates. Lots of magic. Lots of “it works like this because reasons”. That’s to be expected as well. But it’s a recipe for confusion and headaches.
I admit that I like the development story a lot. I’ve always been a fan of the web as an application platform. I like building in html, css, and JavaScript. I was ready to run into the “leaky abstractions” in electron, but it didn’t happen. If you have web skills, you’re good.
