JavaScript
Web
googleio
フロントエンド
GoogleIO2019

Google I/O 2019 フロントエンドまとめ


Web 新プロダクト / 新技術


  • web.dev というサイト


    • https://web.dev

    • フレームワーク、パフォーマンス、Web各種技術など載っているグーグルが作ったまとめサイト

    • 全部無料で学べる

    • 今フレームワークはReact.jsだけけど、今後追加予定

    • 実践 Codelab、その場で試すことはできます

    • 翻訳は今進行中らしい



  • Lighthouse Performance Budgets



  • PWA Desktop


    • PWA 今デスクトップOSにインストールできます



  • Trusted Web Activity


    • https://developers.google.com/web/updates/2019/02/using-twa

    • Chrome Custom Tab のアップグレード版、タイトルバーがない

    • よく見られるユースケースは、現存のアプリの中で、ファミリーアプリのウェブ版を入れて、ネイテイブ感を作る

    • ウェブページにはschema urlでアプリにメッセージ送れます

    • アプリは URL の後ろにパラメータ付けるならウェブページにメッセージ送れます



  • Perception Toolkit


    • https://web.dev/perception-toolkit

    • Shape Detection APIを使ってるツールキット

    • バーコード、実物、画像を取得してウェブサイトのmetaから取った情報と比較して、関連カードを出す

    • APIまだ使えないブラウザにWeb Assemblyを使う、互換性を保つ



  • Puppeteer with Firefox


    • Firefoxが使えるようになりました

    • npm i puppeteer-firefox




Web にもうすぐ使えるもの / 新Web API / 新 JavaScript API など


Chrome Only (w3cにまだ書いてない)


  • Lazy loading


    • 画像とiframeの中 loading="lazy" のアトリビュートを追加すると遅延ロードくれます

    • Chrome 75 から



  • Portals


    • https://web.dev/hands-on-portals

    • 新たな要素、iframeみたい、埋め込む内容に切り替えるスムーズ体験を提供する

    • Chrome Canary 使える



  • Web Packaging


    • https://github.com/WICG/webpackage

    • ウェブサイトをサインしてパッケージして、どこでもデプロイして、ブラウザはどこでも同じサイトとみなす(p2pの感じ)

    • 例はまだない



  • Paint Holding


    • 同じサイト画面遷移時白い画面は出ない

    • Chrome Canary 見れる



  • Cookie は Chrome 76 からちょっと変わる



Chrome今開発中もの


関連Session: What’s New with Chrome and the Web (Google I/O ’19)


独自APIを開発するから海外でも好評得ていないらしい…


Web API



  • 開発中


    • ウェブシェア -> Web Share API (Shipped) -> Web Share Target (v2) (Working)

    • media control on System level -> mediaSession API (Shipped)

    • バーコード、画像、実物探知 -> Shape Detection API (FaceDetect / BarcodeDetect both shipped in Chrome Canary)

    • App Badging (アプリアイコンの数字) -> window.Badge / window.ExperimentalBadge (Origin Trial 78)

    • Wake Lock -> (Screen wake lock / System wake lock) -> Wake Lock (In Development)

    • ファイル -> File Picker -> chooseFileSystemEntries (提案中 / In Development)

    • シリアルデバイスサクセス(プリンターなど) -> Serial API (提案済み)

    • HID デバイスアクセス -> WebHID (提案済み / In Development)

    • 連絡帳サクセス -> Contacts Picker (提案済み / Experimenting)

    • インストールしたフォントをアクセス -> 提案済み / In Development




  • もうすぐ実装します


    • Clipboard API with Image (クリップボードAPIに画像も添付できる)

    • SMS基づくOTP検証

    • Notification Triggers API (時間基づくプッシュ通知)




上記内容年内実装

Chrome で試すまたフィードバックは下記サイトまで

https://developers.chrome.com/origintrials

Web API は Project huguで 確認できます Project hugu


Web API スケジュール


関連Session: Unlocking New Capabilities for the Web (Google I/O ’19)



JavaScript API / Syntax


  • Class のプライベート属性 (実装済み) - working on privatter method and getters and setters

  • String.prototype.matchAll (実装済み)

  • Number spearater (Chrome 75)

  • BigInt (Chrome 74 と Firefox nightly と node 実装済み & transpiler available)

  • Array.prototype.flat (in chrome firefox safari node)

  • Entries から Object に転換する Object.entriesの逆操作 (in chrome firefox safari node )

  • globalThis (in chrome firefox safari node )

  • Array.sortの安定性を標準の中に書くように努力してる

  • 多言語について


    • Intl.RelativeTimeFormat -> today yesterday tomorrow (in chrome firefox node)

    • Intl.ListFormat -> ex. A, B or C (in chrome node)

    • Intl.DateTimeFormat -> ex. May, 5 (in chrome)

    • Intl.Locale -> Internal Translation (in chrome node)



  • Promise.allSettled (in chrome 76 nightly) / Promise.any

  • WeakRef and finalizers (in chrome with flags) & 標準の中に書くように


関連Session: What’s new in JavaScript (Google I/O ’19)



経験シェアとパフォーマンス

Chrome はフレームワークなどスケジュールAPIを提供したい、

連続実行、レンダリングの時もユーザーの操作受けるように。

Google はパフォーマンスにやり方とアドバイス


  • 段階的SSR

  • JS完全ロード前のクリック事件を取るように

  • 一定サイズの初期JS

  • インタラクション駆動型遅延ロード

  • 依存関係グラフ、宣言型機能ロード、同時にデータを取る

Google Important Piece

Google のパフォーマンスアドバイス


  1. 遅延ロード

  2. レスポンシブ画像(ピクセル密度による画像をロードする)

  3. 画像CDN

  4. サードパーティのJSを遅延する

  5. 高価なライブラリを削除する

  6. コード分割

  7. Web Fontの白いフラッシュを避ける

  8. Prefetch

  9. Preconnect

  10. Preload

  11. クリティカルCSS(はじめの画面だけ必要のCSSをロードする)

  12. gzip -> Brotli

  13. 端末、ブラウザによるJSをロードする

また、Lighthouse を使って、性能予算を設定する

Performance Suggestion


関連Session:

Elevating the Web Platform with the JavaScript Framework Community (Google I/O ’19)

Speed at Scale: Web Performance Tips and Tricks from the Trenches (Google I/O ’19)



その他

他のパフォーマンスユースケース、ノウハウ、Web内容はここへ

https://www.youtube.com/playlist?list=PLNYkxOF6rcIATmAmz7HcCzongGvQEtx8i