Microsoft To-Do

Web Architecture

๐Ÿ‘‹ my name is Alex

Microsoft To-Do

Just a To-Do list...




ES6 + TypeScript

eslint plugins




Thick Client


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ย 


Changeability > Performance


Clean Architecture

Coding in the language of Domain

App vs UI vs Data


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


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


Independently Connected Components


  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


Read (domain - domain) dependencies


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...


๐Ÿ“œ First Normal Form

๐Ÿ“œ Data Domain


๐Ÿ“œ CQRS Explained

Black Magic

๐Ÿ“œ Statecharts

Thank you!


Microsoft To-Do Web Architecture

By Alexey Migutsky

Microsoft To-Do Web Architecture

  • 1,551
Loading comments...

More from Alexey Migutsky