How AI changed the way I build software, and why I ended up building an open source shell for Angular
Up front: this is my own project, so I'm not exactly neutral here ;-) Where I'm coming from I work completely differently than I did two or three years ago. For most of my career I wanted to write pretty much every line myself, and I was a bit proud of that. That has changed a lot. Instead of programming I now mostly write specifications and review what the AI generates. On the one hand that's…
For decades, the author has been dedicated to crafting code from scratch, a passion that has given way to a new approach. Rather than spending countless hours writing every line themselves, they now dedicate their time to outlining specifications and assessing the output generated by artificial intelligence (AI). This shift has resulted in enhanced efficiency, enabling the rapid transformation of fresh concepts into functional software.
However, there is a risk of falling into the same pitfalls as before when relying on AI-generated code. The key to circumventing this issue arises from recognizing that every time the author initiates a new project, they find themselves repeatedly explaining the same concepts to the AI. In response to this, the author devised a solution in the form of an open-source shell tailored for Angular.
Known as LoomWeaver, this workbench shell serves as a foundational framework for Angular applications, rather than providing a component library. It comprises a frame that includes a rail on the left, sidebars, a top bar, a status bar, and tabs and panes that can be manipulated and arranged. This frame serves as the cornerstone that most workbench-style products construct individually, albeit with slight variations.
LoomWeaver offers this frame, allowing users to customize their domain-specific elements through plugins. The core of LoomWeaver remains devoid of domain logic, ensuring that even user interfaces operate through the same plugin contract applicable to third-party implementations. This design choice facilitates seamless integration of AI-generated code within the framework.
Upon installation, LoomWeaver automatically generates a set of files, preserving the user's `README.md`. The framework incorporates essential features such as tab groups with drag-to-split panes, a command palette (activated by `⌘K`), a quick open feature (`⌘P`) with preview tabs and pinning, named workspaces that retain individual arrangements, theming capabilities using Tailwind or Bootstrap, and WCAG 2.1 AA accessibility compliance.
Additionally, LoomWeaver supports Internationalized Resource Identifiers (i18n) through namespaced composition, allowing plugins to coexist without key conflicts. The framework ensures WCAG 2.1 AA accessibility compliance, ensuring that the platform meets the necessary accessibility standards. Security is also a priority, with the host meeting the requirements of the plugins, enabling users to leverage WCAG 2.1 AA accessibility compliance for their own applications.
LoomWeaver facilitates the installation of a Progressive Web App (PWA) with an update flow that functions seamlessly. The application exhibits live state synchronization across multiple windows and tabs, enabling autosave, discard, or cancel functionality when editing is complete. Access control is managed through authentication-aware Chrome contributions, enabling users to declare required access levels and the shell reacts accordingly.
The plugin system incorporates three trust levels, ranging from in-process code to sandboxed iframes and plugins installed from a remote catalog. To accommodate various agent types, the AG-UI adapter allows any agent adhering to the standard to execute commands. This framework eliminates the need for a separate server, as settings, session, and secrets are implemented as ports against the user's existing backend infrastructure.
To facilitate rapid deployment, the setup process can be completed in just five minutes, starting from a fresh Angular app or an existing one. This streamlined setup involves installing specific npm packages, generating a basic Angular project, integrating LoomWeaver and plugin SDKs, creating a first plugin, and starting the development server.
With LoomWeaver as the foundation, the author's experience with software development has undergone a significant transformation, allowing them to focus on higher-level design and domain-specific features while leveraging AI-generated code efficiently.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
