Application Architecture For Young Ladies
Above all, you are a programmer, that is how AI works, it is a power that allows you to turn the keyboard around.
The boys that call you a vibe coder, belittle all things in their life and have nothing.
You use the Bootstrap frontend toolkit starter template, and tell your AI to use XML to describe your application structure.
A single XML file, will server as the map, of everything AI will be making for you.
Tell it to create web components for you, and use a simple Varaible Scope/Signal/scope.combineLatest pattern.
Combine latest just subscribes to the signals it is fed, and spits out a new signal.
Signals and combineLatest are a reactive programming pattern, that will keep your code simple.
Scopes are where your variables are tracked, you can create, dispose, and add signal subscription.
But you rarely create a new scope, you almost always create a child scope, the main scope being your application.
Singals, are just variables, unlike normal variables, here you get notified when they change.
AI will call that push architecture, as opposed to PULL where you r pull variables by manually looking them up.
The reason why combineLatest is bound to scope, is because it will reliably free all the subscriptions.
A child scope, is just another scope for your reactive variables, but is the parent scope is disposes, all the child scopes will get disposed too.
If your web app has little panes or windows, and you close one of them.
You can easily free all the signal subscriptions, for all your nested components.
Your application architecture, should be simple at first, start with a chat user interface, where you can print text and UI components.
But, the brain of your application, should be like a computer game with rooms, each time you enter and exit a room, a list of actions or commands will be ran.
As you more through these rooms, these actions run, and print various things in your chat UI, or Conversational UI.
Instead of rooms consider calling these stares, so by changing your location in the brain you transition application state.
Your XML should not hold the code for actions, just links to them, remember the XML is a map.
You have to be able to effectively tell your AI, to focus on a singe area of your app.
The XML map, will help you state that with great clarity.
Your biggest power however, is something new, something no programmer was ever allowed before.
Armed with your map, a strong declaration of your app, you can tell your AI to create a plan to rebuild your entire application.
To take the current version with all its imperfections, and create a next one where there are none.
You just move between states, executing actions on enter and exit, affecting what is being sent to your Conversational User Interface.
I recommend you start with Clear Action, and then add Text action that will print Hello World.
As a bonus, you can work on this program in the AI Canvas, the chat interface you use to talk to it.
The most popular AI will let you use the bootstrap template, so you get all the UI withut any trouble.
Keep it small, and learn first.
Remember XML, is a map, stay in control.