Frontend Architecture:
How to Build a Zoo?
Thomas gossi Gossmann

unistylergossigos.si

What is Software Architecture?
- Architecture is a skill, not (just) a role
- The ability to design a system, reason about tradeoffs andunderstand the design- Flow of decisions (instead of upfront design work)- “Software architecture is the stuff that’s expensive to change”

Examine this while building a zoo
Disclaimer: I’m not a domain expert for a zoo. This is all made up.

Part 1Strategic Design
Level 1ZooWhat does this product do? (1)What does this product do? (2)What does this product do? (3)Identify the Domain●

Why do People come to the Zoo?
○○○○

Animals (Fauna) ?
Plants (Flora) ?
Info-/Entertainment ?
Food & Drinks ?

Identify the Domain
Core

Supporting

Generic

Animals

PlantsFood & Drinks

Info-/Entertainment

Restrooms

Identify the Domain
Core

Supporting

Generic

Animals

PlantsFood & Drinks

Info-/Entertainment

Restrooms

Distilling the Domain

https://www.zoo-berlin.deDistilling the Domain

Themed Areas
AviarySavanna
Antarctica
Asia
Mountains
AfricaPredators
Aquarium
Oceania

Bounded Contexts●●●●●

Multiple models can co-exist in a big projectContexts need explicit boundaries
Model strictly consistent within the context
Clear definitions communicate the purpose
Context gives autonomy

Bounded Contexts

Option 1: Compounds
Reasons:●●●

Picture from: https://www.glmv.com/work/zoo-boise-master-plan/

They have natural boundaries
Can react to outside events
Autonomous insideBounded Contexts

Option 2: Separate by Functional Staff
Reasons:
Zookeeper
Medical Staff- Anthropometry- Blood samples- Excrements- Food- Water- Clean compound

Gardener- Which plants are growing?
- What are toxic plants to an animal?

●●

Functional teams
Ubiquitous language by discipline

Bounded Contexts

Option 3: Areas
Reasons:●●●

Cross-Functional teams per area
Follows the team’s communication
structure (Conway’s law)
Keeps communication paths shortBounded Contexts
Compounds

Reasons:●●●

Picture from: https://www.glmv.com/work/zoo-boise-master-plan/

Natural Boundaries are a great
metaphor
I’m not a domain expert for Zoo at all
Use themed areas for hierarchicalorganization

Zoom Levels

Level 1

ZooLevel 2

Area

Level 3CompoundLevel 4

CodeC4 Model

model for visualising softwarearchitecture“maps of your code”

Simon Brown

c4model.com

Vocabulary = Scary
GenericConte

xt M

Subdomappin

ain

domainbu
Sgtin
Supporging
tillinDist
ed Contex

BoundorC

De-coe

mposi

nai

m

Do

tion

nguageus La
Ubiquito

theaDomZoom Levels

You
Business

Level 1

Level 2

EntireBusiness

Zoo

Area

Level 3CompoundLevel 4

Business
Capabilities

Business
Services

Business
Rules

CodeZoom Levels

Level 1

Level 2Business
C4

You

Area

Level 3CompoundLevel 4

EntireBusiness

BusinessCapabilities

BusinessServices

Business
Rules

Context

Containers

Components

CodeZoo

CodeZoom Levels

Level 1

Level 2Business
C4

YouArea

Level 3CompoundLevel 4

EntireBusiness

Business
Capabilities

BusinessServices

BusinessRules

Context

Containers

Components

CodeZoo

CodeZoo Folder Structure

Level 1Zoo

Strategic Design

Result★
★
★
★

Understand the domain
Distilled the domain into manageable pieces
Carved out bounded context
Established a language that works across disciplines

Part 2

Tactical Design
Level 2

Area

Level 3CompoundModels Expressed in Software

Value Objects
Repositories

Aggregates

Entities
EventsServices
Factories

Level 2Area

Aggregates

Aggregate
Value Object

Backend

Value Object
EntityRoot Entity

Frontend

Aggregates

Aggregate
Value Object

Backend

Value Object
EntityRoot Entity

Aggregate’
Value Object’

Frontend

Value Object’
Entity‘Root Entity’Services
BackendFrontend

DomainServiceBusiness Process(eg. feeding Animals)

Services
BackendFrontend

DomainServiceUIBusiness Process(eg. feeding Animals)

Screens
Forms
Status Elements

User Interfaces

User Interfaces

User Interfaces

