Salut, je m'appelle Artyom. Je suis le responsable du développement Flutter chez Surf et le co-animateur du podcast FlutterDev.

Le département Flutter de Surf a plus d'un an. Pendant ce temps, nous avons réalisé plusieurs projets: des petits projets de bureau au commerce électronique et bancaire à part entière. Au moins beaucoup d'entre vous ont peut-être déjà vu l'application de pharmacie Rigla. Dans cet article, je vais vous parler du package mwwm récemment publié - l'architecture sur laquelle tous nos projets sont construits.

Qu'est-ce que MWWM?

MWWM est l'architecture et l'implémentation du modèle Model-View-ViewModel, que nous avons transféré à Flutter dans Surf. Nous avons remplacé le mot View par Widget, car View n'est pas très souvent utilisé dans Flutter et il sera plus intuitif pour les développeurs. La principale chose qu'il vous permet de faire est de séparer la mise en page et la logique, à la fois les couches métier et présentation.

Un peu d'histoire

Pourquoi utilisons-nous MWWM dans Surf? Revenons au début de 2019, lorsque nous avons lancé notre département Flutter. Que s'est-il passé à ce moment-là?

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 .