Fork me on GitHub

2020-12-22のJS: lighthouse 7.0.0、React Server Components、Micro Frontends Architecture Patterns

Edit on GitHub 編集履歴を見る

JSer.info #519 - Lighthouse 7.0.0がリリースされました。

Node.js 10のサポート終了、PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになるといった変更が含まれています。
また、スクリーンショットがフルページとなりレポートのファイルサイズが増加しています。


ReactからReact Server Componentsと呼ばれる実験的な実装とRFCが公開されています。

React Server Componentsは、サーバサイドでReact Componentをレンダリングする仕組みですが、レンダリング結果はHTMLではなくJSONライクなデータ(SlotとコンポーネントのJSON表現を組み合わせた形式)です。

リクエストごとにサーバコンポーネントをレンダリングした結果をJSON(クライアント描画するコンポーネントを含む)のレスポンスとして返し、クライアントではそのレスポンス結果を使いレンダリングできる仕組みとなっています。
大まかにいえば、コンポーネントレベルでのSSRとHydrateを行える仕組みです。

サーバサイドでコンポーネントをレンダリングすることで、サーバでのレンダリング結果のみを扱うクライアントでは不要なライブラリを含めずに扱えます。
そのため、クライアントに必要なbundleサイズを減らせるのが主な目的となっています。
Facebookのproductionでテストした結果、bundleサイズが最大30%削減できているそうです。

詳しくは、次の動画とデモアプリで解説されています。

現在はまだRFCが出たばかりの実験的な段階であるため、来年にもっと詳細を決めていくようです。


Micro Frontends Architecture Patternsという電子書籍では、 フロントエンドで見かけるアーキテクチャについて色々とまとめられています。
まだ決まりきったパターンがないMicro Frontendsについても色々なパターンについて紹介されています。


ヘッドライン


Release v7.0.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v7.0.0

Chrome performance Tools ReleaseNote

Lighthouse 7.0.0リリース。
Node.js 10のサポート終了。
PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになる。
また、スクリーンショットがフルページとなりレポートのファイルサイズが増加するなど


Release v4.0.0 · less/less.js

github.com/less/less.js/releases/tag/v4.0.0

CSS ReleaseNote

Less 4.0.0リリース。
破壊的な変更としてmixinの呼び出し方のチェックをより厳密に変更、mathオプションの初期値をparens-divisionに変更など。
min()/max()のサポート改善、isdefined()の追加など


Announcing Stimulus 2.0 - Announcements - Stimulus Discourse

discourse.stimulusjs.org/t/announcing-stimulus-2-0/1482

JavaScript rails library ReleaseNote

Basecampで使われているStimulus 2.0リリース。
Controllerでvaluesclassesプロパティを追加、EventListnerのoncepassiveのサポートなど。
data属性にidentifierを含めて使うように変更、input要素をchangeからinputイベントで監視するように変更など


Release v6.0.0 · fb55/htmlparser2

github.com/fb55/htmlparser2/releases/tag/v6.0.0

HTML library ReleaseNote

htmlparser2 6.0.0リリース


Release v0.13.0 · developit/microbundle

github.com/developit/microbundle/releases/tag/v0.13.0

JavaScript library ReleaseNote Tools

ライブラリを配布用にbundleするmicrobundle 0.13.0リリース。
--cssフラグを追加し、CSSをデフォルトでは外部ファイル(external)として出力し、inlineでインライン化できるように。


アーティクル


Introducing Zero-Bundle-Size React Server Components – React Blog

reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

React article

Reactで試験的に実装されたReact Server Componentsについて。
リクエストごとにサーバコンポーネントをレンダリングした結果をJSONライクなデータ(SlotとコンポーネントのJSON表現を組み合わせた形式)として返し、クライアントではレンダリング結果を使いレンダリングできる仕組み。
サーバサイドでコンポーネントをレンダリングすることで、レンダリング結果のみを扱うクライアントでは不要なライブラリを含めずに扱えるためサイズを減らせる。
コンポーネントレベルでのSSRとHydrateを行える仕組み。


Conditional JavaScript - JavaScript - Dev Tips

umaar.com/dev-tips/242-considerate-javascript/

JavaScript performance article

選択的にモジュールをダウンロードする際に利用できるウェブAPIとブラウザのサポートについて。
メモリ、CPU数、バッテリー、ストレージの空き容量、ネットワーク、saveDataなど


サイト、サービス、ドキュメント


Moiva.io - Measure and compare JavaScript libraries

moiva.io/

npm webservice Tools

npmパッケージの同士を比較できるツール。
NPMダウンロード数、Bundlephobiaでのサイズ、ThoughWorks、Google Trends、GitHubのStar/Pulseなどを並べて見れるツール


Cloudflare Pages

pages.cloudflare.com/

cloudflare webservice

Cloudflareの静的サイトホスティングサービス。
NetlifyやVercelのようにコミット/PRごとのレプビューURLの生成、Cloudflare Workersを使ったFaaSの仕組みを持っている


ソフトウェア、ツール、ライブラリ関係


cincheo/jsweet: A Java to JavaScript transpiler.

github.com/cincheo/jsweet

Java JavaScript Tools

JavaのコードからTypeScript/JavaScriptのコードに変換するTranspiler


f/honst: Fixes your dataset according to your rules.

github.com/f/honst

JavaScript library

オブジェクトの配列に対してルールを元にデータを編集するライブラリ


Agamnentzar/ag-psd: Javascript library for reading and writing PSD files

github.com/Agamnentzar/ag-psd

JavaScript library

PSDファイルの読み書きをするライブラリ


asos-craigmorten/opine: Fast, minimalist web framework for Deno ported from ExpressJS.

github.com/asos-craigmorten/opine

deno library express

expressをDeno向けのポートしたウェブサーバライブラリ


書籍関係


Micro Frontends Architecture Patterns

zenn.dev/okmttdhr/books/8c977618755cb68ad2c0

MicroFrontend architecture book

Micro Frontendsを始めとしたアーキテクチャパターンについての電子書籍


この記事へ修正リクエストをする
JSer.info Slackに参加する