HTML5 Conference 2016に参加してきた
参加してきました。
その時の雑な自分用メモを公開します。
下記が公式のようだが現在（2018/2/25)はエラーでアクセスできない
http://events.html5j.org/conference/2016/9/
スライドまとめを作ってくれている方がいたのでそちらも参考にしたい
JavaScriptでモバイルアプリ
Cordova
WebViewを用いてUIを表現する
モバイルOSに向けてクロスプラットフォームアプリを作れる
課題はパフォーマンス
パフォーマンス問題
WKWebViewへの切り替えで対処(iPhone)
xmlhttprequestが動かないなどの問題がある
Crosswalkへの切り替えで対処(android)
Project ACE
Microsoft製
UIの幅が広がる
一番のボトルネックはJSフレームワーク
jQuery Mobileは反応も動きもあまり良くない
AngularJSもオーバーヘッドが大きい
Virtual DOMを使用することをお勧め
Angular2とReact
ReactとReact Native
JSをReactを介してReactDOMにするかReactNativeにするかの違い
ReactDOMはブラウザのDOM、Nativeはネイティブの形式に
ネイティブUIをiOS/Android/Win別に実装することになる
React Nativeは自分でコンポーネントを開発できる
React Nativeもパフォーマンスが気になる
UIスレッドは60fps
JSスレッドの処理を16msに抑えなければいけない
WebView上で動作させるよりはるかに高速
JSマルチコアを生かせない
Progressive Web Apps
ブラウザ自体をネイティブアプリに近づける
まとめ
Cordova
すでにふといレールが引かれているが新しさは無い
React Native
みんながバラバラにレールを敷いているが、刺激的で活発
Progressive Web Apps
難しさがないため広がりに期待
High Performance Web
ピクシブ
@_furoshiki
Microsoft MVP
パフォーマンス
rail
loadやanimationが重要とされていたが、Progressive Web AppsではレスポンスやAnimationが重要
CPUではなくGPUを使用するように最近推奨している
サイドメニュー
pointer-events:noneから表示した時にautoに
transform: translateZ(0)を使用するとGPUを使用する
今はwill-change: transformでレイヤーがGPUに置かれる
常時GPU使うのはよくない
移動中だけwill-change: transform、移動後にnone
will-change: opacity
Layoutを基本的に使わないようにする
スクロール
throttleでスクロールのタイミングを変えて対応
Intersection Observer
スクロールの改善
WebIDL、JSの処理は他の描画処理が何もないときに実行するようにする
requestIdlCallback
まだChromeくらいしか使えない
ブラウザの最新動向、ブラウザベンダーのこれから
Tomoya Asai
Mozilla Japan
@dynamitter
パッケージ型アプリの終焉
Firefox Open Web Appsサポート終了
Chrome Apps サポート終了
コアで2つ以上実装されなければWEB標準にならない
Edgeは遅れていてchromeとfirefoxが実装しないものはWEB標準にならない
-webkit-接頭辞のCSSの問題
User Agent で Androidバージョンが無いとバグるところも
Blotliアルゴリズムで圧縮
※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。
