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
   

   View Slide

2. View Slide

3. mozaic.fm
   ep61: Yearly Web 2019
   

   View Slide

4. 2019 年の Web を振り返る
   

   View Slide

5. Dark Mode
   High Contrast Mode
   

   View Slide

6. Media Queries Level 5
   ● prefers-color-scheme
   ○ OS に設定した色を取得
   ● prefers-contrast
   ○ コントラストを高く
   ● prefers-reduced-motion
   ○ チラつきなどの動きを抑制
   ● prefers-reduced-transparency
   ○ 透過表現を抑制
   ● inverted-colors
   ○ 色の反転
   ● forced-colors
   ○ 特定の色の強制
   

   View Slide

7. 
   

   View Slide

8. 
   8
   ● 画面遷移を CSS でアレンジ
   ○ アニメーションできる
   ○ 先読みでシームレスに
   ● 展開できる iframe
   ○ 中身を操作はできない
   ○ postMessage は可能
   ● まだ完成とは程遠い
   ○ まだバグが多い
   ○ 最近 History が修正
   ○ 今日は Canary が Crash
   ○ 遊ぶにはちょうど良い
   

   View Slide

9. WASM / WASI
   

   View Slide

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 はもう安心して使ってください
    

    View Slide

11. WebAuthN
    

    View Slide

12. WebAuthN
    ● Authenticator を使った認証 API
    ○ Yubikey, Touch ID, Win Hello etc
    ○ 二段階/二要素/パスワードレスなどが可能
    ○ github, google, yahoo などが対応開始
    ● ログインの選択肢が増加
    ○ どう実装するのが正解かは難しい
    ○ ユーザも Authenticator にまだ慣れてない
    ○ フローやリカバリや普及などは来年以降
    

    View Slide

13. ES/JS
    

    View Slide

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}
    

    View Slide

15. Private Class Fields
    class Counter {
    // Class Field (stage 3)
    // Private Field (stage 3)
    #count = 0
    }
    

    View Slide

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
    

    View Slide

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')
    ])
    

    View Slide

18. Intelligent
    Tracking
    Prevention
    

    View Slide

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
    

    View Slide

20. Project Fugu
    

    View Slide

21. Close the Gap
    ● Native File System API
    ● Periodic Background Sync
    ● Contact Picker API
    ● SMS Receiver API
    ● etc etc
    

    View Slide

22. DoH
    

    View Slide

23. DNS over HTTPS/TLS
    ● DNS クエリも暗号化
    ○ プライバシー保護
    ○ 改竄の防止
    ○ 1.1.1.1 や 8.8.8.8 が対応開始
    ● できないことも増える
    ○ フィルタリング
    ○ ペアレンタルコントロール
    ○ ISP からの反対
    ○ Opt-Out (canary domain)や適用範囲などの議論
    

    View Slide

24. Edge
    

    View Slide

25. MS Edge over Chromium
    ● 2018 に EdgeHTML の開発終了発表
    ● Edge のレンダリングエンジンを Chromium に
    ● ロゴもでき Beta も順調？
    ● 来年にはリリースされそう
    

    View Slide

26. WebPackaging
    

    View Slide

27. WebPackaging
    ● Signed HTTP Exchange
    ○ レスポンスに署名をする
    ○ どこから取得しても自分のドメインで表示
    ○ AMP の URL 問題を解決
    ● WebBundles
    ○ 複数のレスポンスを 1 ファイルにまとめる
    ○ ローカルに保存して AirDrop でサイトを共有したり
    ● WebPackaging
    ○ WebBundles + Signed HTTP Exchange
    

    View Slide

28. WebTransport
    WebCodecs
    

    View Slide

29. ゲームで本当に欲しかったもの
    ● 通信
    ○ Fetch でも WebSocket でも WebRTC でもない
    ○ Client/Server で UDP でバイナリ送りたい
    ○ WebTransport
    ● 描画
    ○ DOM でも Canvas でもない
    ○ Codec -> Video したい
    ○ WebCodecs
    ● ゲーム業界中心に割と盛り上がりつつある
    

    View Slide

30. WebComponents v1
    

    View Slide

31. WebComponents v0 -> v1
    ● Chrome で v0 を deprecate する計画
    ○ 2020/2 Chrome80 まで延期
    ○ reverse origin trial
    ○ polyfill for v0
    ● HTML Modules は?
    ○ JSON / HTML などまとめて Synthetic Modules の提案
    ○ 今は問題が見つかり議論中
    

    View Slide

32. Same Site Cookie
    

    View Slide

33. Same Site Cookie Lax by default
    ● Same Site Cookie
    ○ Cookie を同じサイトでしか送られなくする
    ○ これまでは設定によって CSRF 対策に活用
    ● by default M80
    ○ Chrome 80 がデフォルトにするアナウンス
    ○ 安全性を優先
    ○ しかし壊れるサイトが多く出る
    ○ 来年の 2 月までに直す必要
    

    View Slide

34. TLS1.0/1.1
    

    View Slide

35. TLS1.0/1.1 Deprecate
    ● TLS は 1.2 以降を使うべき
    ○ 1.0/1.1 は削除
    ○ 各ブラウザやサービスが削除を始めている
    ● Chrome も UI を変更
    ○ 79 (2020/1): Not Secure 表示
    ○ 80 (2020/3): Block
    

    View Slide

36. and more & more...
    

    View Slide

37. Jack
    thanks
    

    View Slide