مرحبا اسمي Artyom. أنا رائد تطوير Flutter في Surf والمضيف المشارك للبودكاست FlutterDev.

يبلغ عمر قسم Flutter في Surf أكثر من عام. خلال هذا الوقت ، أكملنا العديد من المشاريع: من مشاريع المكاتب الصغيرة إلى التجارة الإلكترونية والمصرفية الكاملة. ربما شاهد العديد منكم على الأقل تطبيق Rigla Pharmacy. في هذه المقالة سأخبرك عن حزمة mwwm التي تم إصدارها مؤخرًا - الهندسة المعمارية التي بنيت عليها جميع مشاريعنا.

ما هي MWWM؟

MWWM هي هندسة وتنفيذ نموذج Model-View-ViewModel ، الذي قمنا بتحويله إلى Flutter in Surf. لقد استبدلنا كلمة View with Widget ، لأن طريقة العرض لا يتم استخدامها كثيرًا في Flutter وستكون أكثر سهولة للمطورين. الشيء الرئيسي الذي يسمح لك القيام به هو فصل التخطيط والمنطق ، كل من طبقات الأعمال والعرض التقديمي.

القليل من التاريخ

لماذا نستخدم MWWM في تصفح؟ دعنا نعود إلى أوائل عام 2019 ، عندما بدأنا قسم Flutter. ماذا حدث في ذلك الوقت؟

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 .