FlutterとAngularでModelを再利用

2018/04/18 Flutter JP Meetup

@ntaoo

 

モチベーション

同じようなプロダクションコードおよびテストコードを３回も書きたくない！

 

  • Web App : JavaScript

  • iOS App : Swift

  • Android App : Java, Kotlin

ソリューション

すべてDartで書く

  • Web App : Angular (Dart)

  • iOS App : Flutter (Dart)

  • Android App : Flutter (Dart)

  • 共通のプラットフォーム非依存のModel (Dart)に依存

アイデア

Flutter

UI

Angular

UI

Model

 

現実は単純ではない

Flutter

UI

Angular

UI

Model

 

  • アプリによらずモデルがまったく同じとは限らない。

  • 共通化できる部分とアプリ個別の部分がある。

  • 要件による。

環境に依存するAPI

 

  • Web (ブラウザ)特有のもの

    • Window

    • LocalStorage

    • etc...

  • API clients (Browser HTTP Client, Native HTTP Client, etc...) 

  • Google Analytics, Firebase等

 

状態更新方法の差異

 

  • Flutter: SetState(() {});

  • Angular: ChangeDetection

 

再利用性のため、ModelのStateが変更された際の状態更新ロジックをできるだけ合わせたい

 

どうするか

簡単なデモ用アプリを作りました

Hacker News Reader

https://github.com/ntaoo/hacker_news_flutter_angular

  • Flutter App

  • Angular App

  • 共通モデル

DEMO

DI

  • Modelに環境依存オブジェクトをDI
    • コンストラクタインジェクション
    • 共通Interface
  • HTTP Clientの場合
    • package:http
      • Angularの場合：BrowserClient (implements Client)
      • Flutterの場合：IoClient (implements Client)

 

プラットフォーム非依存の新しいDIライブラリ？

状態更新: StreamでPush

Flutter

UI

Angular

UI

Model

 

状態更新: Flutter

StreamBuilder

  Widget _buildResults() {
    return new StreamBuilder(
      stream: hackerNewsService.results,
      builder: (context, snapshot) => new ListView(
            padding: EdgeInsets.fromLTRB(1.0, 20.0, 1.0, 0.0),
            children: (snapshot?.data ?? <Item>[])
                .map<NewsItem>((Item item) => new NewsItem(item))
                .toList(),
          ),
    );
  }

状態更新: Angular

AsyncPipe

<material-input leadingText="Filter" style="width: 100%" #input
 (keyup)="hackerNewsService.filterQuery.add(input.inputText)">
</material-input>

<article *ngFor="let item of hackerNewsService.results | async">
  <item [item]="item"></item>
</article>

共通Model (抜粋）

import 'dart:async';

import 'package:http/http.dart' as http;
import 'dart:convert';

class HackerNewsService {
  final http.Client _client;
  StreamController<String> filterQuery = new StreamController();
  Stream<List<Item>> results = new Stream.empty();

...

  HackerNewsService(this._client) {
...
}

まとめ

  • 環境依存コードはDIする

  • StreamでUIとModelをつなぐ

  • 共通Modelをpackageに切り出す

元ネタ

https://www.youtube.com/watch?v=PLHln7wHgPE

Made with Slides.com