This content originally appeared on DEV Community and was authored by Ayan S
? Hey everyone!
Intro
I had been working on this app for quite a while with the aim of it being a primarily Windows only software. However, after it's release I got a lot of requests asking if I have plans for a Mac version as well. At the time of the release I didn't, however, now the app is available on both platforms!
So, right after the release I made it my priority to listen to what everyone wanted and hoped to build a Mac version within a few weeks, but in the end it surprisingly turned out to take less than even a single week.
It's built using electron, so the was a good choice from the start and it also meant that I had the resources available to build it for other platforms as well. I know there's a lot of people who don't prefer electron, but with the power and speed it provides, especially to a solo dev, it's quite incredible!
About Slate
As for what the app is about, Slate is an app that let's you have unlimited opacity-controlled floating windows that stay-on-top, giving you space to do even more on your screen.
So as you can see, there were a lot of things to consider when making it
available on Mac. And fortunately enough, electron handles most of it out of the box! Though there were still some changes that needed to be done to make it work on Mac.
The way Mac and Windows handle apps are quite different, and I learned that Mac handles apps more like documents, from the way the apps are installed to how they're used.
Platform specific code in a single codebase
Another big difference was that on Mac when you close an app, it doesn't really close it like how it does on Windows, rather it just docks it. Unlike on Windows, where you just click the "X" to close and app, on Mac you need to specifically quit it using Cmd+Q. And not only does this difference change how users interact with the app, but it also changes the way the code is structured for the platform.
So I had to change the way the app handles closing, quitting and reopening on Mac. But even in doing so, I was able to use a single code base rather than making a completely separate project for Mac.
And that's where another powerful feature of electron comes in. You can have a single codebase and just choose which parts of your code you want to execute on which platforms. So with this single line of code, process.platform, you can check the OS you're on and structure your code accordingly so the features work how they're supposed to on specific OS.
Parent and Child on Mac
The third big one for me was the way how Modals are handled on MacOS. Rather than a separate window that pops-up on Windows, on Mac modals are like sheets and the stick to your app so you can't move them separately. And this was a big one as the app lets you use the Modal window to drag it around, however that was not possible on Mac since the sheets can't be dragged. So to fix this and make sure the clean and consistent UI remains throughout the app, the code that handles the dragging had to be completely re-written to handle how Mac's handle parent and child windows.
Packaging and electron-builder
And finally, after all these changes and other smaller bug fixes (like handling the traffic lights on Mac) were taken care of, it was time to package it! And that happened to be the part that took the most time. Turns out, it's not a good idea to try packaging an app for a platform you're not familiar with. And that's when I came across electron-builder.
Instead of having to manually do everything myself and package it manually from scratch, electron-builder handles most of the heavy lifting for you. You just install it and then specify the OS specific settings for how you'd like to customize it and what platform you're building for and it'll handle the rest. And within a few minutes, you'll get a fully working build for the platform you want!
Lessons Learnt
And that was it! I now had an app that's available on both Mac and Window, then it was just as simple as uploading it and sharing the news with the ones who wanted it on Mac!
A few more things to keep in mind when working with electron, or node, or even JS in general is that, there's a package for everything! If you're doing something from scratch and find that it's quite tedious or you're not getting the results you want, you'll definitely find a package for it! And that's what I should have done earlier as well when packaging the app.
Another thing is that when working with electron-builder, it's better to build it for the OS you're on, as you can't build for Mac from Windows, and there are a lot of bugs when it comes to building for Linux from Windows as well.
Conclusion
Hope you learnt something for my journey and that it was helpful to you in making your next cross-platform app! ?
If you'd like to check out Slate, you can do so here:
slate.madebyayan.com
This content originally appeared on DEV Community and was authored by Ayan S
Ayan S | Sciencx (2021-09-22T19:17:40+00:00) After ProductHunt – A journey of prioritizing feedback and making my app cross-platform within a week of launch (using electron). Retrieved from https://www.scien.cx/2021/09/22/after-producthunt-a-journey-of-prioritizing-feedback-and-making-my-app-cross-platform-within-a-week-of-launch-using-electron/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.