HTML5オールスターズ勉強会に参加したメモ #dotshtml5
6月13日にHTML5オールスターズ勉強会(dots)に行ってきたのでメモ。
『いつになっても議論が終わらないパフォーマンス関連のWeb標準たち』
モバイルWebを支える標準技術の進化の話。
アニメーション
- 過去: Animation Frame方式(JS->CPU)
- ex: jQuery Mobile
- 「モバイルの世界ではcpuでゴリゴリやるの良くない」
- 現在: CSS Animations方式(CSS->GPU)
- ex: OnsenUI, IonicFramework
- 未来: Web Animations方式(JS->GPU)
- ex: Polymer(0.5?)
- 「今後はこれが流行る気がします」
これから先(1年後くらい)のしごとのやり方
ネットワーク
モバイル端末でディスプレイのバックライトの次に電池を消費するのはネットワークインタフェース。
- だから普段オフになってる
- モバイルの消費電力を抑えるにはネットワークインタフェースのパワーオン期間を短くしなくてはいけない
Resource Hints
- Webページに含まれていないリソースの取得
- サーバと接続するためのスペック
- IE11でも実装している
最初Resource Prioritiesという名前で仕様策定が進められていたが、Resource Hintsに名前が変わった時lazyloadがなくなった。
lazyloadを復活させろという声も多い。
Service Workers
モニタリング
※ここちゃんとメモ取れてないので注意
クロスプラットフォームにパフォーマンス計測結果を取得できるjsのAPI。
- frame timing api
- performance group
- 特定のパフォーマンスが記録されたことを通知してくれる機能
- performance observer
「frame timing api + performance observer でまともなfirst paint時間計測apiが作れそうな気がする」
まとめ
- アニメーションはWeb Animationsの時代へ
- ネットワークはServiceWorkersに期待
- モニタリングはなんかもうごめんなさい
もっと詳しく
@_furoshikiさんのgihyoの連載
『まだまだ ServiceWorker のはなし。Background Sync も来るよ!』
今日のお話
- 最近話題のServiceWorkerを中心に新しいAPIについて(偏った視点で)駆け足で紹介します
service worker
- ブラウザの裏側で動くもの
- service worker上でjsを動かす
- apiたくさん増えすぎよくわからない
- ページの裏側で動くイベント駆動型Yet another js環境
- ページのセット(=scope)に対して登録され、バックグラウンドで動作
- 対象ページからのロードリクエストをproxyのようにインターセプトして操作できる
Cache API
httpリクエスト・レスポンスのためのオフラインストレージ
- Requestオブジェクトをキーに、Responseオブジェクトをキャッシュしておける
- ゴリッとキャッシュしておけばWebページをオフライン対応にできる
Fetch API
ネットワークからリソースを'fetch'してResponseオブジェクトを返す
- XHRよりCORS,cache controlなどをきめ細かく制御可能
ReadableStream
まとめてじゃなくてデータを受け取るための処理したい
Push API
ServiceWorkerを使ってサーバーからのpush通知を受け取る
Background Sync
今ネットにつながってなくても後でつながったときに通信してほしい
- ツイートやメッセージをオフラインで書いて次につながったとき送る
- 定期的にバックグラウンドで通信する'periodic sync'の仕様も策定中
『オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavascript SQL-like database』
オフラインWebアプリケーションとは?
W3Cに項目あり
- 当時の構成要素あんまりはやらなかった
- Application Cacheにいろいろ課題があり流行らなかった
- 現在はService Workerが出てきてオフラインWebアプリケーションがより現実的になってきている
かつてIndexed Database APIというものがあった
Indexed Databaseとは
- ブラウザに持つKVS型のローカルデータベース
- オフラインWebアプリケーションを前提としたローカルでのデータアクセス
- Application Cacheがコケたせいで、オフラインを前提としたIndexed DBが日の目を見ることがなかった
特徴(localstorageとの違い)
- 非同期API(ブロックされない)
- 大量のデータ保存に向いている(クォータはブラウザ依存)
- jsオブジェクト(関数などは除く)やバイナリデータ(Blob)が直接保存できる
- トランザクション対応
- Worker上で動作可能(もちろんService Workerでも)
indexed databaseの難解さ
そのまま使うのは辛いのでLovefieldというライブラリを使いましょう
Lovefield
Google IOで結構大きく取り上げられた
Service Worker + Indexed Database(lovefield) = Offline web application
『ついに来たぞ!Polymer1.0!!!』
Google Developer Expertの@komasshuさん
polymer
Google I/O 2015 Keynoteで紹介された数少ないWeb系技術の一つ
- Web Componentsを使いやすく
- custom tag
- template
- shadow dom
- html import
- +α
- クロスブラウザでも使えるように
- polyfill
1.0でProduction ready
Polymer is NOT a Framework
Polymerについてはよく知らないので要勉強……
『Reactがいかに素晴らしいか語る20分』
BackboneやAngularはどうも馴染めずにいて、年末にReactの公式Tutorial開始してすばらしいとなった。
独自のjsフレームワーク作ってたairbnbがそれを捨ててfacebookのReact.jsを採用した点からもアツいっぽいことがわかる。
DOM操作はなぜ難しいのか
- いつどこで書き換えるのかわからない
- DOMはどこからでも変更可能
- このタグは見えてる?
- DOMが状態を持っている(hiddenとかvisibleとか)
- どこで処理するかわからない
- DOMとコードが離れすぎ
もっと簡単にやろう
- DOMを書き換えないで常にHTML全体を生成
- EventListenerやめてonXXX使おう
HTMLとjsをまとめよう
jsx
- jsの中にhtml
サンプル→codepen.io/masuidrive
- 昔→サーバーはdomの中身を直接知ることはできなかった
- react→いままでサーバーがやってた部分をreactがやるけど、サーバーがやってた部分ではdomを直接知れない
- 昔と同じ!
Reactはコード量は多いけど、読みやすくメンテしやすい。
ロジックとビューを切り離せる。
virtualDOM
- Reactが変更前のdomを持ってる
- 差分だけ変更する
問題点
Flux
- 考え方の名前(MVCとかと一緒)
- ReactではDataさえ変更すれば画面に反映される
Wrapping up
- reakt.jsのDomはwrite once
- 読み込みも変更もできない
- コードは書くより読むが多い
- 部品(コンポーネント)化して再利用しよう
『今からはじめるECMAScript6』
@1000chさん
- 宣伝 Frontend Weekly メルマガ登録してね
javascriptとecmascript
ECMAScript = 標準化された規格
- いろいろな意見がjsに影響してきた
- cofeescript
- node
- angularjs
- etc...
ECMAScript6は正式にECMAScript 2015という名前になったらしい。
ecmascript6
- 変数宣言(var)
- letとconst 追加
- Arrow Functions
- thisを関数の外のthisから引き継ぐ?
- 1文だったらbraceも省略できる?
- importとexport
- 他のモジュールを読み込む仕組みがなかった
- Rest Parameters
- 可変長引数
- 配列作ってから渡さないといけなかったのが配列で渡さずとも関数側では配列として受け取ることができる
- Default Parameters
- デフォルト引数
- Template Strings
- stringリテラルの中に変数埋め込める
- 関数も入れれる
- Class
- ただの糖衣構文ではある
- Generator functions
- yield
- フィボナッチ数列の例見ると「おぉ」ってなるから見よう
- Proxy
- getter/setterに処理を差し込める(インターセプト)
- Promise
- 非同期処理をthenで
- ネイティブサポート
- set weakset
- map weakmap
以上は一部。他にもあるよ。
ECMAScript6とのつきあいかた
ECMAScript 6 compatibility table みればブラウザの対応状況が見れる
ES6がいかに素晴らしくてもサポートが進まないことには導入できない? -> 半分x
- トランスパイラを使う
- es6のコードを古いコードに変換して実行できるようにする
- Babel
- es6のコードを古いコードに変換して実行できるようにする
- 限定された環境で使う
- altjsで取り入れていく
- TypescriptやFlow
- Node.js 0.12~
『ハードウェアこわい』
midi
midiでブラウザ制御できるよ
スライドに夢中でメモ取れませんでした。
『Edge だけじゃない! Build 2015 で発表されたそれ以外の Web 関連技術まとめ』
@wksさん
- Universal Windows Platform
- PC上で開発したアプリを同じバイナリで複数のプラットフォームで動かせる
- Docker on Windows
- Windows 10 IoT core
- HoloLens
Visual Studio Code
- マルチプラットフォームで動作するコードエディタ
- 30以上の開発言語
- ソースコントロール(git)
- タスク実行(gulpとか)
- ランタイム nodejs,asp.net5
- ブレークポイント、ステップ実行
- 言語と機能の対応助教
- basic,better,best
Vorlon.js
リモートデバッグの。 Vorlon.jsはトイレ行っててメモ取れませんでした