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
610
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
78
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
2.5k
freee技術の日 freee販売開発秘話 BizDev一体で挑む新規プロダクト開発 / How was freee sales management developed
keitatomozawa
1
19k
Concurrency Bugsについての論文を読む
keitatomozawa
0
390
Other Decks in Programming
See All in Programming
GPU Hash Table | レイトレ合宿10
yknishidate
0
120
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
460
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
200
知られざるNaNの世界
hole
3
1.1k
Going Staff - Keynote edition
pragtob
0
340
UnJSで簡単に始めるCLIツール開発 / cli-tool-development-with-unjs
aoseyuu
2
380
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
670
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
350
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
Debugging: A Few Things You Should Know
jmatsu
1
130
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
840
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Embracing the Ebb and Flow
colly
84
4.4k
Done Done
chrislema
181
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Building an army of robots
kneath
302
42k
Optimising Largest Contentful Paint
csswizardry
31
2.9k
Why Our Code Smells
bkeepers
PRO
334
57k
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` 関数がサポートされていないので割愛
ありがとうございました
スモールビジネスを、 世界の主役に。