console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Node学園 33時限目 に行ってきたメモ #tng33

久しぶりにリクルートに来た。

41Fのホールへは、23Fで乗り換えです。
22Fで降りると上行きのエレベーターが来なくて詰みます!!!

JSX hacks 汎用木構造データ生成機としてのJSX 〜JSXをHTML以外に活用する〜 by shibukawa

JSX hacks - Google スライド

はじめに

JSXとは

  • Reactのキモ
  • JavaScriptの中にHTMLが書ける
    • 今までも似たような取り組みはあったが、どれよりも満足度が高い
  • コンポーネント作成の生産性が高い
    • 小さくイミュータブルに作るなどトレンドも相まって
  • JSXが出力するHTMLは木構造
    • これをなにかに使えないか・・?
  • 構文解析シンタックスハイライト、エラー検出などはもともとできてる
    • 出力する部分だけ自作すれば、自作DSLを作るよりも安いのでは
  • 書いたタグが関数呼び出しに変換される
    • 子要素は引数になって渡っていく
  • 自作レンダラー
    • 作り込むのはちょっと大変(それ用のAPIを使い込む
    • 差分検出とかしないなら簡単

自作してみた

  • JSONを返す`createElement()`を作る
  • とりあえずできた
    • JSONが出たらそれをYAMLに変換するとかも容易い
  • けどユースケースが増えてきて機能が足りないと気づく
    • `docker-compose.yml`とかで便利に使おうとすると
  • Excelもできた
  • Excel方眼紙もできた
    • ちょっと便利だった
    • しかしテキストボックスとかを駆使した神Excelにはまだ届かず
  • エラーメッセージを出す仕組みを入れるとデバッグに便利だった

まとめ

  • 1週間くらいでこれができた
  • 0から自作するよりも圧倒的に楽
    • 要素を1つ追加するだけでも大変
  • 構造化データと1:1の変換だけだとあまり美味しくない
  • コードはそのうち公開するかも

Real World HTTPのミニ版が近日中に公開されるそうです!
って言ってたらされましたすごい!

O'Reilly Japan - Real World HTTP ミニ版

Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例 by Mt.Tomo32, @gladenjoy, @oTheRwoRldy

Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例

NewsWeb

  • Yahoo!ニュース配下の1部ページを担うWebアプリ
  • React/Reduxのクライアントと、expressのサーバー
  • Javaで作ったけど、SSRが必要になったのでNodeに書き換え
  • パフォーマンス要件
    • 4000req/s以上
    • 99パーセンタイルが1秒以下、80パーセンタイルが0.5秒以下
  • リクエストの元はすべてNodeが捌いている
    • エッジにいるのはCDNではない!
  • ベンチマークはApacheBenchで
  • ベンチの結果は想像以上に遅かった

どうしよう

  • 勘でデバッグするのではなく、ちゃんとボトルネックを特定したい
  • 思いついた案
  • プロファイルを取ってみるべしとの天啓を得た
    • `node --prof`で作成
    • `node --process-prof`で読める形にフォーマット
  • その結果、`fs`関連が怪しそうとわかった
  • コードレベルで特定していく
  • 原因わかった
    • axiosのキャッシュ取り出しで`JSON.parse()`が使われていた
    • `Intl.DateTimeFormat`
    • InversifyJSの挙動を勘違いしてた + コンストラクタ内に`readFileSync()`書かれてた

改善していく

  • axiosのキャッシュ
    • アダプタを自作した
    • 文字列ではなくオブジェクトをそのままキャッシュするように
  • `Intl.DateTimeFormat`
    • `Date.toUTCString`に変えてもらった
    • パフォーマンスの差は1000倍もあった・・
  • DIコンテナ
    • シングルトンになるようにした
    • アプリ起動時に、全コンテナのコンストラクタを初期化しておく
  • Clusterモジュールの利用
    • `--inspect`があるときは利用しないと開発しやすい
  • HTTPのキープアライブを有効に
    • TCPのハンドシェイクをスキップできる

改めてベンチマーク

まとめ

  • 思い込みと想像で対処するのではなく、ちゃんとボトルネック
  • 今後も継続してチューニングしていきたい

金無し、時間はコマ切れ、リーンにやりたい。そんなチームが使う、リアルな技術選定と、Typescriptの型情報をフロント/サーバーで共有したい需要 by @dublook

資料は見つけたら

はじめに

  • 電子書籍の会社で経営企画のお仕事
  • コードも書いてるし、副業でも書いてる
  • リーンスタートアップ
  • そういうフィールドにおける技術選定について
  • 本当に好きなマンガだけが100%読めるサービスを作ろうと思った
  • Kindleのマンガの巻数はすごいけど、コードはあまり書かない3人で

どうやって好きなマンガを調べるか

  • 対面レコメンド
    • どんなマンガが聞いて、それでおすすめする
    • 精度はすごい
    • スケールしない
  • LINE@でレコメンド
    • 同じく会話した上でおすすめする
    • 裏側は人間がやってる
  • Kindleに2000冊くらい貯めてる人のマンガにフォーカス
    • その人たちのリストを使ってレコメンド
    • 仕事のようにマンガを仕分けている人々なので間違いない

ここで技術選定

  • AWS, S3, Lambda
  • Vue.js
  • 型欲しいのでサーバー側でTS使うように
  • 便利なのでクライアントでもこの型定義を使いたい

DCL15秒の見れないサイトを3秒まで改善した話。改善継続中 by @mahiguch1

資料は見つけたら

はじめに

現状を把握

  • 投稿画面はTypeScriptで手書き
  • Reactを使ってるところもある
  • 広告のタグはテンプレにべた書き
  • 表示が遅すぎて、広告が表示されない事態になってた

改善 #1

  • `script`タグをまとめるとか
  • 非同期にできるものをそうしたり
  • 無駄にデカい画像を小さくしたり
  • 5%くらい改善された

改善 #2

  • 依存してたもののバージョンアップをした
    • TypeScript/Gulp/Node
  • なぜか劇的に改善された
  • 理由はわからない
    • 会場: ざわ...

改善 #3

  • Webpackのバージョンアップ
  • これも改善につながった
    • TreeShakingとか?

PromiseとNode.jsで解説する Smart Payment Button by PayPal 岡村さん

資料は見つけたら

今日お話すること

デモ

  • インコンテキストという方式
    • ポップアップで決済できる
    • ページ遷移しないから離脱しない
  • Sandbox環境あるよ

コードについて

  • `Promise`サポートされてます
    • よくある決済完了画面へのリダイレクトがない
  • サーバーサイドも同じく
  • JS-SDKのカスタマイズをGETパラメータで制御できる
    • 依存するライブラリとか
  • 内部的にGraphQLを採用してパフォーマンスUP
    • GraphQLへのあれこれを綴った発表もした

PayPalにもUGがあって、Facebookとconnpassで活動していますとのこと。