コベリンの最近の取り組みとして、業務などで役立ちそうな知見を共有する会を開催することになりました。 そのついでに発表に使ったアジェンダもそのまま公開してしまおうという豪快な企画です。
※ アジェンダをそのままコピペして公開したものなので若干見にくい箇所もあるかもしれませんが、ご了承ください。
今週の知見 @mironal
TypeScript & Material UI Reactでビルドがめっちゃ重くなる
- ビルドが遅くなる
- VSCode の補完がありえんほど遅くなる
- タイプした後に5秒ぐらいしないとコード補完が出なくなったりもする
- 規模が大きくなるともっと顕著かも
vscode material ui react slowとかでググると出てくる
import 文を
import { Box } from "@mui/material"
形式じゃなくて
import Box from "@mui/material/Box"
形式で書くと改善される.
時間あったから記事にした https://blog.covelline.com/entry/2021/10/27/135534
Visual Studio Code に bracketPairColorization が実装されてた
- みんなが入れてた Extension
Bracket Pair Colorizer 2が不要になった - 10,000倍高速になった
- みんな Extension をアンインストールして VSCode 標準の機能を使おう
Rxでストリームの処理を細かく分ける @takkumattsu
Rxを今一度ちゃんと理解しようということで色々勉強している中で、 ストリームの処理を細かく分けること のメリットが見えてきたので展開します。
主に以下のメリットがあると思います
- 読みやすくなる
- 処理が細かくなることでその部分のテストが書ける
一応デメリットもあるので最後に紹介します。
例題 画面を開いたらAPIを叩いてUIに表示する
コードはGitHubにあげてあります。
var loadEmployee = PublishRelay<Void>() // rows を UI側が監視する let rows: Driver<[EmployeeRow]> init() { // 画面が表示されたログイン情報を使って // APIから社員情報を取得 // ソートして // 表示用の Entity に変換して // UIへのアウトプットへ rows = Observable.combineLatest(loadEmployee, getLoginInfo().asObservable()) .flatMap { getEmployee(token: $1.token) } .map{ let sorted = $0.sorted { $0.age < $1.age } let rows = sorted.map { $0.toRow() } return rows } .asDriver(onErrorDriveWith: .empty()) }
愚直に書くとこんな感じになると思いますが、各ストリームの処理でいろんなことをやっていて読みづらい感じがします。
これを各ストリームの処理でやることを減らすように書くとこうなります。
var loadEmployee = PublishRelay<Void>() let rows: Driver<[EmployeeRow]> init() { rows = loadEmployee .withLatestFrom(getLoginInfo().asObservable()) .flatMap { getEmployee(token: $0.token) } .map { $0.sorted { $0.age < $1.age } } .map { $0.map { $0.toRow() } } .asDriver(onErrorDriveWith: .empty()) }
こちらの方が一つの処理で何をしているかわかりやすくなりました。 自分がそうだったのですが人が書いたrxが何をしているかわからないことが多かったのは最初の例のように処理が分割されていなかった時に多かったと思います。
ただ上のコードは .map を二回呼んでいるのパフォーマンスが落ちることもあります。
意味を取るかパフォーマンスを取るかはその時々によって違うので気をつけていきたいと思います。
DroidKaigi 2021 面白かったセッション @numa08
個人的に面白い、学びになると思ったセッションの動画とサマリー
DroidKaigi 2021 - プロダクトレベルで必要になる Jetpack Compose テクニック / Yuki Anzai [JA] - YouTube
Jetpack Compose でプロダクトレベルのものを作ろうとすると、公式サイトで解説されていないさまざまな手法が必要になってきます。例えば、フォーカスのハンドリングはどうするのか、Material Design Components ではない入力フォームやボタンを作るには、入力フォームがキーボードに被らないようにするには、CameraX を Jetpack Compose で使うには、onResume や onStart のタイミングで処理を行うには、などなど。本講演では、スピーカーが実際に Jetpack Compose でプロダクトを開発するときに必要となった、公式サイトでは解説されていないテクニックを紹介します。
DroidKaigi 2021 - 動かす / 荒木佑一 [JA] - YouTube
Android には様々なアニメーション API があります。アプリにアニメーションを実装するとき、どの API を使えばいいか迷った経験はありませんか。適切な API を使い分ける判断基準が分からず何事も一つのやり方で済ませてしまってはいませんか。
Android には ObjectAnimator などの基本的な API から、それらの API に基づいて実装される Transition や ItemAnimator などの高度な API まで、数多くのアニメーション API が用意されています。中にはもはや忘れてしまって構わない API もあれば、場合によって使い分けていく API もあります。このセッションの前半で、まずそれらを整理します。
さらに、アニメーションに関係する View の性質を解説します。アプリごとに洗練されたアニメーションを作り込むためにはカスタムの実装が必要になることもあります。スムーズなアニメーションを作り込むためには基本を押さえておくことが大切です。
最後に、マテリアル デザインの Motion の章 (material.io/design/motion) にあるようなアニメーションの具体的なパターンを題材として、どの API をどのように使うべきか考えていきましょう。
DroidKaigi 2021 - Master of Lifecycle / Sato Shun [JA] - YouTube
本発表では、ActivityやFragment、ViewModelなどのコンポーネントのライフサイクルを理解し、非同期処理を適切なタイミングで終了する方法を学ぶことで、端末への負荷を減らす、メモリリークを無くすことを目指します。また、本発表の主眼として、ただ関数の使い方を理解するだけではなく、それらがなぜ必要でどのように動作するのか、メモリリークする原因などの、原理を理解することを目標としています。
DroidKaigi 2021 - Title : Let's Preview！ Jetpack Compose / mochico [JA] - YouTube
Jetpack ComposeによるUIをAndroid Studioに組み込まれたPreview機能を使ってスムーズにクオリティ高く構築するプラクティスを紹介します。
DroidKaigi 2021 - 25分で作るAndroid Lint / Nozomi Takuma [JA] - YouTube
本セッションでは、Android Lintのカスタムルール実装のハードルを下げるために、ライブコーディング形式で実装手順を紹介します。 ライブコーディングの中では、次の内容に触れる予定です。
DroidKaigi 2021 - いかにしてアプリの起動時間を改善するか / haru067 [JA] - YouTube
アプリの起動時間は、ユーザー体験を考える上で、どのアプリにも共通して言える重要な指標です。 しかし多くの人は重要だと認識しつつも、自分のアプリでは起動時にどういった処理にどの程度時間がかかっているのか、把握していないのではないでしょうか？ 本セッションでは、アプリの起動時に内部で発生する処理を解説し、各段階で発生しやすいパフォーマンス上の問題を取り上げた上で、Firebase Performance, Macrobenchmark, System Traceといったツールの活用法や、実際に改善するための作業プロセスについて話します。
