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
740
flutterで画面を固めないために
keitatomozawa
December 14, 2019
Tweet
Share
More Decks by keitatomozawa
See All by keitatomozawa
大規模開発組織で「未完」の基盤を育てるために、 完璧ではないEMがいかにして価値を作るか
keitatomozawa
0
58
1人のプレイヤーだった私が"プレイング"をやめて学んだこと / What I Learned about Engineering Management When I Stopped Being a Player
keitatomozawa
0
140
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
8.4k
freee技術の日 freee販売開発秘話 BizDev一体で挑む新規プロダクト開発 / How was freee sales management developed
keitatomozawa
1
23k
Concurrency Bugsについての論文を読む
keitatomozawa
0
430
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
CSC509 Lecture 06
javiergs
PRO
0
260
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
580
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
860
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
CSC509 Lecture 04
javiergs
PRO
0
300
CSC509 Lecture 03
javiergs
PRO
0
330
Go言語はstack overflowの夢を見るか?
logica0419
0
260
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Fireside Chat
paigeccino
40
3.7k
Mobile First: as difficult as doing things right
swwweet
224
10k
GitHub's CSS Performance
jonrohan
1032
470k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Site-Speed That Sticks
csswizardry
11
900
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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` 関数がサポートされていないので割愛
ありがとうございました
スモールビジネスを、 世界の主役に。