Architecture composable - Un nouveau regard sur l'architecture des applications

L'architecture équilibrée de l'application mobile prolonge la vie du projet et des développeurs.

Histoire

Rencontrez Alex. Il a besoin de développer une application pour faire une liste de courses. Alex est un développeur expérimenté et définit tout d'abord les exigences du produit:

1. La possibilité de porter le produit sur d'autres plates-formes (watchOS, macOS, tvOS)
2. Régression d'application entièrement automatisée
3. Prise en charge d'iOS 13+

Alex s'est récemment familiarisé avec le projet pointfree.com , où Brandon et Stephen ont partagé leur point de vue sur l'architecture d'application moderne. C'est ainsi qu'Alex a découvert Composable Architecutre.

Architecture composable

Après avoir examiné la documentation sur l'architecture composable, Alex a déterminé qu'il avait affaire à une architecture unidirectionnelle qui correspondait aux exigences de conception. De la brochure il a suivi:

1. Diviser le projet en modules;
2. Interface utilisateur basée sur les données - la configuration de l'interface est déterminée par son état;
3. Toute la logique du module est couverte par des tests unitaires;
4. Test instantané des interfaces;
5. Prend en charge iOS 13+, macOS, tvOS et watchOS;
6. Prise en charge de SwiftUI et UIKit.

Avant de plonger dans l'étude de l'architecture, jetons un coup d'œil à un objet tel qu'un parapluie intelligent.

Comment décrire le système par lequel le parapluie est organisé?

Le système parapluie comporte quatre composants:

. : .

. .

. .

. 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)

Partie 3 - Extension des fonctionnalités, ajout de la suppression et du tri des produits (en cours)

Partie 4 - Ajouter la mise en cache de la liste et accéder au magasin (en cours)

Sources

Liste de produits, partie 1: github.com

Portail des auteurs d'approche: pointfree.com

Sources d'architecture composable: https://github.com/pointfreeco/swift-composable-architecture