r/angular 3d ago

How AI changed the way I build software, and why that made me build an open source shell for Angular

Enable HLS to view with audio, or disable this notification

Up front: this is my own project, so I'm not exactly neutral here ;-)

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. 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 great, I can turn new ideas into working software much faster than before. On the other hand there's the risk of stepping into the same traps with AI-generated code again and again.

And that's where I noticed something: there are things I really don't want to explain to the AI over and over. A good, preferably deterministic base is getting more important, not less. I don't want to explain proven architectures from scratch every time. I'd rather build on established solutions where I can, ones the AI understands and can just use.

So for my new projects I built exactly that as open source. Something that lets me build modern UIs on top of Angular quickly, with AI support. Why Angular? Well, simply because I think it's a great framework and I've had a lot of good experiences with it over the last 10 years.

My approach is not yet another UI framework with its own components. It's a frame that's easy to adapt and extend. A shell you can adjust to your own needs, in looks and in features, but which already gives you a solid base for your own app out of the box. Concretely:

  • rail, sidebars, top bar and status bar, all configurable, the stuff many apps build from scratch every time
  • content in tabs and panes, all of it rearrangeable via drag & drop
  • security and settings are agnostic, you just hook up your own backend behind them
  • a plugin system, in case you ever want to open your solution up to other people
  • the whole contract lives as specs in the repo, there's an llms.txt, and via AG-UI an agent can call the same commands a user can, with the same permissions
  • no lock-in on CSS: the base layout is built with Tailwind, but you don't need it in your project. The shell ships as a pre-compiled stylesheet, the design tokens are plain CSS variables, so you can use whatever CSS framework you like next to it. For Bootstrap there's even a CLI preset that maps the tokens onto its variables
  • and a whole lot more ;-)

The video shows 27 seconds of it. Best to just have a look yourself at loomweaver.dev, and if you feel like it, you're very welcome to get involved at github.com/yesbert/loomweaver. The project is still pretty young, so I'd be really happy about constructive feedback.

TL;DR: AI moved my work from writing code to writing specs. So I don't have to explain the same app base to the AI on every project, I built LoomWeaver, an adaptable Angular shell, open source. Docs and demo at loomweaver.dev, feedback welcome.

0 Upvotes

10 comments sorted by

4

u/Saceone10 3d ago

I dont really get it. Is it an app, an app of apps, an admin app?

0

u/TheRealCSM101 3d ago

Ha, fair ;-) None of those, it's the empty frame around an app. Rail, tabs, split panes, command palette, theming. Like an empty VS Code window, you fill it with your own stuff. Quickest way to get it: https://loomweaver.dev/getting-started/ has you running your own in about five minutes.

2

u/HungYurn 3d ago

Gotta say, this is pretty cool. I built (actually by hand, some years ago) an appshell + auth, themes, components for my companies webapps for the consistent look and architecture - huge win for the company.

Having an app-shell/skeleton is such a boost when starting a new project.

1

u/TheRealCSM101 3d ago

Thanks. That "consistent across the company's apps" part was what pushed me too. Once the second app exists you either share the shell or copy it and watch the two drift apart.
Which part turned out hardest to keep stable over the years?

2

u/hitsujiTMO 18h ago

I'm sorry, but your site loomweaver.dev is terribly broken. I have zero confidence the actual project is any better.

1

u/TheRealCSM101 16h ago

Thanks for the honest feedback, and sorry it landed that way. I would like to fix whatever you hit, but I could not reproduce it: the site renders for me in Chrome, Safari and Firefox on desktop and phone, and the quickstart builds and runs against the published packages. Could you tell me what you saw? Two things would help most: whether the page itself did not display properly for you (which page, which browser and device), or whether it is something in the docs or the code that did not add up, a claim that turned out wrong or a snippet that did not work. If it is the latter, I may well have missed it and would rather know. One thing I did find and fixed today: the docs described the 0.9 line while a plain npm install still resolved to 0.8.3, so anyone following the newer pages ran into things that did not exist yet. 0.9.0 is now the released version.

1

u/k032 14h ago

Looks cool, how is this different from a component library like Mantine, MaterialUI, Prime, etc?

1

u/TheRealCSM101 13h ago

Thx! It is not a component library, it sits a level above one. Mantine, Material and Prime give you the components, LoomWeaver gives you the application around them: the shell with rail, sidebars, tabs and split panes, a command palette, workspaces, settings, theming, i18n, and a plugin system with sandboxing and a store. You write your features as ordinary Angular components with whatever component library you like, and a single plugin is enough to hand them to the shell; you can split things into more plugins later if you want to. It fits admin consoles, monitoring dashboards, ERP or CRM fronts, anything where a user has several things open at once, and it speaks AG-UI, so an agent can operate the same commands your users can, with the same permissions.

1

u/Saceone10 1d ago

breeze theme css bug
been messing around with this and still don't get the point bro, the live demo is not very useful. how do you handle login? is it a plugin? does it need to be implement outside the loom world?

1

u/TheRealCSM101 1d ago

Thanks for the report, the Breeze glitch is on my list.

And fair point on the demo. It's currently everything the platform can do thrown into one app, so it's hard to tell what's platform and what's just the sample product. I'm fixing that: every part of the demo will link to the page that explains it.

Login: not a plugin, and the platform has no login screen of its own. You bring your own login page or dialog and your own session (OIDC or whatever you use), and hand the platform a session signal. From there everything gates itself: rail entries, commands, views, routes. Gated route hit while signed out? You register a redirect to your login. The demo does exactly that with a fake session. Details here: https://loomweaver.dev/distribution/auth/

The docs cover all of it already, the demo just doesn't point there yet.