PWA Night vol.13 ～Webブラウザ最前線～
PWA開発者の知るべきアニメーションの3個
Brian Birtles
2014-2019はFirefoxの開発に携わっていた
W3Cメンバー
CSS Transitionを発生するためのスタイル変更
transition が便利ブラウザが何をやっているかを把握する
いくつものフレームを用意している
Style なにかのプロパティが変わった瞬間にtransitionが生成される
Layout Painiting Script 
たまにChromeまたSafariでtransitionが走るけど、Chromeのエンジニアによると、これはChromeのバグです
強制的に更新させる
getComputedStyle(hoge).transform かなり重いので注意
layoutが走ってボックスモデル再計算するため
以下のときは計算されたスタイルはない
createElement の直後 display:none CSS Transitionが終わらないことがある
removeをする
要素が
display:none になったら？要素が再生成されたら？
transition-property の計算値が変わったら？要素が削除されたら？
キャンセルされて
transitionend が発火されないmozilaのバグ報告でよくあがる
transitionrun や transitioncancel が実装予定 animationcancel もあるWeb Animations APIを使ってみる
確実に動くよ
animation.js button.onclick = () => {
// パネルを作る
const panel = document.createElement('div');
panel.classList.add('panel');
panel.textContent = 'ハロー！';
parent.appendChild(panel);
// アニメーションさせる
panel.style.transform = 'scale(0)';
getComputedStyle(panel).transform;
panel.style.transition = 'transform .5s';
panel.style.transform = 'scale(1)';
panel.animate(
{ transform: ['scale(0)', 'scale(1)'] },
{ duration: 500, easing: 'ease' }
);
}; Animation.finished キャンセルされるとリジェクトされる
CSS Transtionと併用できる
hoge.getAnimations()[Array] で取得できる CSSTransition.setKeyframes() でキーフレームを見ることができる
SPA
一部にDOMを入れるとき
トランジショングループでラップする
反応が遅くなる
すべての要素をDOMに入れる
dom-wrap-route.jsx.html<Router>
<Route render={({ location }) => (
<Photos active={location.pathname === '/'}/>
<Polls active={location.pathname === '/stories'}/>
<Finder active={location.pathname === '/notes'}/>
)}/>
</Router>描画順が減って、パフォーマンスが良くなる
Chrome Dev Summit 2019振り返り
ka2jun8
CDSとは
Chromeが考えるWebの最先端技術を発表する場
気になった発表
KeyNote
Next.jsのCEOが喋ってて驚いた
ライブでコード書き換えてlighthouseの点数上がりを確認
Protectiing users on a thriving web
セキュリティまわり
example.com
文字の間に見えない文字列が入ってると別のURLに遷移される
似ているサイトだけどこっちでは？という誘導がある
プライバシー問題
パーソナル情報をとれない
そういうAdが取れない
52%のrevenueが減る
所感
厳しい気持ちはわかる
パーソナライズのもわかる
しかしそういう時代じゃない
マーケ側にも理解してもらう
What's new with sign up and sign in on the web
2FAするときに入力サポート
指紋認証ができるように
Speed Tooling evolutions: 2019 and beyond
LCPが最重要に
CIの紹介
dockerで建てるのは大変
連続デプロイはできなくなる
Adoptive Loading - Improving the user experience for milions on low-end devices
弱い端末なら普通、良い端末なら早くなる
Lowやhighでwebpack chunkをつけてそれぞれで分けて不要なコードは落とさないように
所感
クッソ大変そう
レンダリングでユーザイベントをブロックするのか
The main thread is overworked & underpaid
Main threadはUI thred
ソレ以外のロジックはWebWorkerを使おう
Proxxを参考にしてみよう
Next generation web styling
ダークモード
縦書き
画像フィルタ
PWA and the installable web
Don't be. Annoying! OYOで使っている
Bridging the native app
最近やってること
AMP開発