GitHub を閲覧し、共同作業できるオープンソース プロジェクトを探しているときに、Neo.mjs を見つけました。私はこのプロジェクトに興味を持ち、この新しいフレームワークについて詳しく調べ始めました。このブログ投稿で、それについて私が知ったことすべてを共有したいと思います。

Neo.mjsとは何ですか?

Neo.mjs は、Web ワーカーを活用して UI の応答性を向上させることに重点を置き、高性能のデータ駆動型 Web アプリケーションを構築するために設計されました。これが提供できるものの詳細な概要は次のとおりです:

• Web ワーカーによるマルチスレッド: Neo.mjs の主要な革新の 1 つは、Web ワーカーのデフォルトの使用です。複雑なロジック、重い計算、データ処理タスクをバックグラウンド スレッド (Web ワーカー) にオフロードし、メイン UI スレッドの応答性を維持できるようにします。
• 高速&軽量: フレームワークのフットプリントを削減しながら、高効率で高速なアプリケーションを作成することを目的としています。そのため、ダッシュボード、CRM、データ視覚化ツールなど、大規模でデータ量の多いアプリケーションの構築に最適です。
• データ駆動型 UI: このフレームワークはデータ駆動型のアプローチを提供し、開発者がデータ モデルを UI コンポーネントに効率的にバインドできるようにします。

フレームワークの機能:

• リアクティブ プログラミング: Neo.mjs はリアクティブ プログラミング モデルを使用します。これは、データ モデルの変更が UI コンポーネントに自動的に反映され、スムーズなユーザー エクスペリエンスを保証することを意味します。
• コンポーネントベースのアーキテクチャ: 多くの最新の JavaScript フレームワークと同様に、Neo.mjs はコンポーネントベースのアーキテクチャを採用しており、開発者は再利用可能な UI コンポーネントを作成でき、コードのモジュール性と保守性を促進します。
• 宣言型 UI: ユーザー インターフェイスを定義する宣言型の方法をサポートし、開発者がよりクリーンで理解しやすいコードを作成できるようにします。
• 最小限の依存関係: Neo.mjs は最小限の依存関係で動作するように構築されており、バンドル サイズと読み込み時間の削減に役立ちます。
• UI/ワーカーの分離: このフレームワークは、UI レンダリングを大量のデータ処理タスクから効果的に分離します。これは、応答性の高いアプリケーションを維持するための重要な要素です。

セットアップ: Neo.mjs の使用を開始する

最初のプロジェクトのセットアップは簡単です。開始方法は次のとおりです:

ステップ 1: Neo.mjs App Generator をインストールする

ターミナルを開き、次のコマンドを実行して、新しい Neo.mjs ワークスペースとアプリケーションを生成します。

npx neo-app@latest

ステップ 2: セットアップ プロンプトに従います

コマンドを実行すると、新しい Neo.mjs アプリケーションをカスタマイズするための一連のプロンプトが表示されます。私の設定は次のとおりです:

> npx neo-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Welcome to the neo.mjs app generator!
current version of neo-app: 7.10.0
? Please choose a name for your neo workspace: neo-workspace
? Please choose a name for your neo app: MyApp
? Please choose a theme for your neo app: 
  neo-theme-dark 
  neo-theme-light 
  neo-theme-neo-light 
  all 
❯ none 
? Please choose your main thread addons: (Press  to select,  to toggle all,  to invert selection, and  to proceed)
❯◯ AmCharts
 ◯ AnalyticsByGoogle
 ◉ DragDrop
 ◯ HighlightJS
 ◯ LocalStorage
 ◉ Navigator
 ◯ MapboxGL
(Move up and down to reveal more choices)
? Do you want to use SharedWorkers? Pick yes for multiple main threads (Browser Windows): no
? Do you want to use a ServiceWorker for caching assets? no

このリンクでは、すべてのセットアップを詳細に説明する素晴らしいビデオが見つかります。

ステップ 3: アプリケーションを起動する

セットアップが完了すると、必要なパッケージが自動的にインストールされます。アプリケーションはデフォルトのブラウザを起動し、localhost:8080 を開きます。ここで、新しく作成した Neo.mjs アプリケーションが実行されていることがわかります:

Neo.mjs がワークスペースにアプリ フォルダーを自動的に生成していることがわかります。このフォルダー内の view/MainContainer.mjs ファイルにアプリケーションのメイン エントリ ポイントがあります。ここで、UI コンポーネントとアプリケーション ロジックの構築を開始します。

ステップ 4: 構造を調べる

新しい Neo.mjs ワークスペースには、ビュー、コンポーネント、その他のアプリケーション ファイル用のフォルダーが事前に構成されています。時間をかけてファイル構造を調べて、アプリのさまざまな部分がどのように構成されているかを理解してください。これにより、カスタム コンポーネントの構築を開始するときに簡単になります。

注意喚起

Neo.mjs には、従来の JavaScript フレームワークとは少し異なるように見える独自の構文があります。 オブジェクト リテラルを広範囲に使用して、JSON に似た方法で UI コンポーネントを定義します。この構文は、パフォーマンスを最大化し、複雑なデータ駆動型アプリケーションを構築するための柔軟性を提供するように設計されています。

初心者として、最初はファイルがどのように相互作用し、相互に通信するかを理解するのが難しいと感じました。それは私がまだ学んでいることです。

次は何ですか?

Neo.mjs をさらに深く掘り下げて、シンプルな UI の構築を実験し、そのマルチスレッド パフォーマンス機能を最大限に活用する方法を模索する予定です。今後のブログ投稿やビデオ チュートリアルにもご期待ください。そこでは、Neo.mjs を使用して高パフォーマンスの Web アプリケーションを構築するためのより詳細なヒント、テクニック、例を共有できればと思っています。

この学習の旅に参加することに興味があれば、お気軽に Neo.mjs GitHub リポジトリを探索し、Web サイトにあるサンプル アプリケーションのいくつかを試してみてください。

以前に Neo.mjs を使用したことがある場合は、いくつかのヒントとともにコメントを残してください!