Yearly Web 2019

Looking back 2019 Web technology.
at #devfest19 https://tokyo.gdgjapan.org/devfest2019

Transcript

1. Yearly Web 2019 #DevFest19 #devfest19 2019/12/14 Jxck
3. mozaic.fm ep61: Yearly Web 2019
4. 2019 年の Web を振り返る
5. Dark Mode High Contrast Mode
6. Media Queries Level 5 • prefers-color-scheme ◦ OS に設定した色を取得 • prefers-contrast ◦ コントラストを高く • prefers-reduced-motion ◦ チラつきなどの動きを抑制 • prefers-reduced-transparency ◦ 透過表現を抑制 • inverted-colors ◦ 色の反転 • forced-colors ◦ 特定の色の強制
7. <portal>
8. <portal> 8 • 画面遷移を CSS でアレンジ ◦ アニメーションできる ◦ 先読みでシームレスに • 展開できる iframe ◦ 中身を操作はできない ◦ postMessage は可能 • まだ完成とは程遠い ◦ まだバグが多い ◦ 最近 History が修正 ◦ 今日は Canary が Crash ◦ 遊ぶにはちょうど良い
9. WASM / WASI
10. WASM/WASI 2019/3: WASI • WASM というポータブルなバイナリ仕様ができた • これでシステムプログラミングもしたい • POSIX ではなくモダンな設計にしよう 2019/11: Bytecode Alliance • WASM / WASI やってこうぜ　 • Moziila, Fastly, Intel, Redhat etc 2019/12: WASM W3C Recommendation • WASM はもう安心して使ってください
11. WebAuthN
12. WebAuthN • Authenticator を使った認証 API ◦ Yubikey, Touch ID, Win Hello etc ◦ 二段階/二要素/パスワードレスなどが可能 ◦ github, google, yahoo などが対応開始 • ログインの選択肢が増加 ◦ どう実装するのが正解かは難しい ◦ ユーザも Authenticator にまだ慣れてない ◦ フローやリカバリや普及などは来年以降
13. ES/JS
14. ES2019 • Optional catch binding • JSON superset • Symbol.prototype.description • Function.prototype.toString • Object.fromEntries • Well-formed JSON.stringify • String.prototype.{trimStart,trimEnd} • Array.prototype.{flat,flatMap}
15. Private Class Fields class Counter { // Class Field (stage 3) // Private Field (stage 3) #count = 0 }
16. Nullish Coalescing/Optional Chaining // nullish Coalescing (stage 3) // param が false/0/'' の時も上書き param = param || 'default' // param が null/undefined の時だけ上書き param = param ?? 'default' // optional chaining (stage 4) o = {a: {b: {c: 10}} // error にはならない o?.a?.b?.x // undefined
17. Promise.any/allSettled // allSettled (stage 4) // 全部完了するまで実施 Promise.allSettled([ fetch('/1'), fetch('/2'), fetch('/3') ]) // any (stage 3) // どれかが成功するまで実施 Promise.any([ fetch('/1'), fetch('/2'), fetch('/3') ])
18. Intelligent Tracking Prevention
19. ITP • 合意の無いトラッキングはダメです ◦ 3rd Party Cookie などの制限へ • Safari だけではない ◦ 2019/2: Safari ITP2.1 ◦ 2019/4: Safari ITP2.2 ◦ 2019/6: Edge Tracking Protection ◦ 2019/9: Safari ITP2.3 ◦ 2019/9: Firefox Tracking Protection ◦ 2019/12: Edge Tracking Protection Update
20. Project Fugu
21. Close the Gap • Native File System API • Periodic Background Sync • Contact Picker API • SMS Receiver API • etc etc
22. DoH
23. DNS over HTTPS/TLS • DNS クエリも暗号化 ◦ プライバシー保護 ◦ 改竄の防止 ◦ 1.1.1.1 や 8.8.8.8 が対応開始 • できないことも増える ◦ フィルタリング ◦ ペアレンタルコントロール ◦ ISP からの反対 ◦ Opt-Out (canary domain)や適用範囲などの議論
24. Edge
25. MS Edge over Chromium • 2018 に EdgeHTML の開発終了発表 • Edge のレンダリングエンジンを Chromium に • ロゴもでき Beta も順調？ • 来年にはリリースされそう
26. WebPackaging
27. WebPackaging • Signed HTTP Exchange ◦ レスポンスに署名をする ◦ どこから取得しても自分のドメインで表示 ◦ AMP の URL 問題を解決 • WebBundles ◦ 複数のレスポンスを 1 ファイルにまとめる ◦ ローカルに保存して AirDrop でサイトを共有したり • WebPackaging ◦ WebBundles + Signed HTTP Exchange
28. WebTransport WebCodecs
29. ゲームで本当に欲しかったもの • 通信 ◦ Fetch でも WebSocket でも WebRTC でもない ◦ Client/Server で UDP でバイナリ送りたい ◦ WebTransport • 描画 ◦ DOM でも Canvas でもない ◦ Codec -> Video したい ◦ WebCodecs • ゲーム業界中心に割と盛り上がりつつある
30. WebComponents v1
31. WebComponents v0 -> v1 • Chrome で v0 を deprecate する計画 ◦ 2020/2 Chrome80 まで延期 ◦ reverse origin trial ◦ polyfill for v0 • HTML Modules は? ◦ JSON / HTML などまとめて Synthetic Modules の提案 ◦ 今は問題が見つかり議論中
32. Same Site Cookie
33. Same Site Cookie Lax by default • Same Site Cookie ◦ Cookie を同じサイトでしか送られなくする ◦ これまでは設定によって CSRF 対策に活用 • by default M80 ◦ Chrome 80 がデフォルトにするアナウンス ◦ 安全性を優先 ◦ しかし壊れるサイトが多く出る ◦ 来年の 2 月までに直す必要
34. TLS1.0/1.1
35. TLS1.0/1.1 Deprecate • TLS は 1.2 以降を使うべき ◦ 1.0/1.1 は削除 ◦ 各ブラウザやサービスが削除を始めている • Chrome も UI を変更 ◦ 79 (2020/1): Not Secure 表示 ◦ 80 (2020/3): Block
36. and more & more...
37. Jack thanks