FlutterKaigi2024

https://2024.flutterkaigi.jp/

Flutter Job Board
https://2024.flutterkaigi.jp/job-board

基調講演
https://github.com/itsjustkevin

https://2024.flutterkaigi.jp/session/a1ba9bfd-87c8-47b2-b5af-a50e0c64c300

Dart Timer cancel
https://api.flutter.dev/flutter/dart-async/Timer/cancel.html

Dart delayed cancel できない
https://api.flutter.dev/flutter/dart-async/Future/Future.delayed.html

Cooperative canncellation

https://developer.apple.com/documentation/swift/task/cancel()
https://kotlinlang.org/docs/cancellation-and-timeouts.html#cancelling-coroutine-execution

Flutter からネイティブのコードを呼ぶ

https://api.flutter.dev/flutter/services/MethodChannel-class.html

これはバイナリデータの送受信なので、シリアライズ化できないと呼べない

シリアライズ化のために処理を分割する

• Start
• Wait
• Cancel

キャンセルのために Start と Wait を分ける

3つの Platform Method を Channel にして提供する

Riverepod での cancel
https://riverpod.dev/docs/concepts/modifiers/auto_dispose

非同期処理の中だけ発生するコンテキストを扱える

https://api.flutter.dev/flutter/dart-async/Zone-class.html

https://2024.flutterkaigi.jp/session/000db4b0-4065-48ed-8925-afea039e2c72

https://skia.org/

https://docs.flutter.dev/perf/impeller

https://github.com/flutter/engine/tree/main/impeller

Compose Multiplatform は Skiko 経由で Skia を利用してレンダリングしている

https://github.com/JetBrains/skiko

明示的に Skiko を使っていると書いてある箇所が見つからなくて、リリースノートに記載があった

The version of Skia used by Compose Multiplatform, via Skiko, has been updated to Milestone 126.

https://www.jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-170.html#across-platforms

https://speakerdeck.com/fastriver/renderobjectyorixia-noshi-jie-noflutter-5a78ca8b-cc6e-4e0d-b08e-94e26419d40b

Flutter からは Android/iOS それぞれのデバイス抽象層へ命令する

Android - Vulkan
https://source.android.com/docs/core/graphics/implement-vulkan

iOS - Metal
https://developer.apple.com/documentation/metal

EntityPass はこの辺り？
https://chromium.googlesource.com/external/github.com/flutter/engine/+/refs/heads/flutter-3.17-candidate.6/impeller/entity/entity_pass.cc

RenderPass
https://api.flutter.dev/impeller/classimpeller_1_1_render_pass.html

Flutter がレンダリングする直前の情報

Flutter Skia レンダリング時に動的にシェーダーをコンパイルするため、動作が重くなるような現象が発生していた

Impeller のレンダリングフローは事前にコンパイルしてある、ということ？

Impellerc によって事前にビルドされるから Skia に比べて高速

https://2024.flutterkaigi.jp/session/b4484026-c80b-48ae-a518-f9c14f04f5a8

https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

Flutter GoldenTest から画面の差分をチェックしてその差分を Figma REST API で Figma にフィードバックする

https://www.figma.com/developers/api

Figma から出力するもの

• 画像
• レイヤー構造の Json

これらを入力とし Cursor の生成 AI を活用してコード生成する
https://www.cursor.com/

https://2024.flutterkaigi.jp/session/f6931b4e-30db-4a4e-9582-7a54c135b740

https://eigosapuri.jp/about/?vos=evpcsttgk02x0105174_240220&utm_source=google&utm_medium=cpc&utm_campaign=bsc&utm_content=nonbrand_p-max&utm_term=_&gad_source=1&gclid=CjwKCAiArva5BhBiEiwA-oTnXQ3VsYYa-VMV-4KU7bxTVfgmpDJSl3ArZOfGYnxPpv99eyOJBgHOyRoCrqcQAvD_BwE

https://apps.apple.com/jp/app/スタディサプリ-for-school/id1479522856
https://play.google.com/store/apps/details?id=jp.studysapuri.for_school&hl=ja&pli=1

Native からの Flutter へリプレイス

• 新規機能開発
• リファクタリング <- この枠内でリプレイスに挑戦した

• Android add to App <- 一部 Flutter
• Flutter(Android) チーム
• iOS + Android = Flutter Mobile チーム
• Flutter Mobile チームが Web の一部開発
• Flutter Mobile & Web チームに

https://docs.flutter.dev/add-to-app

https://docs.flutter.dev/platform-integration/web/building

https://github.com/flutter/flutter/issues/93404

https://2024.flutterkaigi.jp/session/f4966e95-b266-4edc-abde-f61c359b3a40

https://aupay.auone.jp/

Native アプリへの Flutter 部分適用 Add to app

