Addressing feedback and updating diagrams

Change-Id: Ic0964696a456bf983a6d3b72921fe8e96bc880bf
pull/3/head
Don Turner 3 years ago
parent c6e8177b5a
commit 4b60c3c9b5

@ -2,10 +2,13 @@
In this learning journey you will learn about the Now in Android app architecture: its layers, key classes and the interactions between them.
## Goals and requirements
The goals for the app architecture are:
* Follow the [official architecture guidance](https://developer.android.com/jetpack/guide) as closely as possible.
* Easy for developers to understand, nothing too experimental.
* Support multiple developers working on the same codebase.
@ -17,62 +20,154 @@ The goals for the app architecture are:
The app architecture has two layers: a [data layer](https://developer.android.com/jetpack/guide/data-layer) and [UI layer](https://developer.android.com/jetpack/guide/ui-layer) (a third, [the domain layer](https://developer.android.com/jetpack/guide/domain-layer), is currently in development).
![Diagram showing overall app architecture](images/architecture-1-overall.png "Diagram showing overall app architecture")
<center>
<img src="images/architecture-1-overall.png" width="600px" alt="Diagram showing overall app architecture" />
</center>
The architecture follows a reactive programming model with [unidirectional data flow](https://developer.android.com/jetpack/guide/ui-layer#udf). With the data layer at the bottom, the key concepts are:
* Higher layers react to changes in lower layers.
* Events flow down.
* Data flows up.
The data flow is achieved using streams, implemented using [Kotlin Flows](https://developer.android.com/kotlin/flow).
**Example: Displaying news on the For You screen**
### Example: Displaying news on the For You screen
When the app is first run it will attempt to load a list of news resources from a remote server (when the `staging` or `release` build variant is selected, `debug` builds will use local data). Once loaded, these are shown to the user based on the interests they choose.
The following diagram shows the events which occur and how data flows from the relevant objects to achieve this.
![Diagram showing how news resources are displayed on the For You screen](images/architecture-2-example.png "Diagram showing how news resources are displayed on the For You screen")
Here's the code which corresponds to each step. The easiest way to jump to the code is to load the project into Android Studio and search for the following:
1) Search for instances of `ForYouFeedState.Loading`
2) See `SyncWorker#doWork`
![Diagram showing how news resources are displayed on the For You screen](images/architecture-2-example.png "Diagram showing how news resources are displayed on the For You screen")
3&6) See `OfflineFirstNewsRepository#syncWith`
4&5) See `RetrofitNiaNetwork#getNewsResources`
Here's what's happening in each step. The easiest way to find the associated code is to load the project into Android Studio and search for the text in the Code column (handy shortcut: tap SHIFT twice).
7) See `NewsResourceDao#getNewsResourcesStream`
8) See `OfflineFirstNewsRespository#getNewsResourcesStream`
<table>
<tr>
<td><strong>Step</strong>
</td>
<td><strong>Description</strong>
</td>
<td><strong>Code </strong>
</td>
</tr>
<tr>
<td>1
</td>
<td>On app startup, a <a href="https://developer.android.com/topic/libraries/architecture/workmanager">WorkManager</a> job to sync all repositories is enqueued.
</td>
<td><code>SyncInitializer.create</code>
</td>
</tr>
<tr>
<td>2
</td>
<td>The initial news feed state is set to <code>Loading</code>, which causes the UI to show a loading spinner on the screen.
</td>
<td>Search for usages of <code>ForYouFeedState.Loading</code>
</td>
</tr>
<tr>
<td>3
</td>
<td>WorkManager executes the sync job which calls <code>OfflineFirstNewsRepository</code> to start synchronizing data with the remote data source.
</td>
<td><code>SyncWorker.doWork</code>
</td>
</tr>
<tr>
<td>4
</td>
<td><code>OfflineFirstNewsRepository</code> calls <code>RetrofitNiaNetwork</code> to execute the actual API request using <a href="https://square.github.io/retrofit/">Retrofit</a>.
</td>
<td><code>OfflineFirstNewsRepository.syncWith</code>
</td>
</tr>
<tr>
<td>5
</td>
<td><code>RetrofitNiaNetwork</code> calls the REST API on the remote server.
</td>
<td><code>RetrofitNiaNetwork.getNewsResources</code>
</td>
</tr>
<tr>
<td>6
</td>
<td><code>RetrofitNiaNetwork</code> receives the network response from the remote server.
</td>
<td><code>RetrofitNiaNetwork.getNewsResources</code>
</td>
</tr>
<tr>
<td>7
</td>
<td><code>OfflineFirstNewsRepository</code> syncs the remote data with <code>NewsResourceDao</code> by inserting, updating or deleting data in a local <a href="https://developer.android.com/training/data-storage/room">Room database</a>.
</td>
<td><code>OfflineFirstNewsRepository.syncWith</code>
</td>
</tr>
<tr>
<td>8
</td>
<td>When data changes in <code>NewsResourceDao</code> it is emitted into the news resources data stream (which is a <a href="https://developer.android.com/kotlin/flow">Flow</a>).
</td>
<td><code>NewsResourceDao.getNewsResourcesStream</code>
</td>
</tr>
<tr>
<td>9
</td>
<td><code>OfflineFirstNewsRepository</code> acts as an <a href="https://developer.android.com/kotlin/flow#modify">intermediate operator</a> on this stream, transforming the incoming <code>PopulatedNewsResource</code> (a database model, internal to the data layer) to the public <code>NewsResource</code> model which is consumed by other layers.
</td>
<td><code>OfflineFirstNewsRepository.getNewsResourcesStream</code>
</td>
</tr>
<tr>
<td>10
</td>
<td><code>When ForYouViewModel</code> receives the news resources it updates the feed state to <code>Success</code>. <code>ForYouScreen</code> then uses the news resources in the state to render the screen.
<p>
The screen shows the newly retrieved news resources (as long as the user has chosen at least one topic or author).
</td>
<td>Search for instances of <code>ForYouFeedState.Success</code>
</td>
</tr>
</table>
9) Search for instances of `ForYouFeedState.Success`
## Data layer
The data layer is implemented as an offline-first source of app data and business logic. It is the source of truth for all data in the app.
![Diagram showing the data layer architecture](images/architecture-3-data-layer.png "Diagram showing the data layer architecture")
Each repository has its own model. For example, the `TopicsRepository` has a `Topic` model and the `NewsRepository` has a `NewsResource` model.
Each repository has its own models. For example, the `TopicsRepository` has a `Topic` model and the `NewsRepository` has a `NewsResource` model.
Repositories are the public API for other layers, they provide the _only_ way to access the app data. The repositories typically offer one or more methods for reading and writing data.
### Reading data
Data is obtained using data streams. This means each client of the repository must be prepared to react to data changes. Data is not exposed as a snapshot (e.g. `getModel`) because there's no guarantee that it will still be valid by the time it is used.
Data is exposed as data streams. This means each client of the repository must be prepared to react to data changes. Data is not exposed as a snapshot (e.g. `getModel`) because there's no guarantee that it will still be valid by the time it is used.
_Example: Read a list of authors_
A list of `Author`s can be obtained by calling `AuthorsRepository.getAuthorsStream()`. This returns a `Flow<List<Author>>`.
A list of Authors can be obtained by subscribing to `AuthorsRepository::getAuthorsStream` flow which emits `List<Authors>`.
Whenever the list of authors changes (for example, when a new author is added), the updated `List&lt;Author>` is emitted into the stream.
Whenever the list of authors changes (for example, when a new author is added), the updated `List<Author>` is emitted into the stream.
### Writing data
@ -101,7 +196,7 @@ A repository may depend on one or more data sources. For example, the `OfflineFi
<tr>
<td>TopicsDao
</td>
<td>Room/SQLite
<td><a href="https://developer.android.com/training/data-storage/room">Room/SQLite</a>
</td>
<td>Persistent relational data associated with Topics
</td>
@ -109,7 +204,7 @@ A repository may depend on one or more data sources. For example, the `OfflineFi
<tr>
<td>NiaPreferences
</td>
<td>Proto DataStore
<td><a href="https://developer.android.com/topic/libraries/architecture/datastore">Proto DataStore</a>
</td>
<td>Persistent unstructured data associated with user preferences, specifically which Topics the user is interested in. This is defined and modeled in a .proto file, using the protobuf syntax.
</td>
@ -119,7 +214,7 @@ A repository may depend on one or more data sources. For example, the `OfflineFi
</td>
<td>Remote API accessed using Retrofit
</td>
<td>Data for topics, provided through REST API endpoints as JSON.
<td>Data for topics, provided through REST API endpoints as JSON.
</td>
</tr>
</table>
@ -139,7 +234,8 @@ The [UI layer](https://developer.android.com/topic/architecture/ui-layer) compri
* UI elements built using [Jetpack Compose](https://developer.android.com/jetpack/compose)
* [Android ViewModels](https://developer.android.com/topic/libraries/architecture/viewmodel)
The view models receive streams of data from repositories and transform them into UI state. The UI elements reflect this state, and provide ways for the user to interact with the app. These interactions are passed as events to the view model where they are processed.
The ViewModels receive streams of data from repositories and transform them into UI state. The UI elements reflect this state, and provide ways for the user to interact with the app. These interactions are passed as events to the view model where they are processed.
![Diagram showing the UI layer architecture](images/architecture-4-ui-layer.png "Diagram showing the UI layer architecture")
@ -167,7 +263,7 @@ The `feedState` is passed to the `ForYouScreen` composable, which handles both o
### Transforming streams into UI state
View models receive streams of data as cold [flows](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html) from one or more repositories. These are [combined](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/combine.html) together to produce a single flow of UI state. This single flow is then converted to a hot flow using [stateIn](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/state-in.html). The conversion to a hot flow enables UI elements to read the last known state from the flow.
View models receive streams of data as cold [flows](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/-flow/index.html) from one or more repositories. These are [combined](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/combine.html) together to produce a single flow of UI state. This single flow is then converted to a hot flow using [stateIn](https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/state-in.html). The conversion to a state flow enables UI elements to read the last known state from the flow.
**Example: Displaying followed topics and authors**

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 256 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 KiB

After

Width:  |  Height:  |  Size: 149 KiB

Loading…
Cancel
Save