Introduction

One page summary of architecture.

Concepts

MVC

Model-View-Controller pattern is a fundamental of this architecture. A (over)-simplified explanation below.

Model:

  • “Encapsulate” business logic and rules

View:

  • Presentation of information from Model

Controller:

Client-server model

Another fundamental is client-server model. Users access the system with frontends (web or mobile app). Frontends connect to server to perform operations.

Key idea: Model-driven

All business logic is encapsulated into models, while view and controller should in most of the case not involve in business logic.

For simpler system/app, model is frontend-focused, i.e. backend serves more as a plain data store.

For complexer system, model may live on both frontend and backend, with backend offering endpoints other than standard methods (CRUDL), e.g. an Article model in a blog application, “publishing” an Article may be a non-standard method.

Frontend implementation

Directory structure 

.
└── lib/
    ├── bloc/
    │   └── some_bloc/
    │       ├── some_bloc.dart
    │       ├── some_bloc_event.dart
    │       └── some_bloc_state.dart
    ├── core/
    │   └── some_domain/
    │       ├── some_domain_model.dart
    │       └── some_domain_service.dart
    ├── pkg/
    ├── ui/
    │   ├── component/
    │   └── screen/
    │       └── some_screen/
    │           └── some_screen.dart
    ├── app.dart
    └── main.dart

Layers

Core - Here defines two constructs:

  1. Model: The main conceptual construct. It has the followings Members and Methods (traditional OOP concepts)
  2. Service: Some operations is not appropriate to wrap within a Model, for example, reading and writing from server-side

Bloc - It offers two constructs:

  1. Event: “Action” that the UI layer (user) can perform
  2. State: Resulting data that can be seen on UI

UI - In Flutter, it consists of mainly Widget (UI layout). There should be no logical code.

One-on-one →