Cortex Tech Stack
When we started the last (and current!) iteration of Cortex, we already had defined some goals we wanted to achieve from earlier versions of the app :
- build a cross-platform app;
- build small, reusable and pluggable components;
- have a strong process for designing and implementing components;
- have a quick, iterative workflow.
These where important goals for us, as we are big fans of continuous improvements method and we want to make our workflow better on every project we work on, and Cortex was no exception. Spoiler alert : we reached all of them. We did this by making strong, early decisions about our tech stack.
State of the art
When it comes to desktop programming, you have plenty of choice regarding the language you can use to build your app :
- You can use C# to target Windows or Objective C to target macOS. Eventually you will end up building 2 different apps for each platform; and that is not something we want here.
- You can use plain C, C++ or even Python (which is one of my favorite and one I used to work with on a daily basis), all of them are good choices to build a cross-platform desktop app; but you will be fairly limited when it comes to designing your screens, menus, animations, etc.
We wanted to do more and not having to rely on platform-dependent app components and give Cécile, our designer, full control over the app design decisions. Plus we didn’t want to spend more time learning new, platform specific or low-level languages.
Web technologies
Another option for building modern, cross-platform apps is Electron. Electron is a framework used by many business out there (Hello Discord !*) to make native desktop apps with web technologies. To put it (very) simply, Electron is a Chromium browser packaged with just your web-app and a bunch of native APIs to enable native apps features, such as supporting dark mode, adding tray icon, displaying notifications, and so on.
Using it allows us to design our application parts with CSS, HTML and JS; 3 easy to use languages, known by many developers — and designers ! Cécile and I are able to quickly iterate over a small part of the app, going from idea to code in no time.
There are of course some drawbacks. For instance, your app size can become quickly huge (Electron itself is quite big) and it grows fast when you add dependencies. But this is unmatched with all the ease it give us on many sides.
Frameworks and Libraries
We are both fans of strong standards when it come to product development. I choose to use VueJS as our main Javascript framework to build reusable components across our application(s). We started by coding tiny parts and then assembled them to create an entire app ! VueJS is an awesome framework and has a vibrant community online; I’ll talk about it in a future blog post. We used it with TailwindCSS, another great framework with reusability in mind.
Cécile spent some time building a detailed Design System (again, we will cover this one in a separate blog post), highlighting every design aspect of Cortex, from fonts to panels size to colors to micro-interactions.
Wrapping it up
We use a modern, web-oriented stack to build our app and it perfectly fits all of our needs. You can find our full software stack on our Stackshare page. Feel free to comment anything !
See you next time !
* Discord has a terrific Tech blog; this is a must-read. If someone over at Discord read this — you guys are a great source of inspiration in our design and development choices. Keep up the good work.
