IntroductionReact (with MobX)ArchitectureModelsNetworkingData TransformersStoresViews & View Models


Who is this for?

You may find this useful if you...

  • are interested in learning a scalable testable architecture pattern, from networking all the way to UI.
  • are looking for architecture patterns that can be applied across platforms.
  • want to learn more about general testing fundamentals. My favorite part about these patterns is they are library and framework agnostic! We separate our code by responsibility, use interfaces and inject mocks, and don't need to spin up mock servers or mock apps.
  • think tests slow you down or are useless but think you might change your mind. Writing tests on non testable code is frustrating and sometimes impossible. If you think you can see the value of tests but have never had any good experiences with writing tests yourself, hopefully you can learn something here.
  • enjoy learning different ways to write clean and testable code.

Who is this not for?

You may not really be interested in this if you...

  • are just starting your developer journey. I definitely do not want to discourage good testing patterns, but we won't be going over any basics here and it might be difficult to learn so many things at once, so I suggest getting familiar with a platform and then coming back!
  • already have established patterns in your projects with testable code. That's awesome! MVVM is not the only way to do things.
  • think tests slow you down or are useless and won't change your mind. We're not trying to debate anything, just sharing the things that work really well for us :)


This architecture is divided up into different slices, and the chapters are written in the order from networking to UI so that conceptually one thing builds on top of the other. The slices are...

  1. Models: Object definitions and type checks
  2. Networker: Make API calls and return responses
  3. Data transformers: Tied directly to the networker, this sets up payloads for requests and processes and error handles responses. Takes the networker as a dependency.
  4. Stores: Global state management. Take the data transformers as a dependency.
  5. Views and View Models: Display app data and consume user interactions. Takes the stores as the dependency.

Let's Get Started

This documentation uses a weather app example that can search by a user input zip code or use the browser's location to find the weather.