-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #247 from cybozu/2023-08
Frontend Monthly post 2023/08
- Loading branch information
Showing
1 changed file
with
181 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,181 @@ | ||
| --- | ||
| title: Cybozu Frontend Monthly | ||
| date: "2023-08-29T17:00:00+09:00" | ||
| slug: "2023-08" | ||
| connpass: "https://cybozu.connpass.com/event/292170/" | ||
| streamUrl: "" | ||
| no: 38 | ||
| members: | ||
| - name: "@nus3_" | ||
| link: https://twitter.com/nus3_ | ||
| - name: "@nakajmg" | ||
| link: https://twitter.com/nakajmg | ||
| - name: "@b4h0_c4t" | ||
| link: https://twitter.com/b4h0_c4t | ||
| guest: | ||
| --- | ||
|
|
||
| ## 👀 Notable Articles | ||
|
|
||
| ### [dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS](https://deno.com/blog/publish-esm-cjs-module-dnt) | ||
|
|
||
| - 共有者: nus3 | ||
|
|
||
| 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](https://www.builder.io/blog/ui-over-apis) | ||
|
|
||
| - 共有者: nakajmg | ||
|
|
||
| バックエンドがデータだけでなく UI も制御する手法である Server-Driven UI の紹介記事です。 | ||
|
|
||
| 以前[Airbnb がこの手法を採用している](https://medium.com/airbnb-engineering/a-deep-dive-into-airbnbs-server-driven-ui-system-842244c5f5)ことで話題になりましたが、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 について会話しているので、興味がある方はぜひ視聴してみてください。 | ||
|
|
||
| - [Sending UIs over APIs - YouTube](https://www.youtube.com/watch?v=uL-grjeYc18) | ||
|
|
||
| --- | ||
|
|
||
| ### [Speeding up V8 heap snapshots](https://v8.dev/blog/speeding-up-v8-heap-snapshots) | ||
|
|
||
| - 共有者: b4h0_c4t | ||
|
|
||
| Node.js 等 の JavaScript エンジンとして利用されている V8 がヒープスナップショット機能のパフォーマンスを改善させた話。 | ||
|
|
||
| Web アプリケーション開発時にメモリリークが疑われる場合、その診断として活用されるツールの一つがヒープスナップショットです。 | ||
| ヒープスナップショットは、Web アプリケーション実行中の特定タイミングにおけるヒープメモリの状態をスナップショットとして保存することが可能です。 | ||
| これを利用することで開発者はどの時点でメモリリークが発生してそうなのかをある程度把握することができます。 | ||
|
|
||
| 当時、500MB のヒープを記録するのに 30 分を超える時間がかかっていたことに疑問を感じた開発者は問題を調査し、文字列をメモリに格納する際に生成するハッシュアルゴリズムに問題があることを発見しました。 | ||
|
|
||
| ハッシュは通常の場合ある程度ランダムな値が生成されますが、格納する値が数値の時、桁数と数値を組み合わせた値をハッシュとして提供します。 | ||
| つまり、0 から 9、10 から 99、100 から 999 といった数値は連続したメモリに格納されることになります。 | ||
| このとき、とある文字列データのハッシュが数値のハッシュとバッティングした場合、該当の数値とそれ以降の数値のハッシュは次に空いているメモリの配列を探索するのですが、その探索コストがボトルネックとなっていることがわかりました。 | ||
|
|
||
| 解決策として、数値データのハッシュを生成する際のアルゴリズムに追加で値を 2bit 左シフトすることでメモリ空間での連続性がなくなり、該当の問題は対処されました。 | ||
| 一見違和感ないハッシュアルゴリズムも、特定のケースでパフォーマンスが大きく悪化してしまうという例でした。 | ||
|
|
||
| また、この一件で V8 に `--profile-heap-snapshot` というフラグが追加されており、ヒープスナップショット自体のプロセスをプロファイルすることができるようになっています。 | ||
| ヒープスナップショットと合わせて、興味のある方はぜひ試してみてください。 | ||
|
|
||
| --- | ||
|
|
||
| ## 🗓 Monthly Articles | ||
|
|
||
| ### 📖 Framework, Library | ||
|
|
||
| - [How React 18 Improves Application Performance](https://vercel.com/blog/how-react-18-improves-application-performance) | ||
| - React に新しく導入された transition, suspense, react server components などのパフォーマンス関連機能の解説 | ||
| - [How Turborepo is porting from Go to Rust](https://vercel.com/blog/how-turborepo-is-porting-from-go-to-rust) | ||
| - Turborepo が Go から Rust へ徐々に移行している話 | ||
| - [Node.js v16 EOL](https://endoflife.date/nodejs) | ||
| - Node.js v16 が 9/11 に EOL します | ||
| - [Bun v0.7.0](https://bun.sh/blog/bun-v0.7.0) | ||
| - Bun v0.7.0 のリリース記事。Vite, WebWorker, structuredClone, AsyncLocalStorage などが利用可能に | ||
| - [PartyKit](https://partykit.io/) | ||
| - リアルタイムやマルチプレイヤー向けのアプリケーションを作るための SDK | ||
| - [Astro 2.9: View Transitions (experimental)](https://astro.build/blog/astro-290/) | ||
| - Astro v2.9 のリリース記事。View Transitions が experimental として追加 | ||
| - [Astro 2.10: Persistent State in View Transitions](https://astro.build/blog/astro-2100/) | ||
| - Astro v2.10 のリリース記事。ViewTransitions で画面遷移した際に再レンダリングを抑えるディレクティブの追加など | ||
| - [Introducing Valibot, a < 1kb Zod Alternative](https://www.builder.io/blog/introducing-valibot) | ||
| - Zod の代替となる軽量 Validator | ||
| - [Caching in Next.js](https://nextjs.org/docs/app/building-your-application/caching) | ||
| - Next.js のドキュメントに cache の説明が追加 | ||
| - [httptoolkit/brotli-wasm](https://github.com/httptoolkit/brotli-wasm) | ||
| - Brotli で圧縮解凍ができる Rust to Wasm 製ライブラリ | ||
| - [https://bun.sh/1.0](https://bun.sh/1.0) | ||
| - Bun v1 が 9/8 にリリース予定 | ||
| - [Joy UI is now in Beta!](https://twitter.com/MUI_hq/status/1686406501525491712?s=20) | ||
| - Joy UI が Beta リリース | ||
| - [pnpm/pacquet](https://github.com/pnpm/pacquet) | ||
| - pnpm org の Rust 製パッケージマネージャ | ||
| - [evanw/esbuild v0.19.0](https://github.com/evanw/esbuild/releases/tag/v0.19.0) | ||
| - esbuild v0.19.0 リリース。エントリポイントでワイルドカードが使用可能に | ||
| - [Node.js's Config Hell Problem](https://deno.com/blog/node-config-hell) | ||
| - Node.js はコンフィグが多くて辛いという記事(発信元は Deno) | ||
| - [nodejs/node-core-test](https://github.com/nodejs/node-core-test) | ||
| - `node:test` の npm package 版、知らなかった | ||
| - [src: add built-in .env file support - nodejs/node](https://github.com/nodejs/node/pull/48890) | ||
| - Node.js が `.env` をビルトインサポート | ||
|
|
||
| --- | ||
|
|
||
| ### ⚡️ Services | ||
|
|
||
| - [Build and Ship Astro Sites with Deno and Deno Deploy](https://deno.com/blog/astro-on-deno) | ||
| - Astro の SSR の機能を使って Deno Deploy へデプロイする方法の紹介記事 | ||
| - [How we reduced the size of our JavaScript bundles by 33%](https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent) | ||
| - Dropbox が JavaScript のバンドルサイズを削減した話 | ||
|
|
||
| --- | ||
|
|
||
| ### 🖥 Browsers | ||
|
|
||
| - [Arc 1.0 is now available](https://twitter.com/arcinternet/status/1683841503544897538?s=20) | ||
| - Chromium ベース新ブラウザ「Arc」の v1 がリリース | ||
| - [An update on Chrome Security updates – shipping security fixes to you faster](https://security.googleblog.com/2023/08/an-update-on-chrome-security-updates.html) | ||
| - Chrome がセキュリティーアップデートを週次で実施するように | ||
|
|
||
| --- | ||
|
|
||
| ### 🦆 Others | ||
|
|
||
| - [Dan leave Meta](https://twitter.com/dan_abramov/status/1682029195843739649?s=20) | ||
| - React の開発者で知られている Dan さんが Meta 社を退職するそうです | ||
| - [Security alert: social engineering campaign targets technology industry employees](https://github.blog/2023-07-18-security-alert-social-engineering-campaign-targets-technology-industry-employees/) | ||
| - 悪意のあるプログラムを含む GitHub プロジェクトへ開発者を誘導してマルウェア等に感染させようとする事例への注意喚起 | ||
| - [Jotai で快適フロントエンド開発](https://nulab.com/ja/blog/nulab/react-jotai/) | ||
| - 状態管理ライブラリを Recoil から Jotai へ乗り換えた話 | ||
| - [Firefox がついに Chrome よりも高速なブラウザに](https://gigazine.net/news/20230720-firefox-surpassed-chrome-speedometer/) | ||
| - [Treeholder](https://treeherder.mozilla.org/jobs?repo=autoland) が公開したベンチマークテストの結果が Chrome よりも Firefox の方が高スコアだったという話 | ||
| - [dnt — the easiest way to publish a hybrid npm module for ESM and CommonJS](https://deno.com/blog/publish-esm-cjs-module-dnt) | ||
| - dnt を使って Deno のモジュールを Node.js と npm 互換のパッケージとして公開する方法 | ||
| - [Understanding React Server Components](https://vercel.com/blog/understanding-react-server-components) | ||
| - Vercel による React Server Components についての解説記事 | ||
| - [import.meta.filename and import.meta.dirname](https://github.com/wintercg/proposal-common-minimum-api/issues/50) | ||
| - host defined として ECMA で扱われている import.meta 周りについて、[Node.js に対する PR](https://github.com/nodejs/node/pull/48740) をきっかけに WinterCG で仕様を決める動きが始まっているという話 | ||
| - [React Server Component のテストと Container / Presentation Separation](https://quramy.medium.com/react-server-component-%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%81%A8-container-presentation-separation-7da455d66576) | ||
| - RSC のテストや設計手法についての実例記事 | ||
| - [Introducing Next.js Commerce 2.0](https://vercel.com/blog/introducing-next-js-commerce-2-0) | ||
| - Next.js 13 の機能を使った EC サイト用のテンプレート | ||
| - [shadcn join Vercel](https://twitter.com/shadcn/status/1688945578439499776?s=20) | ||
| - Radix UI と Tailwind CSS で作られたスニペット集の shadcn/ui の作者が Vercel にデザインエンジニアとして join | ||
| - [Tracking issue: Performance improvement](https://github.com/fabian-hiller/valibot/issues/73) | ||
| - Valibot が Zod を比較対象としてほとんどの場合でパフォーマンスが悪いため、その分析や改善しようという Issue | ||
| - [react-hook-form が Valibot に対応、Zod 比較でバンドルサイズが 92%削減](https://zenn.dev/hayato94087/articles/f76c878bc97d65) | ||
| - react-hook-form が Valibot に対応した話 | ||
| - [Blogged Answers: My Experience Modernizing Packages to ESM](https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/) | ||
| - Redux の開発者が経験した様々なツールで動作するモジュールを開発することの難しさについての記事 | ||
| - [Vue.js エコシステム動向 2023](https://speakerdeck.com/kazupon/vue-dot-jsekosisutemudong-xiang-2023) | ||
| - Vue.js とそのエコシステムの最近の動向 | ||
| - [Bringing Sharp to WebAssembly and WebContainers](https://blog.stackblitz.com/posts/bringing-sharp-to-wasm-and-webcontainers/) | ||
| - ブラウザで Node.js を直接実行する WebContainers で画像変換ライブラリの Sharp が使用可能に | ||
| - [An Introduction to htmx, the HTML-focused Dynamic UI Library](https://www.sitepoint.com/htmx-introduction/) | ||
| - htmx の紹介記事 | ||
| - [認可のアーキテクチャに関する考察（Authorization Academy II を読んで](https://zenn.dev/she_techblog/articles/6eff1f28d107be) | ||
| - 認可の関心分離方法について整理した記事 | ||
| - [RedwoodJS Build Competition](https://build.redwoodjs.com/) | ||
| - RedWood Build Competition が開催 | ||
| - [React 研修](https://speakerdeck.com/recruitengineers/react) | ||
| - 株式会社リクルートのエンジニアコース新人研修で実施された React 研修の公開資料 | ||
| - [epicweb-dev/epic-stack decisions/031-imports.md](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/031-imports.md) | ||
| - epic-stack で tsconfig の path alias と Node.js の import フィールドの両方を利用するという決定 | ||
| - [Next.js に next/testmode という概念が出現し MSW x Playwright のテストがやりやすくなりそう](https://zenn.dev/uyas/articles/bc58a4bed15ed4) | ||
| - Next.js に追加された `next/testmode` についての解説記事 | ||
| - [Vercel と提携し、ちょっと社はより多くの日本企業に向けてフロントエンドクラウドを提供します ](https://prtimes.jp/main/html/rd/p/000000009.000045314.html) | ||
| - ちょっと株式会社が日本初の Vercel のパートナー企業に | ||
| - [Resume and pause animations in CSS](https://www.amitmerchant.com/run-and-pause-animations-in-css/) | ||
| - `animation-play-state` を使って CSS アニメーションを簡単に中断・再開する方法 |