- Node学園 33時限目に参加してきました。
| タイトル | 登壇者 |
|---|---|
| 汎用木構造データ生成機としてのJSX: JSXをHTML以外に活用する | shibukawa |
| Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例 | Mt.Tomo32, @gladenjoy, @oTheRwoRldy |
| 金無し、時間はコマ切れ、リーンにやりたい。そんなチームが使う、リアルな技術選定と、Typescriptの型情報をフロント/サーバーで共有したい需要 | @dublook |
| DCL15秒の見れないサイトを3秒まで改善した話。改善継続中 | @mahiguch1 |
| PromiseとNode.jsで解説する Smart Payment Button | PayPal 岡村さん |
汎用木構造データ生成機としてのJSX: JSXをHTML以外に活用する
- shibukawaさん
JSX
- マークアップとViewロジックの分離は関心事の分離ではなく技術の分離
- JSの中にHTMLを書けてHTMLの中にJSを書ける
HTMLは木構造
まとめ
- 構造化データを扱うDSLとしてのJSX
- 0から言語を作るよりも圧倒的に楽
- コード量は増えるので付加価値を付けられると使い物になるかも
Yahoo!ニュースにおけるBFFパフォーマンスチューニング事例
- Mt.Tomo32さん
- @gladenjoyさん
- @oTheRwoRldyさん
yahooニュース
Nodeに置き換え
- そのままではパフォーマンスでなかった
ボトルネックを特定
- 試したこと
- console.time/console.tineEnd
- sjsp
node --prof index.jsnode --process-prof isolate-0xnnnnnnn.log > result.txt- => C++のCPU処理が重かった
- flamebearerによる可視化
node --inspect
- わかったこと
axiosのキャッシュパフォーマンス改善
DIコンテナ内のインスタンスをシングルに改善
- シングルトンスコープでコンテナに登録するように変更
それ以外の改善
- Clusterモジュールの導入
- バックエンドAPIへのKeepAlive対応
金無し、時間はコマ切れ、リーンにやりたい。そんなチームが使う、リアルな技術選定と、Typescriptの型情報をフロント/サーバーで共有したい需要
- @dublookさん
リーンスタートアップと技術選定
- いきなり作るよりニーズの検証
- 最初は技術を使わなくてもできることから検証
- 徐々に技術を使ってスケールさせていく
- jsonの型がわからなくてつらい
- TypeScriptを使うことに
- クライアントもサーバもTypeScript
DCL15秒の見れないサイトを3秒まで改善した話。改善継続中
- @mahiguch1さん
3年前にリリースしたWeb
- 気がついたらDOM Content Loadedが15秒かかるようになっていた
改善1
- scriptタグ減らす(まとめる)
- scriptタグにasyncつける
- cssをpreload
- 画像サイズ最適化
- => 5%改善
改善2
- nodeとgulpとTypeScriptのバージョ投げた
- 劇的に改善
改善3
- webpackとReactをバージョンアップ
- tree shakingがきいたからっぽい
- 劇的に改善
PromiseとNode.jsで解説する Smart Payment Button
- PayPal 岡村さん
PayPalの実装方法
- JSだけで実装完了
- Promise対応
- リダイレクト処理無しで決済結果の描画が可能
- 各言語のSDKでサーバサイド実装もできる
- 読み込むURLのパラメータでオプション指定できる
- 内部でGraphQLを使って効率化
