The Four Layers of a Mobile App

The same screen can contain several kinds of work: drawing a list, deciding what a button means, reading saved data, and sending a request. Putting all of this work in one component makes changes harder to understand and test.

Four layers provide a useful way to separate these responsibilities. Treat them as a reasoning tool, not a requirement to create four folders for every feature.

1. UI: display state and collect input

The user interface, or UI, displays the current screen state. It also sends user actions to the component that handles them.