Hallo, ich heiße Artyom. Ich bin der Flutter Development Lead bei Surf und der Co-Moderator des FlutterDev-Podcasts.

Die Flutter-Abteilung bei Surf ist über ein Jahr alt. In dieser Zeit haben wir mehrere Projekte abgeschlossen: von kleinen Büroprojekten bis hin zu vollwertigem E-Commerce und Banking. Zumindest viele von Ihnen haben die Rigla-Apotheken-App möglicherweise bereits gesehen. In diesem Artikel werde ich Ihnen etwas über das kürzlich veröffentlichte mwwm-Paket erzählen - die Architektur, auf der alle unsere Projekte aufbauen.

Was ist MWWM?

MWWM ist die Architektur und Implementierung des Model-View-ViewModel-Musters, das wir in Surf an Flutter übertragen haben. Wir haben das Wort "Ansicht" durch "Widget" ersetzt, da "Ansicht" in Flutter nicht sehr häufig verwendet wird und für Entwickler intuitiver ist. Das Wichtigste, was Sie tun können, ist die Trennung von Layout und Logik, sowohl der Geschäfts- als auch der Präsentationsebene.

Ein bisschen Geschichte

Warum verwenden wir MWWM in Surf? Gehen wir zurück zu Anfang 2019, als wir unsere Flutter-Abteilung gründeten. Was ist damals passiert?

Flutter : , . , , ? , .

Android- Surf Flutter . , . , .

2019 ( ). , : BLoC, Redux, Vanilla, MobX . BLoC Redux. , , .

, BLoC Redux ? ?

BLoC?

Business Logic Component — . , , « » , - Dart — . Dart - (, Flutter for Web Angular Dart, ). . . «»: ? ? UI ?

Bloc Felix Angelov. flutter_bloc. , . , , , . .

Redux?

— Android . Clean Architecture, MVVM. - - . Redux : , Android- Rx CleanArchitecture.

Surf, , Android- Surf Flutter-. Flutter- Android, , , . Model – Widget – WidgetModel.

Model-Widget-WidgetModel

.

GitHub. .

• Widget-UI — .
• WidgetModel — UI .
• Model — . . Interactor’ WM.

.

Widget — . – , if (), , – loader. : , — WidgetModel. , .

, MwwmWidget ( , ) Flutter-. ? , .

WidgetModel – , , . ? . , . , , mapping , . -, , ViewModel.

.

, , . Widget . WidgetModel. , WM . - Stream’.

class SomeWidgetModel{

    final _itemsController = StreamController<List<Items>>.broadcast();
    get items => itemsController.stream;
}

( ) -. BLoC’. input/output. input — , output — , UI. , — -. : , - ; ..

. StreamBuilder . , .

Stream<bool> get isBtnDisabled => btnController.stream;

, 5 . , , , . , . , - . Widget+WidgetModel , .

, - – . ? Flutter, , . , stateless-.

WM? -. . - , WM, . , . , .

W-WM

-? — . - . ( Surf), . StreamBuilder’.

//…
child: StreamBuilder<Item>(
  stream: wm.item,
  builder: (ctx, snapshot) => //...
),

, Widget WidgetModel . . , , pub.dev.

Relation

MWWM Relation. Relation – , -. . StreamedState Action. Relation .

  final toggleAction = Action<int>();

  final contentState = StreamedState<int>(0);

//…
subscribe(toggleAction.stream, (data) => contentState.accept(data));

. MWWM ErrorHandler, WM. WidgetModel , ( ), . WM ...HandleError().

subscribeHandleError(someAction, (data) => doOnData());

doFutureHandleError(someFuture, (data) => doOnData());

ErrorHandler .

Model

Model – , . - - .

.

Model — . : perform listen. Performer’, .

, WM : «Model, ( ) . » . , .

Change

, - , . , . data- Kotlin.

class Authenticate extends FutureChange<Result> {
  final String name;

  Authenticate(this.name);
}

Performer

– Performer. Performer – . — UseCase. . Change – , , Performer – , , , Change. , -, . - -.

– . , - . Performer Change.

class AuthPerformer extends FuturePerformer<Result, Authenticate> {

  final AuthService authService;

  AuthPerformer(
    // ,     
    this.authService,
  );

  Future<Result> perform(Authenticate change) {
    return authService.login(change.name);
  }
}

,

? , . - , . – , . Change. Model .

: Performer, .

-

. MWWM , - . , . Surf CleanArchitecture, pet- , . , . MWWM , , .

Surf

Surf – .

surf_mwwm. , GitHub.

:

• injector — DI. InheritedWidget. .
• relation — .
• mwwm —
• surf_mwwm — , .

, . , , , , . .

, , . , , . .

, .

, MWWM:

:

• (UI, Presentation Logic, Business Logic).
• .
• .
• .

:

• , « ».
• .

MWWM – . — SurfGear. , Surf.

pub.dev:

• mwwm
• relation
• render_metrics

Surf .