いがにんのぼやき

若手WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

HTML5 Conference 2016に参加してきた

html5j.connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

下記が公式のようだが現在(2018/2/25)はエラーでアクセスできない

http://events.html5j.org/conference/2016/9/

スライドまとめを作ってくれている方がいたのでそちらも参考にしたい

qiita.com

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は遅れていてchromefirefoxが実装しないものはWEB標準にならない

-webkit-接頭辞のCSSの問題
User Agent で Androidバージョンが無いとバグるところも
Blotliアルゴリズムで圧縮

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。