1 of 29

LWC Architecture for Enterprise Apps: �Patterns That Scale Beyond a Single Component

2 of 29

DemoJam Competitors

Silver

Gold

Platinum

Thank You

Our Sponsors

3 of 29

About Me

Michal Bajdek�Tucario

4 of 29

LWC projects don’t fail because of the framework

5 of 29

They fail because of decisions nobody make

6 of 29

They fail because of decisions nobody make

Locker != LWR

7 of 29

Monolith

8 of 29

Chaos

9 of 29

Pivot

Communication

State

Responsibility

10 of 29

How do components communicate ?

No rules / chaos

It just happens

Parent–child �Props ↓ /Events ↑

No relation → Global? → LMS / Rethink architecture

CzechDreamin

Let's start with the first decision - communication.

This is where most frontend chaos begins. Let me show you why.

In most projects, communication patterns are not designed.

They just happen. In Salesforce we have pretty good designed defaults but the most importantly is to define and establish project framework and standards.

Otherwise imagine situation when

●One developer uses events because it is something he is familiar with so uses it in every possible way trying to fit to complex business situation

●Another one uses LMS always because it serves mostly everything when you are stubborn

●A third one drops in their own custom pub/sub in a global module - because "an event bus is flexible" but at the same time expensive

●Everybody uses whatever they happen to know, or whatever worked yesterday.

11 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment

Parent–child �Props ↓ /Events ↑

No relation → Global? → LMS / Rethink architecture

CzechDreamin

12 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

No relation → Global? → LMS / Rethink architecture

CzechDreamin

13 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

are these components in a parent-child relationship?

No relation → Global? → LMS / Rethink architecture

CzechDreamin

14 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

are these components in a parent-child relationship?
Props go down

No relation → Global? → LMS / Rethink architecture

CzechDreamin

15 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

are these components in a parent-child relationship?
Props go down
Events go up

No relation → Global? → LMS / Rethink architecture

Parent LWC

Child A

Child B

CzechDreamin

Events go up.

CustomEvent from the child. The parent catches event in its controller.

Salesforce provides very useful and safe defaults for CustomEvents. By default, they are created WITHOUT bubbles and composed means the event will not go beyond the direct LWC parent, preventing uncontrolled spread across the application. Since the parent and child share a single DOM tree, the parent listens directly on the child's element—this is the simplest, safest, and most efficient communication mechanism.

●And what if the components are NOT in a direct relationship? Example -> parent with two childs under [click animation]

Second test: do they share an LWC parent?

Yes - then you communicate through that parent.

Event up → parent catches it → updates state → prop down to the other sibling.

The parent is the only source of truth. Siblings don't know about each other.

If you ever feel the need for a side channel between siblings - it means the PARENT IS MISSING A PIECE OF STATE. Add a property there. Don't invent sideways communication.

They don't share a parent? Then there's one last option.

16 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

are these components in a parent-child relationship?
Props go down
Events go up

No relation → Global? → LMS / Rethink architecture

is this communication global? -> LMS

CzechDreamin

17 of 29

How do components communicate ?

No rules / chaos

It just happens
People use whatever works in the moment
Nobody understands what’s going on.

Parent–child �Props ↓ /Events ↑

are these components in a parent-child relationship?
Props go down
Events go up

No relation → Global? → LMS / Rethink architecture

is this communication global? -> LMS
If not -> rethink architecture

CzechDreamin

18 of 29

State

Who owns the data ? Where does it live ?

19 of 29

Who owns it and where does it live?

Duplicate data

In many projects, every component fetches data on its own

@Wire vs imperative

AI makes decisions

CzechDreamin

20 of 29

Who owns it and where does it live?

Duplicate data

In many projects, every component fetches data on its own
The same data exists in multiple places

@Wire vs imperative

AI makes decisions

CzechDreamin

21 of 29

Who owns it and where does it live?

Duplicate data

In many projects, every component fetches data on its own
The same data exists in multiple places
Suddenly your UI becomes inconsistent

@Wire vs imperative

AI makes decisions

CzechDreamin

22 of 29

Who owns it and where does it live?

Duplicate data

In many projects, every component fetches data on its own
The same data exists in multiple places
Suddenly your UI becomes inconsistent

@Wire vs imperative

And this is not about @wire versus imperative calls. This is about not having a unified data strategy.

AI makes decisions

CzechDreamin

23 of 29

Who owns it and where does it live?

Duplicate data

In many projects, every component fetches data on its own
The same data exists in multiple places
Suddenly your UI becomes inconsistent

@Wire vs imperative

And this is not about @wire versus imperative calls. This is about not having a unified data strategy.

AI makes decisions

AI is making decisions for us if we don’t make them first.

CzechDreamin

More and more often - we are not writing all the code ourselves.

AI is generating it for us.

And AI will make architectural decisions for us…

unless we make them first.

Concretely: AI knows the most popular patterns - which means the ones from Salesforce documentation. And Salesforce docs are optimized for demo simplicity, not enterprise scalability. So if you don't enforce your own rules - you will get @wire in UI components everywhere, because that's how the docs example looks.

Practical advice: a project-level system prompt, a CLAUDE.md or .cursorrules with your rules. A PR template with a checklist - "who owns the state, who fetches, who subscribes". AI is excellent at ENFORCING rules once you give them. It is hopeless at INVENTING them. And there is surprise, in a few slides I am about to share with you our own framework in Claude that helped us to pass security review several times and helped with refactor for few clients

24 of 29

Responsibility

Who owns the data ? Where does it live ?

25 of 29

Monolith vs Chaos

Single Component does it all

UI, data fetching, business logic, communication… all in one place.

26 of 29

Monolith vs Chaos

Single Component does it all

UI, data fetching, business logic, communication… all in one place.

Split everything into smaller components

logic is now scattered everywhere.

Some of it in the UI…�Some of it in helpers…�Some of it duplicated across components.

27 of 29

Monolith vs Chaos

Single Component does it all

UI, data fetching, business logic, communication… all in one place.

Split everything into smaller components

logic is now scattered everywhere.

Some of it in the UI…�Some of it in helpers…�Some of it duplicated across components.

Loss Of Control

28 of 29

LWC Toolkit

Thank You !

29 of 29

DemoJam Competitors

Silver

Gold

Platinum

Thank You

Our Sponsors