AI for Architecture

Designing a system, from small to big, starts as a vague process and then incrementally you narrow down on a particular approach. It'd be absurd to ask someone

Design a local first webapp with auto and manual saving- Some one taking a frontend interview

Design a system which can onboard users, teams and organisations and manage role based access to resources- Your EM when the lead architect is on leave

and expect a fully usable answer right out of the gate in 5 minutes. But the urge to do this with AI is quite present, if not immense.

And to do so, would set you up for failure, more than it'd have by doing the same to you team member. Because they would understand context, and read between the lines and might actually give something valuable!

And yet, I find myself talking to ChatGPT endlessly about how to build the features I mentioned above.

Your experience is context

Before I dive in, let me show you what I mean. The local sync problem I mentioned before, well that was real.

I am quite new to frontend and its mysterious ways of working, but I understand systems. I understand the fundamental blocks enough to reason about things, or at least get a sense of direction.

I am also, a Functional Programming enthusiast, and tried my hand at FRP(Functional Reactive Programming), which led me to RxJS.

Now, the folks who use RxJS as a daily driver must have gotten their wheels turning and good chance they solved it already.

But not me, I don't use RxJS, I just understand pipelines!

Pipelines can be mapped, filtered, buffered, merged but wait, the events that my app is generating is a stream and hence an Observable, even auto save is just a stream of button presses. I think there's something here that can solve my problem.

And that's it!

Lemme show you the final code which me and ChatGPT arrived at:

1
const manualSaveTrigger$ = typeof window === 'undefined' ? from([]) : fromEvent<KeyboardEvent>(document, 'keydown').pipe(
2
    filter(event => event.key === 's' && (event.metaKey || event.ctrlKey)),
3
    map(() => [] as StateChangeEvent<any>[])
4
);
5

6
export function setupSyncPipeline(
7
    projectId: string,
8
    eventSource$: NonNullable<SyncManagerState['eventSource$']>,
9
    syncManagerStore: UseBoundStore<StoreApi<SyncManagerState>>,
10
    bufferTimeInMs: number,
11
) {
12
    const syncManagerState$ = new BehaviorSubject<SyncManagerState>(syncManagerStore.getState());
13
    syncManagerStore.subscribe(state => syncManagerState$.next(state));
14

15
    const sharedEventSource$ = eventSource$.pipe(
16
        share(),
17
    );
18

19
    const bufferedEvents$ = sharedEventSource$.pipe(
20
        tap(() => syncManagerStore.getState().setSyncStatus('unsynced')),
21
        bufferWhen(() => merge(
22
          timer(bufferTimeInMs), // Emit when buffer time elapses
23
          manualSaveTrigger$    // Or when manual save is triggered
24
        )),
25
        filter(events => events.length > 0)
26
    );
27
    
28
    const result = bufferedEvents$.pipe(
29
        map(mergeEvents),
30
        withLatestFrom(syncManagerState$),
31
        filter(([_, state]) => state.isSyncingAllowed), // Check if syncing is allowed
32
        tap(() => syncManagerStore.getState().setSyncStatus('syncing')),
33
        concatMap(([mergedEvents, state]) => 
34
            ajax<{server_sequence: number}>({
35
                url: getSyncApiUrl(projectId),
36
                method: 'POST',
37
                headers: {
38
                    'content-type': 'application/json',
39
                },
40
                body: { updated_artifacts: mergedEvents, server_sequence: state.serverSequence },
41
                withCredentials: true,
42
            }).pipe(
43
                tap({
44
                    next: (response) => {
45
                        syncManagerStore.getState().setSyncStatus('synced');
46
                        syncManagerStore.getState().setServerSequence(response.response.server_sequence);
47
                    },
48
                    error: () => {
49
                        syncManagerStore.getState().setSyncStatus('errored');
50
                        syncManagerStore.getState().setIsSyncingAllowed(false);
51
                    }
52
                })
53
            )
54
        )
55
    );
56

57
    const subscription = result.subscribe({
58
        next: response => console.log('Merged event synced:', response),
59
        error: err => console.error('Error syncing merged event:', err),
60
        complete: () => console.log('All merged events synced')
61
    });
62

63
    syncManagerStore.getState().setSubscription(subscription);
64
}
65

66
const mergeEvents = (events: StateChangeEvent<any>[]) => {
67
    // Merge logic here
68
    return events.reduce(
69
        (merged, event) => {
70
            merged[event.source] = event.newState;
71
            return merged
72
        }, 
73
        {} as Record<string, any>
74
    );
75
};
76

77
function getSyncApiUrl(id: string) {
78
    return `${getBaseAPIPath()}/project/sync/${id}`;
79
}

That's a lot of code, but that's not important. What's important is it works, I understand how it works, and I got this by understanding basics.

It's the new engineer in your team

The one who is quite eager to execute but needs some hand holding, and with good direction can deliver exactly what you want. That's what current LLMs are when it comes to architecture.

You have to be the one boucing ideas, guiding and more importantly verifying, because they'll definitely make mistakes.

Indeed, you are correct. Let's integrate the merging of events into the updated pipeline, ensuring that the merged events and the sequence number are correctly handled in each API call.- When it missed an operation

Yes, you are correct. The current implementation does not check if syncing is allowed before proceeding with the API call. This check is crucial, especially in the scenario where the state is set to 'errored' and further syncing is supposed to be halted.- After reviewing that it missed a crucial check

You're correct to question the typecasting of useStore to Observable<StoreState> in the RxJS pipeline.- When it just assumed how TS works

You're correct in your understanding. Placing the tap operator after bufferTime means it will only execute after the specified time interval (n seconds) has passed and the events have been buffered. - When it came up with the wrong implementation

Yes, you're correct. Setting the 'unsynced' status after bufferTime would introduce the same issue as discussed earlier. The 'unsynced' status would only be set after the buffering period has elapsed, not immediately when events start arriving.- Once again, wrong implementation

You're absolutely correct. If the manualSave$ observable emits an empty array, and it's merged with the event source observable, there's a risk of syncing that empty array instead of the actual buffered events.- When it fumbled manual save

But what it lacks in presision, it makes up for in speed. The chat interaction might look long but the conversation lasted for barely an hour and by the end of it, I had exactly what I needed.

Here are some more design problems I could rush through quickly:

• That user, projects, organisation and resource problem I mentioned before, very real.
• I also needed to create a basic file system abstraction, I know how trees work but need help with applying that knowledge to the app I am building.
• In the metz runtime I needed a better way to detect connections, I had an idea around a graph based approach but needed some oversight.

Compiler of Ideas

A programming language compiler, takes our intention of what we want to do, and then does all the hard work of making it a reality.

And that's how I see my interactions with AI for design. It too has "syntax" errors, where if you don't start with something concrete it'll "crash" and give garbage answers.

Designing a system needs in-depth analysis, but not just of one idea, rather of many ideas.

This is where iteration speed matters. The ability to try things out quickly, create a thesis and compare, is crucial to arriving at an informed decision.

And this is exactly were AI shines.