次世代 Web カンファレンスのメモ - ブラウザのタブを減らすために

次世代 Web カンファレンスについてのメモ。
メモ書き＆知見に乏しいため発言の内容が正しくない可能性あります。

11:10-12:30(80) js_next

JSはなんで書いてる？

@vvakame
TypeScript → ES5でかく ES6ターゲットではない
@constellation
C++書いてるｗ
@t_wada
個人→ES6
仕事→IE8まで対応(徳が高い)
IE8は２０１６年で消滅
@teppeis
個人→ES6で書いてるbabel

ES6どうよ

@t_wada
アロー関数便利

ES6module

https://github.com/ModuleLoader/es6-module-loader
scriptタグが何個も書ける→複雑で仕様決まってない→来年の夏くらいに決まればいい
import from にURLが書ける
ふわっとレベル

https://github.com/whatwg/loader/issues/83

ES2016 以降

yield promise
https://blogs.windows.com/msedgedev/2015/09/30/asynchronous-code-gets-easier-with-es2016-async-function-support-in-chakra-and-microsoft-edge/

promise => generator/yield => async/await っていう流れはいい流れ

あとでやる: class つかってbabel で変換する

型について

@vvakame 型そんなにいらなくね
既存のコードに型を適切につけられる人はすくない
スクラッチで書き直すか新しいコードを書くときは型付けあったほうがいいレベル
定義付けのレベルが人によってまちまちで辛い
ライブラリ作者の思想と異なる型定義がPRでくる
d.tsとライブラリの作者が別という問題

WebAssembly

Mozilla asm.js

babelいつまでつかうの

ずっと使い続ける
中身は変わっていく

AST

ASTはここで定義されています。 "estree/estree" https://github.com/estree/estree

13:30-14:30(60) security

@hasegawayosuke
@kinugawamasato
@nishimunea FirefoxOS の脆弱性とか見つけてる

セキュリティ

@nishimunea サーバー側のセキュリティ対策は銀の弾丸が出尽くしてて、研究のしがいがない。新しい発見がない
@kinugawamasato XSSは新しい発見がある面白い

@nishimunea Webのセキュリティはすごく曖昧
同一生成元ポリシーについて httpとhttps のページ移動でcookieやリファラー流出している

バグハンターになるには

@nishimunea
仕様を見る
ブラウザのセキュリティアドバイザリを見る
→実装レベルでのバグがほとんど
仕様レベルでのバグを見つけるのは少ない

@kinugawamasato
誰も使ってない忘れているような昨日から探す

@nishimunea
stable のバージョンにどんどんドラフトの新しい機能をどんどん突っ込んでいくのはどうなの医療機関なんかは認可がいるようにもうちょっとWebも慎重にやったほうがいいのでは

古い機能の見つけ方

@kinugawamasato
なんだっけな

@nishimunea
hsts https://developer.mozilla.org/ja/docs/Security/HTTP_Strict_Transport_Security

レスポンスヘッダに追加してセキュリティを高める仕組み
問題: 知っている人しか使えない
→全然Webは安全になっていない

@kinugawamasato 「CSTを適切に使われると厳しい」

CSP Content Security Policy
SRI ハッシュ値で判断する
CDN

Electron

Electron file:: を積極的に使っててセキュリティ的にアレ
今までファイルはユーザが明示的に開くように想定されていたので、プログラムがファイルを開くように誘導するのは問題

CSP のこれから

現場で実際にやるのは厳しい
http://blog.hash-c.co.jp/2013/12/Content-Security-Policy-CSP.html

CSP「クロスサイト・スクリプティング(XSS)防御の切り札」

外部のJavaScriptの読み込みは禁止
HTMLソースに記述したのJavaScriptは禁止
イベント属性(onload="xxxx"など)は禁止

@nishimunea GithubにCSPアイコンをつける

セキュリティ業界のこれから

アプリケーション特有の脆弱性を調べる→人間でしかできない

脆弱性とみなされる/みなされないの判定は時代によって変わるし人間にしかできない

XSSフィルター

XSSフィルターがあることで通信の改ざんが行われる

クリックジャッキング

意図しないボタンをクリックさせたり見えないiframe を表示させたり
http://www.techscore.com/blog/2015/03/05/%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B8%E3%83%A3%E3%82%AE%E3%83%B3%E3%82%B0%E3%81%A3%E3%81%A6%EF%BC%9F/

まとめ

セキュリティは徐々に仕様策定されてきているが足りない

14:40-16:00(80) client_perf

@summerwind
@furoshiki
@ahomu

パフォーマンスの効果の測定

@ahomu
基準値：プチフリーズが無くなる、FPS、ペイントコスト、WebPageTest

対応: 原因を特定して力業でつぶす

@furoshiki
ブラウザのAPIでどこまで計測できるか
JavaScriptのAPIでリアルタイムにモニタリング
ナビゲーションタイミング(昔のデファクト)
パフォーマンスタイムライン(最近)
http://www.hcn.zaq.ne.jp/___/WEB/performance-timeline-ja.html

ヒーローイメージ問題＝ある大きな画像がそのページのコンテンツを左右するものである場合、その画像が読み込まれないとページの読み込みの体感も上がらないしどうするか的な問題 http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/

RAIL について

https://speakerdeck.com/deanohume/faster-mobile-websites

Idle って何のために必要？

一本の線として処理でしか実行してできないため、レンダリングをしている間はJSの処理は実行されない

昔はIdleで画面が真っ白になるのはOKとされている時代があった

問題:一つのタスク歯科実行できないのに読み込む優先度を決められない

setTimeout(-> {hogehoge}, 0)レンダリングをさせるために実行

0ミリ秒で登録した場合にも、いったんブラウザに戻ってからになるので、JavaScriptの実行中に溜まったイベントの処理なども行われます。
http://qiita.com/jkr_2255/items/17693ab77beea71a871c

Scheduling tasks

setTimeout の代替仕様→まだこれから

日本は国土が狭いからそんなに高速化にプライオリティが置かれない
アメリカみたいに西海岸to東海岸みたいにかんがえなくてよい

Service Worker

Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプトで、Web ページやユーザのインタラクションを必要としない機能を Web にもたらします。将来的にはプッシュメッセージ、バックグラウンド同期、ジオフェンシングなどが導入されるでしょう。
http://www.html5rocks.com/ja/tutorials/service-worker/introduction/

そこまで流行ってないし手を出せてない