Cybozu Frontend Monthly #38

タイトル画像

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエキスパートチームのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2023年08月29日

イベントページ

https://cybozu.connpass.com/event/292170/

配信URL

https://youtu.be/MuH3pBElZLY?si=TEEMkixta49xZ9e8

メンバー

@nus3_@nus3_
@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t

コンテンツ

👀 Notable Articles

dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS

CJS と ESM に対応した npm パッケージを簡単に作成できる dnt の紹介記事です。

dnt を使うことで、Deno で実装したモジュールを npm パッケージとして公開できます。また、dnt ではビルド時に生成された CJS、ESM のファイルそれぞれに対して Node.js でテストを実行してくれます。

実際に dnt を使ってみましたが、Deno を使って開発できるので、Lint、Format、Test、TypeCheck などのエコシステムがすぐに使えるのがとても良い点だと感じました。dnt はメジャーバージョンではなかったり、Deno の npm パッケージのサポート状況も考慮する必要がありますが、個人的には npm パッケージを作成する際に試してみたい構成です。

Sending UI over APIs

バックエンドがデータだけでなく UI も制御する手法である Server-Driven UI の紹介記事です。

以前Airbnb がこの手法を採用していることで話題になりましたが、Lyft や Instagram でもこの Server-Driven UI が採用されているそうです。

Server-Driven UI の特徴として、UI の変更がクライアントのコードの変更なしにできる点があります。この特徴を活かして Instagram では UI の変更・修正や A/B テスト、また A/B テストの結果に応じてユーザーに合わせた UI の表示を行うなど、イテレーションを高速に回していると紹介しています。 Web だけでなく iOS・Android アプリでサービスを展開してる場合に、ストアの審査などのプロセスを経ずに UI の更新をユーザーに届けられるといった利点についても触れています。

Server-Driven UI には、クライアントの表示ロジックの複雑さをサーバー側に移すといった側面もあるので、現代の複雑になりがちな Web アプリケーションの設計において一考の余地があるのかなと思いました。

記事中で紹介されている動画では、Instagram のエンジニアと Builder.io の CEO が Server-Driven UI について会話しているので、興味がある方はぜひ視聴してみてください。

Speeding up V8 heap snapshots

Node.js 等 の JavaScript エンジンとして利用されている V8 がヒープスナップショット機能のパフォーマンスを改善させた話。

Web アプリケーション開発時にメモリリークが疑われる場合、その診断として活用されるツールの一つがヒープスナップショットです。 ヒープスナップショットは、Web アプリケーション実行中の特定タイミングにおけるヒープメモリの状態をスナップショットとして保存することが可能です。 これを利用することで開発者はどの時点でメモリリークが発生してそうなのかをある程度把握することができます。

当時、500MB のヒープを記録するのに 30 分を超える時間がかかっていたことに疑問を感じた開発者は問題を調査し、文字列をメモリに格納する際に生成するハッシュアルゴリズムに問題があることを発見しました。

ハッシュは通常の場合ある程度ランダムな値が生成されますが、格納する値が数値の時、桁数と数値を組み合わせた値をハッシュとして提供します。 つまり、0 から 9、10 から 99、100 から 999 といった数値は連続したメモリに格納されることになります。 このとき、とある文字列データのハッシュが数値のハッシュとバッティングした場合、該当の数値とそれ以降の数値のハッシュは次に空いているメモリの配列を探索するのですが、その探索コストがボトルネックとなっていることがわかりました。

解決策として、数値データのハッシュを生成する際のアルゴリズムに追加で値を 2bit 左シフトすることでメモリ空間での連続性がなくなり、該当の問題は対処されました。 一見違和感ないハッシュアルゴリズムも、特定のケースでパフォーマンスが大きく悪化してしまうという例でした。

また、この一件で V8 に --profile-heap-snapshot というフラグが追加されており、ヒープスナップショット自体のプロセスをプロファイルすることができるようになっています。 ヒープスナップショットと合わせて、興味のある方はぜひ試してみてください。

🗓 Monthly Articles

📖 Framework, Library

⚡️ Services

🖥 Browsers

🦆 Others

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team