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
700
flutterで画面を固めないために
keitatomozawa
December 14, 2019
Tweet
Share
More Decks by keitatomozawa
See All by keitatomozawa
1人のプレイヤーだった私が"プレイング"をやめて学んだこと / What I Learned about Engineering Management When I Stopped Being a Player
keitatomozawa
0
130
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
7k
freee技術の日 freee販売開発秘話 BizDev一体で挑む新規プロダクト開発 / How was freee sales management developed
keitatomozawa
1
23k
Concurrency Bugsについての論文を読む
keitatomozawa
0
420
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
210
Select API from Kotlin Coroutine
jmatsu
1
190
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
270
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
260
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
380
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
Featured
See All Featured
Scaling GitHub
holman
459
140k
Side Projects
sachag
455
42k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Thoughts on Productivity
jonyablonski
69
4.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How to Ace a Technical Interview
jacobian
277
23k
It's Worth the Effort
3n
185
28k
Music & Morning Musume
bryan
46
6.6k
Done Done
chrislema
184
16k
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` 関数がサポートされていないので割愛
ありがとうございました
スモールビジネスを、 世界の主役に。