Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
flutterで画面を固めないために
Search
keitatomozawa
December 14, 2019
Programming
1
500
flutterで画面を固めないために
keitatomozawa
December 14, 2019
Tweet
Share
More Decks by keitatomozawa
See All by keitatomozawa
freee技術の日 freee販売開発秘話 BizDev一体で挑む新規プロダクト開発 / How was freee sales management developed
keitatomozawa
1
16k
Concurrency Bugsについての論文を読む
keitatomozawa
0
360
Other Decks in Programming
See All in Programming
[スクリプト] Swiftの型推論を学ぼう
omochi
0
120
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
140
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
マイ隙間家具OSSたちのご紹介
karupanerura
2
160
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
2
200
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
上手な探索的テストとその上達方法について
matsu802
4
660
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Building a Smaller App Binary
kateinoigakukun
2
220
Introduction for Open Source Swift Workshop
giginet
PRO
0
290
Featured
See All Featured
Code Review Best Practice
trishagee
54
15k
Designing the Hi-DPI Web
ddemaree
275
33k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
The Cult of Friendly URLs
andyhume
73
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Into the Great Unknown - MozCon
thekraken
10
830
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Writing Fast Ruby
sferik
619
59k
Atom: Resistance is Futile
akmur
258
25k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
A Tale of Four Properties
chriscoyier
150
22k
Transcript
freee 株式会社 flutterで画面を固めない為に @GDG DevFest Kobe 2019.12.15
• twitter:tomoz6o9 • Webアプリケーションエンジニア ◦ RoR/React/Go • 大阪にも開発チームあります! Keita Tomozawa
友澤 啓太 Software Engineer 2
01 画面を固めうる CPUヘビーな処理の例 3 Section
素因数分解をする (普通やらない)
巨大なJSONのParse(とか)をする ギリある(ということにする)
02 どうすればいいか 6 Section
7 画面を固めてしまう例 `async/await`は書けばいい訳ではない • 中身がasyncになっていないので無意味 ◦ よく使う‘package:http’等の中身は非同期になる ように実装されているから安心
• 固まる目安 ◦ flutterは 通 常 60fps 出 るようになっているので 16ms以上かかるような処理ではフレーム落ちの 可能性がでてくる Source: https://flutter.dev/docs/perf/rendering/ui-performance
8 何が起こっているか • Dartはシングルスレッドで動作する • async/awaitはメイン処理上の ‘concurrency’ が表現されている ◦ not
‘parallelism’ Parallelism Concurrency
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 何がおこっているか • DartにはIsolateというものがある ◦ JavaなどのThreadみたいなものだが、メモリを共有しない ◦ jsのwebworkerに近い ◦ 異なるisolateはparallelに動作する
• メイン処理は『Main Isolate』という場所で動いている • flutterから複数のIsolateを使うことができる • 重い処理は、別のIsolateに乗せてあげることでUIフリーズを防ぐ • このIsolateを簡単に使えるようにしてくれているのがcompute関数
11 注意点 • staticメソッドしか渡せない ◦ 2つのIsolateは互いにメモリを共有しないので • 処理に必要な情報は引数として渡す必要がある ◦ 同上
• スイッチングコストは考慮すべき ◦ Isolateはいわゆる軽量スレッドほど手軽ではない ◦ はっきり止まってしまう場合以外はそこまでうま味なし
12 demoをと思ったのですが、、、 • dart padでflutter webがいじれるようになったので ◦ https://dartpad.dartlang.org/d35da88b66b3144b3784c94118f033e1 ◦ https://gist.github.com/keitatomozawa/d35da88b66b3144b3784c94118f033e1
• まだ webでは `compute` 関数がサポートされていないので割愛
ありがとうございました
スモールビジネスを、 世界の主役に。