とろろこんぶろぐ

かけだしR&Dフロントエンジニアの小言

HTML5 Conference 2018 に少し参加しました

HTML5 Conference 2018に少し参加した

11月25日（日）三連休三日目に、HTML5 Conferenceが開催された。 場所は北千住近くの東京電機大。総勢1000人を超える人が来てたんじゃないかと思うとかなりでかいカンファレンスだなと思う。 前日、前々日にNode学園祭が重なって、当日はGoConとも重なって、エンジニアたちには激アツな三連休となったなという気持ち。

events.html5j.org

聴講メモ

「それ、AMPで作りませんか？」--- RichでResponsiveかつPWAなAMPの作り方 (宇都宮佑亮)

実際にAMPのできることを紹介する発表。

AMPでできることはもうかなり多そう。メディア系はAMPになっているところも結構多いし、かなり進んでる。

URLがGoogle/AMPのURLになってしまうのもsigned exchangeで署名されれば解決される。

www.suzukikenichi.com

PWAについても少し話されていて、one liner PWAだけ少し気になったが、基本的に知っている話だったと思う。

どうでもいいけど、この図の通り、AMPとPWAは親和性があるってのはよかった。

f:id:ka2jun8:20181125230759g:plain

PWAの導入で得られた成果と見えてきた課題(宍戸俊哉)

PWA導入の成果と課題 / nikkei-pwa-html5conf2018 - Speaker Deck

日経電子版のPWA対応その後の話。

日経はmulti page appでvanilla js（no framework）。やはりフレームワークなしで軽量化する力量がこれから必要になるのかもしれない。

リリース後やったことは以下。

  • インラインCSSでレンダリングブロックしない
    • htmlのサイズは増えるがFMPが1秒減
  • Add to Home Screenを記事読了後に出す
    • これは絶対数が減ってしまったので今はやめてるそう
  • SWの起動待ち問題の解消
    • Navigation Payloadを活用しTtFB改善

速度維持にはツールや仕組みを活用。

何もしていないとサイトは必ず遅くなっていく

  • ツールを活用する
    • Speedcurve
    • Page Speed Insights
    • Atlas
  • ダッシュボードは常にモニタに表示して見える位置においておく
    • 短期・長期で出す。
  • パフォーマンス改善デーを作る
  • Performance Budgetを決め準拠する

iOS PWA問題

まあ相変わらずやばそうだ、、、

その他

  • オフラインキャッシュ対応は日本だとそこまで必須にならないので優先度が下がりがち。

Node.js まとめ(古川陽介)

Node.js 2018 - Speaker Deck

Node.jsコアポリシーについての話だった。node.jsはシンプルなデザインを目指している。エコシステムで解決できるものはエコシステムで解決する。

  • スタビリティ

  • Long term support(2年)

  • Security Mentainance(1年) 合計で3年間はサポートがあるので、開発プロジェクトの案件に入れてから、その後の対応がやりやすい。

V8側でnodejs/nodeをforkしてtestしてくれているのは知らなかった。 それによって、V8が上がってnode側に影響が出ることをV8側から通知してもらい対応することができるような仕組みになっている。

  • パフォーマンス

V8自体が頑張ってはやくしてくれていることもあるが、workerも入ったのでマルチスレッドで動くツールの開発が可能に。babel, webpackなどのトラバースする処理系は並列処理が向いてそう。

あとは古川さんが llhttp がやばくてだな、と興奮して話していたのが印象的だった。

deps: introduce experimental `llhttp` HTTP parser by indutny · Pull Request #24059 · nodejs/node · GitHub

もともとCで書かれていたhttp-parserを、TypeScriptで書き直してllvmのbitcodeを生成したものをラッパーを書いてCから呼ぶという若干意味不明なことのように見えるものだが、なぜか2倍くらい早くなるらしい。すげえ。

  • セキュリティ

npm/yarn audit でセキュリティ対策もできるようになっている。

機能的な話だと、Promiseがコアに入っていく。というか、callbackを呼ぶものがpromisifyでPromise化できる。streamもfor await ofでPromise化できるようになっているとのこと。

おそらく一番伝えたかったであろうことは、ECMAスクリプトに、ウェブもnodeも統一化していきたい未来があり、開発者がユースケースを作っていって仕様策定者にフィードバックしていく必要がある！ と受け取った。

webpackのいままでとこれから(廣戸裕大)

webpackのイママデとコレカラ

バージョンのアップグレードごとに入った特徴的な機能を、実際のコードを追いながら、webpackがどのようにbundleしているかを丁寧に説明してくれた。

Tree Shakingのあたりを含め、勉強になった。Tapableなどは追いきれなくて難しく感じたところもあり、あとでおさらいしたい。 webpackは結局なんだかんだデファクトスタンダードになってきていて、bundleするならwebpackなのはこれからも変わらなさそうだなと思ってる。

webpackがめんどくさいとかつらいとか言うのは簡単なんだけど、じゃあbundleどうするの？って言うと結局webpackするしかないよね、という現状なわけなので、今後webpack使っていくのか、そうじゃなくてもいいのか、本質的な見分けだったり、最悪自身でbundleもどきをするようにできないといけない未来を考えると、きちんと今のうちに中身を理解して使っていきたいと感じた。

終わりに

僕が参加したHTML5カンファの講演は以上。午後４セッションだけの参加となったが、日経〜hiroppyさんまでの講演は全て満席・立ち見入場規制になっていた。キャパが狭かったのもあるのかもしれないが、HTML5 + JavaScriptに関わるフロント側のエンジニアってめちゃくちゃおるやんけ、という気持ちになりました。