Microsoft To-Do

Web Architecture

http://to-do.microsoft.com

👋 my name is Alex

https://mtdv.io

@mr_mig_by

mr-mig

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)

Latest slides on ICC

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

📜 Hexagonal architecture

📜 Database Normalization Explained

📜 Avoiding Accidental Complexity
When Structuring Your App State

📜 Shape Your Redux Store Like Your Database

Advanced

📜 DDD - Domain-Driven Design

📜 CQRS Explained

📜 DSL - Domain Specific Language

📖 DDD Distilled

Black Magic

📼 Entity-Component-System

📜 Functional microservices

📜 Statecharts

Thank you!

Questions?

http://github.com/mr-mig/todomvc

Microsoft To-Do Web Architecture

By Alexey Migutsky

Microsoft To-Do Web Architecture

OdessaJS 2018

  • 3,577

More from Alexey Migutsky