flutterで画面を固めないために

Transcript

1. freee 株式会社
 flutterで画面を固めない為に
 @GDG DevFest Kobe
 2019.12.15
2. • twitter：tomoz6o9
 • Webアプリケーションエンジニア
 ◦ RoR/React/Go
 • 大阪にも開発チームあります！
 Keita Tomozawa 友澤 啓太
 Software Engineer
 2
3. 01 画面を固めうる
 CPUヘビーな処理の例
 3 Section
4. 素因数分解をする (普通やらない)

5. 巨大なJSONのParse(とか)をする ギリある（ということにする） 

6. 02 どうすればいいか
 6 Section
7. 7 画面を固めてしまう例
 `async/await`は書けばいい訳ではない 
 • 中身がasyncになっていないので無意味 
 ◦ よく使う‘package:http’等の中身は非同期になる ように実装されているから安心
 • 固まる目安
 ◦ flutterは 通 常 60fps 出 るようになっているので 16ms以上かかるような処理ではフレーム落ちの 可能性がでてくる
 Source: https://flutter.dev/docs/perf/rendering/ui-performance

8. 8 何が起こっているか
 • Dartはシングルスレッドで動作する • async/awaitはメイン処理上の ‘concurrency’ が表現されている ◦ not ‘parallelism’ Parallelism Concurrency
9. 9 どうする：Use `compute` function
 ‘package:flutter/foundation.dart’ 内のcompute関数を使う 
 • foundation.dartをimport 
 • 該当する処理をstaticな処理にする 
 • compute関数に該当処理、計算したい引数を 渡してawait(または普通のFutureを扱うように) 
 Source: https://api.flutter.dev/flutter/foundation/compute.html

10. 10 何がおこっているか
 • DartにはIsolateというものがある ◦ JavaなどのThreadみたいなものだが、メモリを共有しない ◦ jsのwebworkerに近い ◦ 異なるisolateはparallelに動作する • メイン処理は『Main Isolate』という場所で動いている • flutterから複数のIsolateを使うことができる • 重い処理は、別のIsolateに乗せてあげることでUIフリーズを防ぐ • このIsolateを簡単に使えるようにしてくれているのがcompute関数
11. 11 注意点
 • staticメソッドしか渡せない ◦ 2つのIsolateは互いにメモリを共有しないので • 処理に必要な情報は引数として渡す必要がある ◦ 同上 • スイッチングコストは考慮すべき ◦ Isolateはいわゆる軽量スレッドほど手軽ではない ◦ はっきり止まってしまう場合以外はそこまでうま味なし
12. 12 demoをと思ったのですが、、、
 • dart padでflutter webがいじれるようになったので ◦ https://dartpad.dartlang.org/d35da88b66b3144b3784c94118f033e1 ◦ https://gist.github.com/keitatomozawa/d35da88b66b3144b3784c94118f033e1 • まだ webでは `compute` 関数がサポートされていないので割愛
13. ありがとうございました
14. スモールビジネスを、
 世界の主役に。