Building Formula: changing the core and moving forward

TL;DL: Having a 5 years old code in a platform that was seeing light for the first time to a new coder who doesn’t knew best practices had me to re-code all of the app core to incorporate two new functions: a more stable tab control and Monaco (you may know it as vscode editor) as Formula official editor.

The problem

When creating Formula I wanted to make the must iconic editor for Windows 10, back then, Microsoft Edge Legacy was the showcase app for Windows, with all its functionalities and APIs inserted. So, I had made the design close to what Microsoft Edge looked like back then, with tabs! Any app on Windows 10 (including mobile) had tabs before, I was wondering why until I saw that had no API to create such a thing. I needed to do by my hands, so the concept was to make a ListView with the appearance of a TabControl that would change the content located in the main part of the application.

Too much code and too many imperfections even thought that I could implement many features like, drag & drop and like context menus. It wasn’t a tab control component; it was a workaround. Wanna go to a more complex scenario? I didn’t know anything about dependency injection back then. Can you imagine the code? A mess!

But it was working right? I have a production app using it with thousands of downloads and many good stars. Why to change and spend hours of development on this? Three reasons.

First, code quality: knowing what the code was doing, being able to create tests, it makes more reliable. Nothing to add here. We grow up, we learn new stuff.

Second, TabView component was released: Microsoft has released it, as part of WinUI. So, all the bugs and the features that I wanted to make, was now officially supported by them. This means that I can still contribute – it’s open source – but now many people are improving it with the best practices.

Third, and my favorite, easier to maintain: Not using tests or dependency injection makes the code hard to read and write, more sensible to failure. With this change the work that I had to maintain and push a new update was reduced.

How was the process?

First of all, I needed to validate the idea, to bring not only the TabView Component but the editor that I was using back then (code mirror), this way I would be sure it can be done and the size of the change, but how? By creating a prove of concept (POC). A simple app that would have only tabs and a hello world with the editor.

Easier than I was thinking it would be, especially because of some help I got from the makers of the TabView Component. BUT…. It can’t be that easy right? One job is to create the POC, the other one is to implement it, and a new challenge had faced my quest: incompatible components. That’s right! Besides TabView another big part of Formula was using a Hamburguer Menu from Windows Community Toolkit, and of course, this function was deprecated by the version TabView was release, so I couldn’t get both at the same time.

Disclaimer: by the time I was doing the prove of concept, the TabView that I was using was the Windows Community Toolkit one, but when they shared that this function would also be deprecated on the next version – yet to be released, I had made the migration to the WinUI.

The POC wouldn’t be complete if it were only a Sample of TabView, but to recreate what Formula does. With the way it’s now behaving, it wouldn’t be possible (on best practices scenarios) to use one big frame on the master page to change the content when selectin a tab, but to create a frame for every tab. A frame including the code-mirror editor. And now we touched in another epic feature: the editor.

Code-mirror is easier to develop, less problems in my opinion, but what the marketing is using, what people are getting used to (and with Microsoft pushing its UX core to the new Microsoft Edge Dev Tools), and a few feedbacks about: let’s ship to monaco! Monaco is the editor that vscode uses, you can see a demo here.

I would need to recreate all code-mirror to use in this new tab-scenario and with my hands already in deck and no Agile process at that time, why not migrate to Monaco and validate that in the process? So, I did it.

After creating a POC, seeing it work and the work that I would need to accomplish to update all of the code, the decision was kinda of easy to not create a pull request with the new tab and new editor but to use that branch as the develop branch until all functions and all code from the ‘production’ code was implemented into the POC.

After having it all set on a new project, some branch polices, pipelines of build and release and agile process was implemented on this product. But that’s another post.

The next step

After implementing Monaco, TabView and Dependency Injection into a UWP app, the goal now is to redesign it for a more conceptual look. Below you can see what the app looks like a week ago when this work was finished.

Do you want to see all of this in progress? Building, reshaping and redesign this app? Come join the Formula beta testers, it is free! We have a Telegram group to chat about new features and bugs, and you will have access to the beta app on the store.

More to share soon, stay tuned!

Now, go do something good.