HTML5 Conference 2017に参加してきた
参加してきました。
その時の雑な自分用メモを公開します。
公式サイトは今は見れないっぽい。 http://events.html5j.org/conference/2017/9/
以下に発表スライドをまとめてくれている人がいます。
qiita.com
任天堂
2011年入社 津田 宗孝 2013年入社 堀川 雄司
任天堂とWeb?
公式サイトだけじゃない！
世界中の人と繋げるためにスマートフォンとWEB
Webkitをベースのブラウザコンポーネント
ニンテンドーアカウントの作成はウェブ画面
メールアドレスだけ入力すれば、スマートフォンから他の情報の登録ができるようになる
Nitendo SwitchとWeb
Switchのスクリーンショットで、投稿する画面はウェブアプリケーション スプラトゥーンの武器の説明はHTML、試し打ちのスーパーの説明やバトルのルール説明など 文字が多いところはWEB、WEBだと多言語対応がしやすいため アームズのキャラクターのところも？
みまもりSwitchは普通のネイティブ
Nintendo eShopができるまで
2015年末
eShopのプロジェクト発足
すぐに
- すぐに出会える
- すぐに買える
- すぐに改善
出会える
eShopを見なければ目につかないのであれば意味がない
商品のプロモーションはゲームニュースに切り出した
スリープ復帰時に必ず目につくようになっている
買える
書いたいと思ったらすぐに買えるための導線を増やす
買いたいと思う熱を冷まさない
ソフトとサーバーサイドが連携してeShopの色も自動で変わるように対応
すぐに改善
ライブラリ選定
SPAを前提
コンポーネント指向
シンプルな状態管理、決済や言語などに対応するため
React + Redux
react redux react-router axios
文脈に沿って追加/習性が可能
コンポーネント化の誤解
ここは価格を目立たせたい
価格、同じコンポーネントだけどどうするの？
デザイナーはWhat、エンジニアはHow
全体を俯瞰できるモックアップの開発に立ち返った
検索は非同期で一部描画
描画コストの高い画像に関しては商品のキーカラーを表示
描画領域以外の箇所を後からレンダリング
React-storybookを活用して認識を共有、コンポーネントカタログを作成
開発と検証の溝
国、言語、法律、通過、決済
ユーザーストーリの作成
エピック
ニュース→eShop→ゲームの購入
品質目標
- Never
- Must
- Want
開発序盤からのテスターとの協業
長期的な安定稼働
すぐに改善
終盤、ローンチまで半年を切ったところ
eShopが不安定、起動が遅い
フロントエンドエンジニアからのヘルプ
サーバー、ブラザ、アプリ、SDK/OSプログラマ、デザイナ、一つの会社、一つの建物にいるのでできる
Yahooのプロキシとプロトコル
新部 長則
2010年 HDDからSSDへの変更
2011年 帯域不足 NW増強、データセンター追加
2013年 pushスパイク問題、Proxy、origin共に増設
2015年 SSL、CPU性能不足 システム入れ替え
AOSSL対応
2015年10月 全社の代表者が集まり発足
サービスが100以上、ドメイン1000以上なのでなるべく収まるよう減らして言った
またワイルドカード証明書を活用
共有Proxy Hardware 500以上のサーバー
リクエスト200万rps
Traffic 300Gbps
EV SSLだとワイルドカード証明書が使えない
SNIによる証明書の出し分けで対応
HTTP/2の現実
大津 繁樹
ATM
HTTPリクエストを仮想的に多重化
待ちが他のリクエストに引きずられない
サーバー側から見る速度
大きめのファイルのダウンロードは確かに早くなった
アクセスしているOSやクライアント環境によるものかもしれないのでHTTP2のおかげで早いのかは分からない
小さいファイルはほぼ変わらなかった
クライアント側から見る速度
DOMContentLoaded
HTTP 1.1 1.15s
HTTP 2 1.14s
ほとんど変わらなかった
画像の読み込みは早いがそれ以外の要因で変わらなくなっている？？
新規接続:再接続
http/2 11:89
1.1 42:58
サーバーのSSLの暗号化処理の分が軽くなるのでサーバー側に影響が以外にもあった
TLSの現実
TLS1.0はオワコンだがWin7 IE9、IE10、IE11やAndroid4.x 標準ブラウザ
今はTLS1.2
TLS1.3
HTTPというものはブラウザからも信用されない時代がくる
中間経路がTLS1.3に対応していないとそこでブロックしてしまう可能性があるので調査が必要
QUIC
クイック
UDP
モダンウェブアプリケーション5カ年計画
Rendering on Googl Search
V41のクロームでSPAもSEO解釈されるようになっている
Isomofic JavaScript = Universal JavaScript
全アプリに向かない(参照系に向く)
管理画面などは複雑性が高いから難しいかも
Code-Splicting
SSRは意外にも表での処理がとても長くなる(操作開始まで)
WebpackのDynamic Importsで解決
React Fiberでバックエンドの処理もさらに細かく
※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。
