⇧ PayPay離れは起こりそうですかね。
⇧ 未だ、赤字から脱却できていない感じなんですかね？
ソフトバンクは赤字らしいけども。
Million.jsとは？
公式のドキュメントによりますと、
Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster.
Million works with React. Million makes creating web apps just as easy (It's just wrapping a React component!), but with faster rendering and loading speeds. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of React (try it out here)
⇧ Reactと一緒に利用できるものってことらしい。
論文も出てたみたいです。
Million.jsは,ユーザがページを訪れる前に,Webアプリケーションの対話型領域を計算するコンパイラを作成することにより,負荷時間と時間対対話型を低減する。仮想DOM実行時間は,コンパイラフラッグを通してインタラクティブコンテンツを最適化して,最適性能を達成するために,バッチ処理,スケジューリング,および反応性データプリミティブを計算する。最もポピュラーな仮想DOMライブラリーに対してベンチマークされたとき,Million.jsは,133%から300%の速いレンダリングと2347%の速い負荷をもたらした。比較ベンチマークと非公式ユーザ研究の両方を用いた実世界Webアプリケーションにおいて,Million.jsはReactから移動後35.11%速く負荷した。この知見は,Webアプリケーションが,Million.jsを使用するJavaScript UIライブラリを通して,1桁速い可能性を有することを示した。【JST・京大機械翻訳】
Million.js:Webのための高速コンパイラ増強仮想DOM【JST・京大機械翻訳】 | 文献情報 | J-GLOBAL 科学技術総合リンクセンター
⇧ 比較ベンチマークの内容が気にはなるけども。
Blocl virtual DOMって？
Million.jsの公式が発信してる情報で、「Block Virtual DOM」って用語が出てきたのだけど、
The Block Virtual DOM
In 2022, Blockdom was released. Taking a fundamentally different approach, Blockdom introduced the idea of a "block virtual DOM."
The Block virtual DOM takes a different approach to diffing, and can be broken down into two parts:
-
Static Analysis: The virtual DOM is analyzed to extract dynamic parts of the tree into a "Edit Map," or the list of the "edits" (mappings) of the dynamic parts of the virtual DOM to the state.
-
Dirty Checking: The state (not the virtual DOM tree) is diffed to determine what has changed. If the state has changed, the DOM is updated directly via the Edit Map.
⇧ 従来の「Virtual DOM」とは異なるアプローチを取っているらしい。
銀の弾丸ってわけではなく、
Lots of static content with little dynamic content
Block virtual DOM is best used when there is a lot of static content with little dynamic content. The biggest advantage the block virtual DOM has is that it doesn't need to think about the static parts of the virtual DOM, so if it can skip over a lot of static content, it can be very fast.
⇧ 「動的コンテンツ」の多い部分には向かなくて、「静的コンテンツ」の多い部分で真価を発揮するようです。
「SPA（Single Page Application）」とか、一部だけコンテンツが切り替わるようなシステムには向いているってことかね？
どっちにしろ、『Million is an extremely fast and lightweight (<4kb) virtual DOM that makes React components up to 70% faster.』ってことで、「React」を利用したシステム開発に慣れ親しんでいないとメリットが分かり辛いってことですかね。
「React」に慣れていかねばですかね...
ちなみに、
⇧ 上記サイト様によりますと、「no virtual DOM」って選択肢もあるみたい。
とりあえずは、
私はReactがJavaや .NETの開発者向けではないことに気がついた。 この場合は、デザインパターンが似ているAngularが適切な選択だったろう。
翻訳記事：エンタープライズ アプリでReactを選択したら解雇されそうになった話 | Graat（グラーツ）-グロース・アーキテクチャ＆チームス株式会社
⇧ 上記サイト様にもあるように、「React」の設計思想を理解していかねばならんということですかね...
あと、
⇧「Virtual DOM」と「Shadow DOM」の違いは、上記サイト様が詳しいです。
⇧ 通常の「DOM」も交えて、説明してくれている方もおられました。
上記サイト様の説明が正しいとすると、Viteで作成したReactのプロジェクトで、
⇧「Shadow DOM」が使われてるっぽい気が...
Suppose we want to render a React element (i.e., a button) after an existing element (i.e., an input box) in HTML. There are 2 ways to go about it. The first is without the shadow DOM approach, and the second is with shadow DOM. In both cases, we will use the official ReactDOMClient library and its createRoot method.
⇧ 上記サイト様によりますと、「ReactDOMClient」ってライブラリを使ってると「Shadow DOM」が利用できるらしいのですが、「ReactDOMClient」ってライブラリをインストールした覚えがない...
なるほど、ブラウザが勝手に追加してるものらしい...紛らわしいな...
今回はこのへんで。
