Microsoft To-Do

Web Architecture

๐Ÿ‘‹ my name is Alex

Microsoft To-Do

Just a To-Do list...

React

Redux

Redux-actions

ES6 + TypeScript

eslint plugins

ImmutableJS

...

Reselect

Thick Client

Telemetry

e2e tests (state machine)

Unit tests (TDD)

Snapshot tests

Feature Toggles

23 packages in Lerna

1500+ directories in top-level node_modules

3000+ tests (unit, integration, e2e)

100+ React comps

ย 70+ telemetry events

40+ data domains (think RDB tables)

6 devs

Architecture Principles

Data-oriented programmingย 

Functional programmingย 

CQRS

Changeability > Performance

Explicitness

Clean Architecture

Coding in the language of Domain

App vs UI vs Data

Declarativeness

Dependencies = DAG

Feature Cohesion

State Machine testing

Think "plugins"

React + Redux Principles

1 action = 1 reducer

Data domains (indexed)

Composable normalized State

Dependent Actions

Side-effects in Middleware

ICC

Custom in-house wrappers

Snapshot testing for UI

UI state is explicit in Redux

State machine testing for logic

Store as a Database

Middlewares as Pub-Sub

Render Slots

Custom lightweight builds

Changeable UI

ICC

Independently Connected Components

ICC

  1. Data hierarchy == View hierarchy
  2. Expensive updates
  3. Sensitive to changes
  4. Where do I add child data?
  5. Derived data dependencies
  6. Does not scale (too many things)
  7. Performance?

Extensible vs. ?

Connector + Component

=

Single Domain Entity

(independent of parent context)

Normalized State

Directory structure

===

state structure

State is composed of domains

1. No derived data in domains

2. Single Source of Writes

3. Represents Domain Entities

4. Indexed (byId, byOrder)

Think "a table in relational DB"

Example of a domain

1. Derived Data is in selectors

Crucial Conventions

2. Action is handled by only one reducer

3. Actions have domain-specific names

4. Dependent actions

What's next?

  1. Separate builds for integrations (logic/UI reuse) ๐Ÿค”

  2. Cyclic dependencies in Webpackย  ๐Ÿ’ฉ

  3. Too much code for derived data

  4. "Where do I put that?"ย 

More structure

Relationships

Read (domain - domain) dependencies

Transactions

Write (domain->domain) relationships

State machines?

Entities = UI/App/Data domains

Use cases = App transactions

Presenters = Connectors (queries)

Controllers = Connectors (actions)

Ext. interfaces = UI / tests

Going deeper...

Basics

๐Ÿ“œ First Normal Form

๐Ÿ“œ Data Domain

Advanced

๐Ÿ“œ CQRS Explained

Black Magic

๐Ÿ“œ Statecharts

Thank you!

Questions?