GitHub
Black Lives Matter.   Support the Equal Justice Initiative.

Clips under the hood

Saturday, February 20th 2021

azure06
Gabriele Sato
azure06

In a previous article, we introduced Clips. Let's recap a bit so we're ready to dive in here.

Background

Clips is a clipboard manager... I know, the word "clipboard" doesn't really tell us much about the features, or what the app is designed for. In reality, what it's doing is extremely simple: every time you copy a text or a picture it will store what you have copied inside a database.

That means every time you need your item back you can find it inside the clipboard.

Now that you know what our app is doing, let's get started!

Electron

Clips is built using Electron, a framework for creating native applications with web technologies. Thanks to it focusing on the core of the application couldn't be easier:

  • No need to care about the target Operating System
  • The huge javascript ecosystem allows not to reinvent the wheel. (Especially during the UI/UX development process)

Because Electron is based on Chromium, it shares the same characteristic of browsers. It requires programmers to deal with 2 different processes: the renderer process and the main process. The renderer process is where the user interacts with the page and performs some basic actions. However, whenever the user needs to access the system resources, we need to write a "bridge" to communicate with the main process.

You're probably wondering why we have 2 layers. Electron, as I already mentioned, is literally a browser, and any code written in Html/Javascript can be executed from the renderer process. You can even link a page hosted somewhere on the internet, and with no surprise, it will be correctly rendered/executed.

This is why Chromium's renderer processes are executed within a sandboxed process that has limited access to the user's computer.

Continues...