Upgrade to Pro — share decks privately, control downloads, hide ads and more …

stand.fmにおける開発体験とパフォーマンスの向上 / Development Expe...

stand.fm
January 21, 2021

stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement

stand.fm

January 21, 2021
Tweet

More Decks by stand.fm

Other Decks in Programming

Transcript

  1. 自己紹介 Wataru Furukawa
 エンジニア @ stand.fm
 Twitter
 GitHub
 ブログ
 @kfurumiya


    @kotofurumiya
 https://sbfl.net/blog/ 
 
 2020年11月にstand.fmに入社。 
 フロントエンド中心の技術スタックを活かして主にクライアント側を担当。 
 好きな言語
 趣味
 TypeScript / Rust
 プログラミング / ゲーム / お絵描き 
 

  2. 便利コンポーネントの実装 • Portalを独自実装
 ◦ React NativeにはPortalがなかったので
 • Portal
 ◦ もとはreact-domに存在する機能


    ◦ コンポーネントを本来と異なる位置にレンダリング
 • さまざまなユースケース
 ◦ モーダル
 ◦ トースト

  3. Portal機能 • ステート管理とレンダリング位置の分離
 ◦ 例えばモーダルは画面のトップレベルに存在する
 ◦ が、実際に制御を握っているのはツリーの下層の方
 • Portalなしだと
 ◦

    Reduxなどのグローバルステートを経由して管理
 ◦ 無駄なステートが増えて混乱しがち
 • Portalありだと
 ◦ モーダルのステートを最小のスコープで管理できる