Vertical Slice Architecture helps us build maintainable applications by separating concerns around features rather than technical responsibilities allowing us to add features without modifying existing code.

1. BILL NEWLAND
bill@utterclarity.co.uk
@UtterClarity
billnewland

2. NO ONIONS, NO TIERS
AN INTRODUCTION TO VERTICAL SLICE ARCHITECTURE
DISCLAIMER
This talk is not about microservices.
Any resemblance to microservices living or
departed are purely coincidental.

3. Database
Data Access Layer
UI Layer
Business Layer
A BIT OF HISTORY
• 3-Tier Architecture
• N-Tier Architecture
• Tight coupling between layers

4. UI
ONION ARCHITECTURE
• Direction of dependency is towards the
core
• Interaction between layers is via
interfaces
• Reduces coupling
• Implementation may change as long as
interfaces remain the same
• But a single change may still affect every
layer
Application Services
Domain Services
Domain
Model Change

5. WHY IS THIS A PROBLEM?
• Changes affect multiple service objects
• Increases the chances of merge conflicts
• Harder to test
• Increased complexity

6. ‘MY BANK’ SCENARIO
Customer Loan Application
Loan
application
Check credit
score
Loan rejected
Loan
approved
Transfer
money
Ok
Not Ok

7. customerService
customerService accountService loanService
customerEntity accountEntity loanEntity
Apply for Loan
Get Customer Data
Get Customer Data Get Account Data
Evaluate Loan
Update Loan Book
Approve Loan
creditScorerService
Get Credit Score
Deposit Money
Update Balance
Update Customer
Get Account Data
Update Balance
Application
Service
Domain
Service
Domain
Model
Update Customer Data

8. WHAT’S THE ALTERNATIVE?
• Stop thinking about
separating layers
• Stop think about objects
• Start thinking about features
• Axes of change
UI Layer
Business Layer
Data Access Layer
Database
Open
Account
Balance
Enquiry
Loan
Application

9. Loan Application
COLLAPSING THE MODEL
Get
Customer
Data
Evaluate
Loan
Loan
Approved
Get Credit
Score
Update
Loan
Book
Get
Account
Data
Update
Balance
Database
Credit agency
Apply
for loan
Success
Loan
Rejected
Fail

10. IN PRACTICE
• Every user action has its own class
• Keep it contained
• Reuse is not your friend
• Input – Process - Output
Input Output
Process
• Synchronous Call
• Response to an event
• Promise
• Values
• Raise an event
• Fulfils promise

11. IT DOESN’T HAVE TO BE HOMOGONOUS
UI Layer
Business Layer
Data Access Layer
Database
Balance
Enquiry
Transfer
Money
Loan
Book
Report Website
Business Layer
Repository
No-SQL Db
Balance Enquiry
API
Business Layer
ORM
Main Db
Transfer Money
BI
Business Layer
SQL
Reporting Db
Loan Book Report

12. https://mybank.co.uk
…
…
…
…
…
…
My Bank Bill Newland
Money Transfer
Input Process Output
Loan Application
Input Process Output
Get Statement
Input Process Output
TASK-BASED USER INTERFACES
Transfer Loan Statement

13. VERTICALLY SLICED ARCHITECTURE
Validation
Authentication
Authorisation
Rarely
Used
Feature
Different
Feature
Another
Feature
Loan
Application
Get
Statement
Money
Transfer
Balance
Enquiry
Persistence
Domain
Agnostic
Domain
Specific
Cross-
Cutting

14. WHAT’S THE ADVANTAGE?
• Adding not changing
• Distinct merges
• Isolated testing
• Simpler
Validation
Authentication
Authorisation
Rarely
Used
Feature
Different
Feature
Another
Feature
Loan
Application
Get
Statement
Money
Transfer
Balance
Enquiry
Persistence

15. QUESTIONS?

16. BILL NEWLAND
bill@utterclarity.co.uk
@UtterClarity
billnewland

17. class LoanApplication extends Handler {
process(input: LoanApplicationInput): Output {
super.process(input);
const output = new LoanApplicationOutput {
success = true
};
return output;
}
}
class LoanApplicationInput extends Input {
accountNumber: string;
amount: number;
…
}
class LoanApplicationOutput extends Output {
success: boolean
}

18. class LoanResponse implements IResponse {
success: boolean
}
class LoanRequest implements IRequest<LoanResponse> {
accountNumber : string;
}
@RequestHandler(LoanRequest)
class HandlerTest implements IRequestHandler<LoanRequest, LoanResponse> {
handle(value: LoanRequest): Promise<LoanResponse> {
return Promise.resolve(new LoanResponse {
success: true
}
}
const mediator = new Mediator();
const r = new LoanRequest();
r.accountNumber = "AB-12345-96C";
const result = await mediator.send<LoanResponse>(r);
// result.success = true
Mediatr library: https://www.npmjs.com/package/mediatr-ts