https://apps.apple.com/jp/app/au-pay-チャージや残高確認できるauのスマホ決済アプリ/id862800897
https://play.google.com/store/apps/details?id=jp.auone.wallet&hl=en
https://aupay.auone.jp/contents/sp/guide/appli.html

• Flutter module を作成
• Flutter build aar を作成
• gradle の設定と FlutterEngine の起動を組み込む

https://santhosh-adiga-u.medium.com/flutter-bloc-pattern-3e9f9880d294

https://medium.com/@muhammadnaqeeb/cubit-state-management-in-flutter-cb3d357fd0f0

au PAY

• RxSwift
• オフショア中心
• BLoC と相性が良いと判断

モンゴルの会社
https://www.mobicom.mn/

Native から Flutter へのリプレイス経験あり

https://api.flutter.dev/javadoc/io/flutter/embedding/engine/FlutterEngine.html
https://api.flutter.dev/javadoc/io/flutter/embedding/android/FlutterActivity.html

au PAY for BIZ で Flutter へのフルリプレイス

https://apps.apple.com/jp/app/お店用-au-pay-for-bizアプリ/id1455814357
https://play.google.com/store/apps/details?id=com.lakala.kddi.cloud.payment

Riverpod の DI でテスタビリティを担保する
それ以上の過剰な DIP は適用しない

リプレイスに伴い OS 間の差異は Flutter での表現に合わせて統一するようにした

Flutter へのリプレイスは全面採用から検討を始める
次に部分採用を検討する。部分採用を評価して全面採用か部分採用を元に戻すことを検討する

ニッチな機能がどれくらいあるか
多いのであれば Flutter 採用のメリットは小さくなる

一定レベルの Flutter エンジニアを確保できるか

• コードレビューが適切にできるか

Flutter エンジニアの確保が困難になっているので自社メンバーの育成を視野に入れる段階では

オフショア開発の３三交代制で24時間開発が回っている状態を実現
フィードバックループの速度が三倍になる

https://2024.flutterkaigi.jp/session/dd12ee26-4d87-4081-a01a-621411231a94

https://open-ci.io/

https://shorebird.dev/

Shorebird は Flutter を fork して update 機能を入れた
Flutter の Issue としては Open のまま残っている

https://github.com/flutter/flutter/issues/14330

Shorebird CLI は flutter コマンドをラップしている

shorebird init -> release -> preview -> patch -> rollback

Upload Artifacts
Shorebird's Google Cloud Storage

Pro plan $20/month 50,000 patch

1patch のカウントは Activeユーザ数分（実際にパッチが適用された回数）

https://github.com/shorebirdtech/setup-shorebird

https://2024.flutterkaigi.jp/session/72c94df3-82ee-41ce-8b7f-d575eef2e9d9

https://www.winticket.jp/

https://dart.dev/language/isolates

Dart はシングルスレッド
イベントループとキューで処理

• イベントキュー
• マイクロタスクキュー

• 同期処理 Isolate で別スレッドを作る
• 非同期処理 マイクロタスクキュー
  • 非同期処理内でも同期処理があったら Isolate を使うべき

Isolate の利用を推奨がドキュメントに記載あり。 I/O をブロックするような処理が対象

• Parsing and decoding exceptionally large JSON blobs.
• Processing and compressing photos, audio and video.
• Converting audio and video files.
• Performing complex searching and filtering on large lists or within file systems.
• Performing I/O, such as communicating with a database.
• Handling a large volume of network requests.

Isolate の生成コストは高い
そのため、不適切な利用は処理を遅くする可能性がある

https://2024.flutterkaigi.jp/session/02ab1faa-508e-418e-a682-6443148fba5c

https://pub.dev/documentation/golden_toolkit/latest/

https://2024.flutterkaigi.jp/session/ed95a319-5971-4335-b285-390768dc1be7

https://apps.apple.com/us/app/japanana-japanese-grammar/id6476447175

https://api.flutter.dev/flutter/widgets/RootRestorationScope-class.html

https://api.flutter.dev/flutter/widgets/RestorationMixin-mixin.html

Android では Don't keep activities を有効にして確認する

このスライドは Flutter Deck で作成
https://flutterdeck.dev/

https://2024.flutterkaigi.jp/session/6ccbb95b-ddaf-460e-904b-2f91a5ef8d5f

これかな
https://github.com/flutter/flutter/issues/129757

Flutter からのネイティブ処理は Platform Channel がある

Dart には FFI がある

https://dart.dev/interop/c-interop

FFI は Platform ごとの処理に手間がかかる

https://github.com/dart-lang/samples/blob/main/ffi/hello_world/hello.dart

hook スクリプト

関係ある？
https://github.com/flutter/flutter/issues/146264

https://pub.dev/packages/native_toolchain_c

git コミットハッシュをビルド時に埋め込むようなこともできる

まだ experimental