This article is part of a 5 articles series about the publication of an Electron application into the Mac AppStore, Fenêtre.

Fenêtre, fənɛtʁ, lets you better multitask on your mac. It enables a picture-in-picture mode for any website/web-app, image, video or flat file.
You can find the free versionand the paid version on the Mac App-Store.

My name is Yoann Moinet.

I'm a French 🇫🇷 Senior Software Engineer at Datadog since 2019.

Writing JavaScript since 2007, I started programming professionally as an ActionScript (Flash ⚡️) developer in 2011 at Cossette (Montréal based advertising company) and then at Autodesk on 3dsMax in 2013 as a Web Application Engineer, later at Zendesk in Montpellier, starting in 2016.

I wanted to do a post-mortem article on my journey, my stress, my joy and my frustrations conceptualizing, developing, packaging and publishing an Electron application on the Mac AppStore.

It was a lot of pain and tears, but in the end, I really think it was a positive and teaching experience.

So much that I ended up writing too much content for just one article and decided to split it into 5 different articles, to ease the pain of reading that much content coming from a Frenchie blabbering in English, about his shitty experience with programming.

Inspiration

It all started in early 2017 when a colleague of mine showed me Helium . A very nice piece of software that lets you have a floating window in front of everything else.

In the following months, I've used it extensively, listening to talks and watching Netflix while coding (please, don't tell my boss 🙏). But, the more I used it, the more frustrations grew in me. It was missing very niche features I needed. Like a see-through mode, the ability to load local files, a markdown viewer, some code highlighting, more embeds and custom shortcuts...

Proof of concept

In the mean time I also wanted to learn more about the Mac application's ecosystem, packaging, submission and review loop.

So, in June, I started working on a proof of concept to see if I could have a similar feature-set quickly, with a technology I knew well, JavaScript.

Electron to the rescue (👋 haters), since all I wanted, primarily, was to load a website in a window, it was very relevant to use a web-view framework.

A week later, working late hours at home and supporting my very pregnant wife 🤰🏻, I had a first, very rough, PoC, a logo and a minimal feature set. That's all I needed to keep the motivation going for the next 6 months or so (TBD).

Very first prototype of Fenêtre.

This video helped me hook my colleague, Max William Neilson, the biggest Beyonce fan ever, and convinced him to do some designs for Fenêtre. Starting with the logo. Then, the website and the settings screen of the application.

Logo evolution, from my first try on the left to Max's latest, awesomest one.

From there I was able to make a nifty little animation in CSS:

Cost

This was a side project, so I wanted to have something with minimal cost and maintenance possible (because I'm cheap and lazy). That's why I chose to publish it on the Mac AppStore, following the great advice from another colleague.

At first, I wanted to handle both licensing and updating myself, but for the small price of 30% of everything, Apple can handle that for you.

All in all, the application cost me ~115$ (+30% of all sales), which is a fair investment in my opinion... of a cheap person.

• Apple Developer License 99$: this is mandatory if you want to publish your app on the AppStore.
• Domain name ~15$: I had to buy fenêt.re to deliver the website. Some people were having an issue typing the "ê" character, and MANY services still don't support it correctly (more on this later). So I finally bought getfenet.re as well, which brings the final cost to 30$, but it's still an exceptional cost.
• Private git 0$: I'm using GitLab which offers private repository for free as well as other very neat features, like a CI.
• Hosting 0$: Since I wasn't handling licenses or updates I didn't need any infrastructure for these. The only hosting I needed was for the website, which is a simple GitLab Page.

That was all fun and games, wasn't it? Now, come to the dark side and get your hands dirty, come cry with me in the next part of this series, Pain & tears.