Component Classification
Areas
Use for housing multiple
compounds(Screens/Routes/Pages)
Pathways
The same walking
infrastructure for visitors ofa zoo

Component Classification
Compounds
A component representing
a compound

Interior
Custom tailored interior for
one compound
Carryables
Elements that can be
moved around (from onecompound to another)Models Expressed in Software

Value Objects
Repositories

Aggregates

Entities
EventsServices
Factories

Level 2Area

Event Storming
Event

Command

Read Model

SystemPolicyActor

Collaborative exploration of complex
business domains

Alberto Brandolini

eventstorming.com

Models Expressed in Software

Value Objects
Repositories

Level 2Area

Aggregates

Entities
Commands

EventsServices
Factories

OOUX
ObjectContentsActionsMetadata

Object Oriented UXObject-Oriented UX offers a better way
to break up complexity, allowing us towork iteratively and holistically

Sophia Prater

ooux.comAn OOUX AnimalAnimal

Watch

NameFeedFurPet

FamilyGenus
DietBackend + Frontend

Level 2

Area

Repositories
Backend

Value Objects
EventsFrontend

Factories

Entities

Aggregates
Commands

Services

Backend + Frontend

Level 2

Area

Repositories
Backend

Factories

Value Objects
EventsAggregates

Entities

Commands

Services

Objects
ContentFrontend

Metadata

Actions

UIBackend + Frontend (Communication)
Repositories
BackendArea

FactoriesValue Objects
EventsLevel 2Aggregates

Entities

Commands

Services

Objects
Content
Frontend

Metadata

Actions

UIBackend + Frontend (Organization)
Repositories
BackendAreaFactories

Value Objects
EventsLevel 2Aggregates

Entities

Commands

Services

Objects
Content
Frontend

Metadata

Actions

UISeparate UI and Business Logic
Business Logic●●●

Visual Representation

Aggregates / Entities / Value Objects(Nouns)Actions(Verbs)
Policies & Rules

Communicate System State
Offer Behavior●●

Benefits●●●●

Maintainability
Readability
The feeling of “home”
Fast feature development

Area Folder Structure
Theme Area
Bounded Context
Business Logic

UI

Bounded Context

Tactical Design

Result★
★
★

Frontend Modeling = Backend + Design
Separate UI and Business Logic
Component Classification that follows the established languagePart 3CodeLevel 4CodeAggregate / Reactivity●

Plain JS/TS(FrameworkAgnostic)●

Connect to yourReactivity System(UI / StateManagement)

What’s yourchoice?

Aggregate / Reactivity●●

Plain JS/TS(FrameworkAgnostic)

Connect to yourReactivity System(UI / StateManagement)

Classes●●(de)serialization(re)hydration

Functional●●DTOtransforms

CQS: Command & Query Separation
Methods to either be commands that perform an action or queries that respond data, butneither both!

Queries-Questions: Ask facts about the system
Abilities/Authorization: Control access

Actions & Commands-Command Design Pattern
Commands: Used in Backend to performbusiness logic
Actions: Used in Frontend to connect
vocabulary with designers and probably
call commands in the backend

Queries
Questions:

Abilities:

Ask facts about the system?

Control access

Expect to havehundreds of theseQueries
Abilities:
Control access

Picture from: https://www.glmv.com/work/zoo-boise-master-plan/

Queries❌ DO NOT✅ DO

Inline conditionals (in templates)

Extract into function

Actions
Cause side-effects / Invoke commands on the backend

Connect to your UIUI Code is reduced to its
essentials
Connecting UI elements withyour existing business logic

Deterministic Behavior and State Management
Example:Using a Statechart to control the mood of monkey
Deterministic behavior
Use existing business logic

Pure Core●

Extract core into plain JS/TS○○○

●
●
●
●

Aggregates / Entities / Value Objects
Actions
Abilities & Questions

Framework agnostic
Control your app through coreHigh and excellent test coverageUse folders as signposts

Use folders as signposts
Three examples for core/

Files + Folder give a home
Choose based on your needs

CodeResult★
★
★
★
★
★

Core layer in plain JS/TS
Unit testing for your business logic
Connect them to your reactivity system
Connect core to UI, machines and other parts
Use CQS design pattern
Use folders as signposts

Summary★
★
★
★

Use available methodologies (EventStorming, OOUX, Atomic Design)
Extract and apply the essence
Establish your own language bound to your productLet the code speak your productThank you
Thomas gossi Gossmann

unistylergossigos.si