Composable Architecture — свежий взгляд на архитектуру приложения

Сбалансированная архитектура мобильного приложения продлевает жизнь проекту и разработчикам.

История

Познакомьтесь с Алексом. Ему необходимо разработать приложение для составления списка покупок. Алекс опытный разработчик и первым делом формирует требования к продукту:

1. Возможность портирования продукта на другие платформы (watchOS, macOS, tvOS)
2. Полностью автоматизированный регресс приложения
3. Поддержка iOS 13+

Недавно Алекс познакомился с проектом pointfree.com, где Брэндон и Стивен поделились своим ведением современной архитектуры приложения. Так Алекс узнал о Composable Architecutre.

Composable Architecture

Изучив документацию к Composable Architecture, Алекс определил, что имеет дело с однонаправленной архитектурой, соответствующей требованиям к проекту. Из брошюры следовало:

1. Разбиение проекта на модули;
2. Data-driven UI — конфигурация интерфейса определяется его состоянием;
3. Вся логика модуля покрывается юнит тестами;
4. Snapshot тестирование интерфейсов;
5. Поддержка iOS 13+, macOS, tvOS и watchOS;
6. Поддержка SwiftUI и UIKit.

Перед тем, как погружаться в изучение архитектуры, давайте посмотрим на такой объект, как умный зонтик.

Как описать систему, по которой устроен зонтик?

У системы зонтика можно выделить четыре компонента:

Состояние. У зонтика есть два состояния: свернут и открыт.

Действия. Зонтик можно открыть и закрыть.

Механизм. Автоматический зонтик открывается и закрывается с помощью встроенного механизма.

Сервисы. Умный зонтик отправляет уведомление на телефон при удалении от него на 10 метров.

Таким же образом в composable architecture описывается экран или вью. Предлагаю взглянуть на схему.

Ты еще помнишь как работает зонтик? Давай посмотрим, как бы это было в боевых терминах.

UI — пользователь [зонтика];

Action — набор допустимых действий;

State — состояние [зонтика];

Environment — набор внешних сервисов [сервис взаимодействия с телефоном];

Reducer — механизм, выполняющий работу по изменению состояния [зонтика] и порождающий эффекты;

Effect — задача, по завершению которой возвращается action в reducer.

Список продуктов (Часть 1)

Определение компонентов системы

Вооружившись новыми знаниями Алекс приступил к написанию кода к проектированию главного экрана приложения.

Для начала определим основные компоненты для списка продуктов. Состояние списка можно описать массивом продуктов, а в качестве действий ограничимся добавлением продукта.

struct ShoppingListState {     var products: [Product] = [] }  enum ShoppingListAction {     case addProduct }

Тогда reducer для такой системы будет выглядеть следующим образом:

let shoppingListReducer = Reducer { state, action, env in     switch action {     case .addProduct:         state.products.insert(Product(), at: 0)         return .none     } }

По аналогии опишем компоненты системы для элемента списка:

struct Product {     var id = UUID()     var name = ""     var isInBox = false }  enum ProductAction {     case toggleStatus     case updateName(String) }  let productReducer = Reducer { state, action, env in     switch action {     case .toggleStatus:         state.isInBox.toggle()         return .none     case .updateName(let newName):         state.name = newName         return .none     } }

Из примера видно, что reducer описывается функцией, в которую передается текущее состояние системы, действие и окружение. В нашем примере окружение пока не используется и reducer не возвращает никаких эффектов.

Описав и протестировав систему можно приступить к верстке UI и сбору отдельных компонентов системы.

Верстка UI

С учетом требований к поддержке iOS 13+ и полной совместимости Composable Architecture со SwiftUI, будем использовать его для верстки интерфейса приложения.

Для того, чтобы объединить компоненты в систему необходимо создать Store:

typealias ShoppingListStore = Store<ShoppingListState, ShoppingListAction>  let store = ShoppingListStore(     initialState: ShoppingListState(products: []),     reducer: shoppingListReducer,     environment: ShoppingListEnviroment() )

