The Architecture of HomeGenie (Ep. 3) - Building the 'UI of Things'

by Gene — posted on 25 October 2022

Welcome back to the dev diary! In our previous episodes, we explored the early days of HomeGenie, the battles with HTTP bottlenecks, and how dividing the monolithic core into cooperative libraries brought harmony to the backend.

But if you look at the HomeGenie ecosystem today (late 2022), you'll notice that the landscape has changed drastically. Sometimes, to ensure a project can continue to grow organically and fluidly, you have to acknowledge when a technology has served its purpose and gracefully let it go.

Today, we are talking about The Great Rewrite.

A Fond Farewell to Mono

If you remember Episode 1, the Mono runtime was our absolute hero. It allowed HomeGenie's C# backend to run on Linux and early ARM boards like the Raspberry Pi when Microsoft's ecosystem was still a walled garden.

But as the years passed, the .NET ecosystem underwent a massive, open-source revolution. .NET Core (and eventually .NET 6) emerged as a truly universal, highly performant, cross-platform framework. Sticking with Mono started to feel like wearing a heavy coat in the spring.

commit 85bea6a4acafd469220ae6b8d5f6be0532e40d87
Date:   Sat Jun 27 21:10:18 2020 +0200

    Converted to NetCore 3.0 (#417)

commit c301b901f66fa4acbf3a0ec023011188b168d155
Date:   Mon Dec 19 13:23:50 2022 +0100

    Upgraded to .NET 6

Migrating the core wasn't just a syntax update; it was a breath of fresh air. It reduced memory overhead, significantly improved execution speed, and gave the backend a modern foundation ready for the next decade of IoT challenges.

Enter YoT: The "UI of Things"

While the backend was getting a new engine, the frontend was gasping for air.

Since the beginning, HomeGenie's UI had been powered by jQuery Mobile. It was fantastic for quickly prototyping a touch-friendly interface back in 2012. However, as users started adding dozens of devices, complex automation programs, and custom scripts, the DOM manipulation approach of jQuery became incredibly hard to maintain. The UI was becoming a bottleneck for creativity.

It was time for a structural leap. I decided to rewrite the entire user interface from scratch using Angular.

commit 2f4251fab4a5c4688a8cebb598bd188ff536479c
Date:   Fri Apr 2 10:55:37 2021 +0200

    Migrating homegenie-ui-app to own repository (YOT)

I named this new project YoT (UI of Things). Moving to Angular (recently upgraded to v14) brought a structured, component-based architecture to the app. Suddenly, features that were a nightmare to implement in jQuery Mobile—like a drag-and-drop dashboard layout manager, a visual setup wizard, and an integrated visual coding editor based on Blockly—became not just possible, but elegant to build.

The Perfect Synergy: Angular + zuix.js

You might be wondering: "Wait, what happened to zuix.js, the tiny component library you wrote in 5 days?"

This is where the concept of a "cooperative ecosystem" truly shines. Angular is fantastic for the heavy lifting: managing application state, routing, complex settings dialogs, and the visual program editor. But Angular requires a compilation step.

If I forced users to use Angular to create their own custom widgets, I would be destroying the very philosophy of HomeGenie: immediate, accessible, and frictionless customization.

So, I kept zuix.js exactly where it belongs.

In YoT, Angular acts as the solid, robust canvas. But the actual device widgets on your dashboard? They are still pure, dynamically loaded zuix.js components (HTML/CSS/JS). This means users can still write a custom widget directly from the HomeGenie web editor and see it instantly appear on the Angular dashboard, without running a single build tool.

It’s the best of both worlds: enterprise-grade application structure cooperating seamlessly with lightweight, runtime-editable web components.

💡 Developer Takeaway

Rewriting an application from scratch is often considered a "developer anti-pattern," a trap that wastes time. But there is a huge difference between rewriting because you are bored, and rewriting because the foundation can no longer support your vision.

If your architecture starts fighting against you instead of cooperating with you, don't be afraid to rebuild it. Just make sure you preserve the philosophies (like user freedom and modularity) that made the project special in the first place.

The groundwork is now laid. The backend is fast, the frontend is modern. We are finally ready to push the boundaries of what a smart home can actually think. But we'll talk about that in the next episode.

Time to get back to coding =)