Help us understand the problem. What is going on with this article?

第66回 HTML5とか勉強会「Google I/O 2016特集」

More than 3 years have passed since last update.

Official

Google I/O 2016年振り返り 及川卓也(Increments)

  • slide
  • Moble FirstからAI Firstへ
  • TPUとかプロセッサを開発可能なのはGoogleだけ
  • webは死んだか?
    • AndroidInstantApps
    • ChromebookからAndroidアプリが動作
    • return the web
    • webとアプリと相互互換
  • physicalWebとBeacon

PWAの開発パターン PRPL 小松健作(NTT Communications, Palo Alto office)

  • slide
  • PRPL
    • デザインパターンの一種
    • bundleファイルの肥大化の解決
  • PRPLは4つのテクノロジーで構成されている
    • Push
    • Render
    • Pre-cache
    • Lazy-load
  • 新しいテクノロジーを使用
    • CustomElement
    • HTMLImports
    • HTTP/2
    • ServiceWorker
  • サンプル
  • Toolbox
  • 実際PRPL使えるか? -> 使えない
    • HTTP/2のpushはまだ未対応
    • bower使われてt、npm&webpackより煩わしい
    • HTTP/2のpushはブラウザキャッシュと愛称悪い
  • でも・・・
    • Bundleはベストプラクティスじゃない
    • 現状ツールがPRPLを取り入れていくことが必要

Webプラットフォーム周り@I/O 2016 矢倉眞隆

ExtensibleWeb

  • Web技術でWebを拡張していく
  • 例: sw-toolbox
  • 遅いことをさせないようにメインスレッドを止めない
    • 必要な時に必要なものを提供
  • 止めてしまいがちなパターンには新しいAPIを提供
    • 例:IntersectionObservers
  • これからどうなっていく?
    • 標準だととっつきづらいものが多くなるかも
    • ライブラリで解決出来るレイヤーは優先度が低くなる
    • パフォーマンスを向上するAPIが増えていく

I/Oで紹介されたAPI

  • CredentialManagementAPI
    • パスワードマネージャーを透過的にAPIを作ってる
    • 自動ログインが可能になる
  • PaymentRequestAPI
    • モバイルでの決済時に打たなくてもいいようにする。
    • 決済サービスとも連携可能
  • CSS Houdini
    • CSSまわりのあれこれをJSのフックをつける
    • TypedOM:文字列操作ではないJSからのCSS操作
    • CustomProps:Variable2.0(イニシャライザがつく)
    • PaintAPI:描画用のコンテキストを提供
  • AMP
  • RichCards
    • Ruch Snippetsからの拡張

モバイルWebパフォーマンスのための3つのTIPS - High Performance Web UI 川田寛(ピクシブ株式会社)

  • slide
  • 2016年 Progressive Web App
  • 基本はUI操作
  • 同一ページ内でUIがコロコロ姿を変える。
  • RAILでいうRAを重要視される。(従来のwebはL)
  • 鉄板のUIコンポーネント
    • SideNavigation
    • SwipableCards
    • Expand & Collapse
  • SideNavigationをスルスル表示させたい
    • pointer-events: none (タップイベントを監視しない事で速度が速くなる。autoは最低限にイベント監視)
    • transrate(z): メモリ上でTextureを置いて、GPUが処理する。
    • will-change: transform;
    • transform: translateX(-102%)
    • willl-cahnge:opacity
  • SwipableCardsをスルスル表示させたい
    • will-change:transform;
    • JSだとゲームループを応用
  • Expand & Collapseをスルスル表示させたい
    • これもtransform
  • 参考(Rendering performance)
  • CSSTrigers

Firebase I/O あんどうやすし(株式会社カブク)

WebFundamentalsの翻訳者になりませんか? 田中洋一郎(Increments株式会社/Google Developers Expert Web担当)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away