Store по своему поведению похож на viewModel из MVVM — передается и хранится во вью.

let view = ShoppingListView(store: store)  struct ShoppingListView: View {     let store: ShoppingListStore      var body: some View {         Text("Hello, World!")     } }

Composable Architecture предоставляет несколько полезных инструментов для работы со SwiftUI. Для того, чтобы использовать store как ObservedObject, его стоит обернуть в WithViewStore:

var body: some View {     WithViewStore(store) { viewStore in         NavigationView {             Text("\(viewStore.products.count)")             .navigationTitle("Shopping list")             .navigationBarItems(                 trailing: Button("Add item") {                     viewStore.send(.addProduct)                 }             )         }         .navigationViewStyle(StackNavigationViewStyle())     } }

На этом этапе у нас есть кнопка Add item, которая увеличивает количество продуктов в списке. События отправляются в редьюсер через метод send(Action) у стора.

Для того, чтобы отобразить список, сверстаем вьюшку для отображения продукта:

struct ProductView: View {     let store: ProductStore      var body: some View {         WithViewStore(store) { viewStore in             HStack {                 Button(action: { viewStore.send(.toggleStatus) }) {                     Image(                         systemName: viewStore.isInBox                             ? "checkmark.square"                             : "square"                     )                 }                 .buttonStyle(PlainButtonStyle())                 TextField(                     "New item",                     text: viewStore.binding(                         get: \.name,                         send: ProductAction.updateName                     )                 )             }             .foregroundColor(viewStore.isInBox ? .gray : nil)         }     } }

Композиция

У нас есть две независимые системы и их представления. Как же их соеденить? В дело вступает черная магия композиция.

enum ShoppingListAction {         // Добавляем поддержку событий для продукта по индексу     case productAction(Int, ProductAction)     case addProduct }  // Соеденям два механизма друг с другом // т.к. редьюсер это функция, редьсеры можно комбинировать let shoppingListReducer: Reducer<ShoppingListState, ShoppingListAction, ShoppingListEnviroment> = .combine(         // Добавляем редьюсеры, обрабатывающие события для каждого продукта     productReducer.forEach(                 // Key path         state: ShoppingListState.products,                 // Case path         action: /ShoppingListAction.productAction,         environment: { _ in ProductEnviroment() }     ),     Reducer { state, action, env in         switch action {         case .addProduct:             state.products.insert(Product(), at: 0)             return .none                 // Все текущие действия обрабатываются в productReducer         case .productAction:             return .none         }     } )

Комбинация редьюсеров похожа на соединение шестеренок в часах. Соединение редьюесером друг с другом позволяет обновлять верхний стейт при изменении вложенного.

Осталось обновить UI для отображения списка продуктов:

var body: some View {     WithViewStore(store) { viewStore in         NavigationView {             List {         // для каждого продукта                 ForEachStore(             // создаем store                     store.scope(                         state: \.products,                         action: ShoppingListAction.productAction                     ),             // создаем вью                     content: ProductView.init                 )             }             .navigationTitle("Shopping list")             .navigationBarItems(                 trailing: Button("Add item") {                     viewStore.send(.addProduct)                 }             )         }         .navigationViewStyle(StackNavigationViewStyle())     } }

Итого у нас ушло примерно 150 строк кода на реализацию простого списка, позволяющего добавлять продукты и помечать приобретенные товары.

Смотри в следующей серии

Часть 2 — покрываем написанное тестами (in progress)

Часть 3 — расширяем функционал, добавляем удаление и сортировку продуктов (in progress)

Часть 4 — добавляем кэширование списка и идем в магазин (in progress)

Источники

Список продуктов Часть 1: github.com

Портал авторов подхода: pointfree.com

Исходники Composable Architecture: https://github.com/pointfreeco/swift-composable-architecture