久しぶりにリクルートに来た。
41Fのホールへは、23Fで乗り換えです。
22Fで降りると上行きのエレベーターが来なくて詰みます！！！
JSX hacks 汎用木構造データ生成機としてのJSX 〜JSXをHTML以外に活用する〜 by shibukawa
はじめに
- フューチャーという会社からきました
- B2Bの会社で
- 著名な本をいろいろ書かれています
JSXとは
- Reactのキモ
- JavaScriptの中にHTMLが書ける
- 今までも似たような取り組みはあったが、どれよりも満足度が高い
- コンポーネント作成の生産性が高い
- 小さくイミュータブルに作るなどトレンドも相まって
- JSXが出力するHTMLは木構造
- これをなにかに使えないか・・？
- 構文解析やシンタックスハイライト、エラー検出などはもともとできてる
- 出力する部分だけ自作すれば、自作DSLを作るよりも安いのでは
- 書いたタグが関数呼び出しに変換される
- 子要素は引数になって渡っていく
- 自作レンダラー
- 作り込むのはちょっと大変（それ用のAPIを使い込む
- 差分検出とかしないなら簡単
自作してみた
- JSONを返す`createElement()`を作る
- とりあえずできた
- JSONが出たらそれをYAMLに変換するとかも容易い
- けどユースケースが増えてきて機能が足りないと気づく
- `docker-compose.yml`とかで便利に使おうとすると
- Excelもできた
- npmに`xslx`というのがある
- SheetJS - Open Source
- Excel方眼紙もできた
- ちょっと便利だった
- しかしテキストボックスとかを駆使した神Excelにはまだ届かず
- エラーメッセージを出す仕組みを入れるとデバッグに便利だった
まとめ
- 1週間くらいでこれができた
- 0から自作するよりも圧倒的に楽
- 要素を1つ追加するだけでも大変
- 構造化データと1:1の変換だけだとあまり美味しくない
- コードはそのうち公開するかも
Real World HTTPのミニ版が近日中に公開されるそうです！
って言ってたらされましたすごい！
Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例 by Mt.Tomo32, @gladenjoy, @oTheRwoRldy
NewsWeb
- Yahoo!ニュース配下の1部ページを担うWebアプリ
- React/Reduxのクライアントと、expressのサーバー
- Javaで作ったけど、SSRが必要になったのでNodeに書き換え
- パフォーマンス要件
- 4000req/s以上
- 99パーセンタイルが1秒以下、80パーセンタイルが0.5秒以下
- リクエストの元はすべてNodeが捌いている
- エッジにいるのはCDNではない！
- ベンチマークはApacheBenchで
- ベンチの結果は想像以上に遅かった
どうしよう
- 勘でデバッグするのではなく、ちゃんとボトルネックを特定したい
- 思いついた案
- `console.time()`とか？
- https://github.com/45deg/node-sjsp
- プロファイルを取ってみるべしとの天啓を得た
- `node --prof`で作成
- `node --process-prof`で読める形にフォーマット
- その結果、`fs`関連が怪しそうとわかった
- コードレベルで特定していく
- https://github.com/mapbox/flamebearer
- `node --inspect`
- 原因わかった
- axiosのキャッシュ取り出しで`JSON.parse()`が使われていた
- `Intl.DateTimeFormat`
- InversifyJSの挙動を勘違いしてた + コンストラクタ内に`readFileSync()`書かれてた
改善していく
- axiosのキャッシュ
- アダプタを自作した
- 文字列ではなくオブジェクトをそのままキャッシュするように
- `Intl.DateTimeFormat`
- `Date.toUTCString`に変えてもらった
- パフォーマンスの差は1000倍もあった・・
- DIコンテナ
- シングルトンになるようにした
- アプリ起動時に、全コンテナのコンストラクタを初期化しておく
- 他
- Clusterモジュールの利用
- `--inspect`があるときは利用しないと開発しやすい
- HTTPのキープアライブを有効に
- TCPのハンドシェイクをスキップできる
改めてベンチマーク
- Clusterモジュールがすごい
- 改善前は174インスタンスが必要だったのが、12インスタンスで足りるように
- レスポンスも問題ない
まとめ
- 思い込みと想像で対処するのではなく、ちゃんとボトルネックを
- 今後も継続してチューニングしていきたい
金無し、時間はコマ切れ、リーンにやりたい。そんなチームが使う、リアルな技術選定と、Typescriptの型情報をフロント/サーバーで共有したい需要 by @dublook
資料は見つけたら
はじめに
- 電子書籍の会社で経営企画のお仕事
- コードも書いてるし、副業でも書いてる
- リーンスタートアップ
- そういうフィールドにおける技術選定について
- 本当に好きなマンガだけが100%読めるサービスを作ろうと思った
- Kindleのマンガの巻数はすごいけど、コードはあまり書かない3人で
どうやって好きなマンガを調べるか
- 対面レコメンド
- どんなマンガが聞いて、それでおすすめする
- 精度はすごい
- スケールしない
- LINE@でレコメンド
- 同じく会話した上でおすすめする
- 裏側は人間がやってる
- Kindleに2000冊くらい貯めてる人のマンガにフォーカス
- その人たちのリストを使ってレコメンド
- 仕事のようにマンガを仕分けている人々なので間違いない
ここで技術選定
- AWS, S3, Lambda
- Vue.js
- 型欲しいのでサーバー側でTS使うように
- 便利なのでクライアントでもこの型定義を使いたい
- コピペは確かに手軽で便利
- `package.json`のdepsにGitHubのリポジトリ名が書ける <- コレで
DCL15秒の見れないサイトを3秒まで改善した話。改善継続中 by @mahiguch1
資料は見つけたら
はじめに
- グリーの関連会社からきました
- メディア系の事業をやってる会社
- リリースから1年、しばらく経ったときに気づいた
- 機能追加が積もり積もって、気づけばDOMContentLoadedまで15秒かかるようになってた
- 直さないと！！
現状を把握
- 投稿画面はTypeScriptで手書き
- Reactを使ってるところもある
- 広告のタグはテンプレにべた書き
- 表示が遅すぎて、広告が表示されない事態になってた
改善 #1
- `script`タグをまとめるとか
- 非同期にできるものをそうしたり
- 無駄にデカい画像を小さくしたり
- 5%くらい改善された
改善 #2
- 依存してたもののバージョンアップをした
- TypeScript/Gulp/Node
- なぜか劇的に改善された
- 理由はわからない
- 会場: ざわ...
改善 #3
- Webpackのバージョンアップ
- これも改善につながった
- TreeShakingとか？
PromiseとNode.jsで解説する Smart Payment Button by PayPal 岡村さん
資料は見つけたら
今日お話すること
- PayPalの新しくなった実装方法について
- レガシーな決済システムに思われがちだが最近がんばってます！
- UIを改善したりAPIを改善したり
- JavaScriptだけで完結する
- Nodeでサーバーサイドでも
- Qiitaに日本語のサマリを書く活動もしています
デモ
- インコンテキストという方式
- ポップアップで決済できる
- ページ遷移しないから離脱しない
- Sandbox環境あるよ
コードについて
- `Promise`サポートされてます
- よくある決済完了画面へのリダイレクトがない
- サーバーサイドも同じく
- JS-SDKのカスタマイズをGETパラメータで制御できる
- 依存するライブラリとか
- 内部的にGraphQLを採用してパフォーマンスUP
- GraphQLへのあれこれを綴った発表もした
PayPalにもUGがあって、Facebookとconnpassで活動していますとのこと。