HN を表示: Vertex.js – 1kloc SPA フレームワーク

記事は次のとおりです。

マイクロフレームワークの台頭: 開発者が肥大化した JavaScript ツールを拒否する理由

最近、ある開発者が、約 1,000 行のコードで構築された単一ページのアプリケーション フレームワークを Hacker News に投稿したところ、大きな反響がありました。ミニマリストの SPA フレームワークであるこのプロジェクトは、Web 開発コミュニティで長年くすぶっていた議論を再燃させました。「私たちのツールは、解決できる問題に対して複雑になりすぎたのではないか?」というものです。 React のコア ライブラリ、ルーター、状態管理レイヤー、ビルド ツールを合わせると数十万行のコードに相当する場合、ルーティング、反応性、コンポーネントのレンダリングをわずか 1,000 行で実現するフレームワークでは、不快な疑問が生じます。顧客向けアプリケーションを構築している企業にとって、その質問に対する答えは、ロード時間、開発者の生産性、長期的なメンテナンスコストに大きな影響を及ぼします。

1,000 行のフレームワークが実際に証明していること

マイクロフレームワークの考え方は新しいものではありません。 Backbone.js が 2010 年に登場したとき、注釈付きのソース コードは約 1,800 行でした。Mithril.js は gzip 圧縮された状態で 10 KB 未満で出荷されます。このカテゴリの新しいエントリがそれぞれ注目に値するのは、行数そのものではなく、ブラウザ API の現在の状態について明らかになっている点です。最新のブラウザには、テンプレート リテラル、履歴 API、プロキシベースの反応性、カスタム要素、およびモジュールの読み込みのネイティブ サポートが付属しています。 10 年前、フレームワークでは Internet Explorer と Chrome の違いを正規化するだけでも数千行が必要でした。現在、熟練した開発者は、プラットフォーム プリミティブ上の薄いオーケストレーション層として、完全に機能する SPA フレームワークを構築できます。

これが重要なのは、会話を「どのフレームワークを選択すべきか?」ということから変えるためです。 「そもそもフレームワークが必要なのか？」動的なセクションを含むランディング ページ、社内ダッシュボード、顧客ポータルなどの中小規模のプロジェクトの場合、答えはますます「おそらくそうではない、または少なくとも重いものではない」になります。 1,000 行のフレームワークは、フレームワークの仕事が縮小するところまでプラットフォームが成熟したことの証拠です。

もちろん、React や Vue のようなフレームワークは、複雑な状態ツリー、サーバー側レンダリングのニーズ、厳格な規約の恩恵を受ける 20 人以上の開発者チームを抱える大規模アプリケーションで依然として重要な役割を果たしています。重要な洞察は、適切なツールは問題の範囲に完全に依存するということです。

JavaScript の肥大化による実際のコスト

Google 独自の調査では、読み込み時間が 100 ミリ秒増えるごとにコンバージョン率が最大 7% 低下する可能性があることが一貫して示されています。現在、Web ページの中央値は 500 KB を超える JavaScript を搭載しており、この数字は 2015 年からほぼ 3 倍に増加しています。企業にとって、これは抽象的なパフォーマンス指標ではありません。これは、収益の損失、直帰率の上昇、検索エンジンのランキングの低下に直接つながります。

問題はモバイル ネットワークではさらに悪化します。 3G 経由で接続しているミッドレンジ Android デバイスのユーザーは、最初の HTML がレンダリングされた後でも、JavaScript を多用したページがインタラクティブになるまで 5 ～ 8 秒待つことがあります。これは、モバイルファーストのブラウジングが標準であり、ネットワーク インフラストラクチャが大幅に変化する新興市場の顧客にサービスを提供する企業にとって、特に痛ましいことです。

解析時間: 大きな JavaScript バンドルは、アプリケーション コードの 1 行が実行される前であっても、解析とコンパイルに時間がかかります。

メモリプレッシャー: 複雑なフレームワークの内部構造により、アプリケーション自体が使用できるメモリが消費されます。

アップデート疲労: 主要なフレームワークのアップグレード (Angular 1 から 2、Vue 2 から 3、React クラス コンポーネントからフック) により、2 ～ 3 年ごとにコストのかかる移行作業が必要になります。

依存関係チェーン: 一般的な React プロジェクトの node_modules フォルダーには 800 ～ 1,200 個のパッケージが含まれており、それぞれに潜在的なセキュリティ脆弱性または重大な変更が含まれています。

ビルドの複雑さ: Webpack、Babel、PostCSS、およびそれらの構成ファイルは、それらが提供するアプリケーション コードを超えることがよくあります。

マイクロフレームワークはこれらのコストのほとんどを回避します。抽象化が少なくなると、壊すものが減り、監査する依存関係も減り、問題も減ります。

Frequently Asked Questions

What is a micro-framework like Vertex.js?

A micro-framework is a minimalist JavaScript library designed to handle core application tasks without the bulk of larger solutions. Vertex.js achieves this by providing essential SPA functionality—like routing and state management—in about 1,000 lines of code. This contrasts with frameworks that require separate, heavier libraries for routing or state, reducing overall complexity and bloat for smaller projects.

Why are developers moving towards simpler tools?

Many developers feel that modern JavaScript tooling has become overly complex for the average project. Heavy frameworks can introduce slow build times, a steep learning curve, and unnecessary features. Simpler tools like Vertex.js offer a faster, more understandable development experience by focusing on the essential problems a framework needs to solve, aligning better with the project's actual requirements.

Is Vertex.js suitable for a large, complex application?

Vertex.js is primarily designed for smaller projects where simplicity and low overhead are key. For very large, complex applications with many interactive components, a more feature-rich framework with a vast ecosystem might be more appropriate. For teams needing extensive pre-built modules, a service like Mewayz (offering 207 modules for $19/mo) could provide the necessary UI and functional components that a micro-framework lacks.

Do I still need a build tool with Vertex.js?

While Vertex.js itself is lightweight, you will likely still use a build tool for professional development. Tools like Vite or Parcel are necessary to bundle your code, handle npm dependencies, and enable modern JavaScript features. However, the overall toolchain remains simpler than those required by larger frameworks, as you avoid complex state-management and routing libraries.

Related Posts

• DJBの暗号学的オデッセイ：コードヒーローから標準規格の批評家へ
• 『悪魔城ドラキュラ』『ブラッドステインド』開発者の井田秀太郎氏死去、52歳
• CXMT は、一般的な市場価格の約半分の価格で DDR4 チップを提供してきました。
• HUD、非市民を公営住宅から退去させる規則を提案