在瀏覽 GitHub 並尋找可協作的開源專案時，我發現了 Neo.mjs。我對這個計畫產生了興趣，並開始更多地研究這個新框架。我想在這篇文章中分享我發現的所有內容。

什麼是 Neo.mjs？

Neo.mjs 旨在建立高效能、資料驅動的 Web 應用程序，重點在於利用 Web Worker 來提高 UI 回應能力。以下是它可以提供的詳細概述：

• Web Workers 的多執行緒： Neo.mjs 的主要創新之一是它對 Web Workers 的預設使用。它將複雜的邏輯、繁重的計算和資料處理任務卸載到後台執行緒（Web Worker），從而允許主 UI 執行緒保持回應。
• 快速且輕量級：它的目標是創建高效、高速的應用程序，同時減少框架的佔用空間。這使其成為建立儀表板、CRM 和資料視覺化工具等大規模資料密集型應用程式的理想選擇。
• 資料驅動的UI：此框架提供了資料驅動的方法，可以幫助開發人員有效地將資料模型綁定到UI元件。

框架特點：

• 反應式程式設計： Neo.mjs 使用反應式程式設計模型，這表示資料模型中的變更會自動傳播到 UI 元件，確保流暢的使用者體驗。
• 基於元件的架構：與許多現代 JavaScript 框架一樣，Neo.mjs 採用基於元件的架構，允許開發人員創建可重複使用的 UI 元件，從而促進程式碼模組化和可維護性。
• 聲明式 UI：它支援定義使用者介面的聲明式方式，使開發人員能夠編寫更清晰、更易於理解的程式碼。
• 最小依賴關係： Neo.mjs 建置為以最小依賴關係工作，這有助於減少套件大小和載入時間。
• UI/Worker 分離： 該框架有效地將 UI 渲染與繁重的資料處理任務分開，這是維護響應式應用程式的關鍵因素。

設定：Neo.mjs 入門

設定您的第一個項目非常簡單。開始方法如下：

步驟 1：安裝 Neo.mjs 應用程式產生器

開啟終端並執行以下命令來產生新的 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 會在您的工作區中自動產生 apps 資料夾。在此資料夾內，您的應用程式的主入口點可以在 view/MainContainer.mjs 檔案中找到。您將在這裡開始建立 UI 元件和應用程式邏輯。

第 4 步：探索結構

您的新 Neo.mjs 工作區預先配置了視圖、元件和其他應用程式檔案的資料夾。花一些時間探索文件結構以了解應用程式的不同部分是如何組織的。這將使您開始建立自訂元件時變得更加容易。

小心

Neo.mjs 具有獨特的語法，可能看起來與傳統的 JavaScript 框架有點不同。它廣泛使用物件文字以類似 JSON 的方式定義 UI 元件。此語法旨在最大限度地提高效能並為建立複雜的資料驅動應用程式提供靈活性。

作為一個初學者，我發現一開始掌握文件如何互動和相互溝通具有挑戰性。這是我仍在學習的。

接下來是什麼？

我計劃更深入地研究 Neo.mjs，嘗試建立簡單的 UI，並探索如何充分利用其多執行緒效能功能。請繼續關注未來的部落格文章甚至影片教學課程，我希望在其中分享更深入的提示、技巧和使用 Neo.mjs 建立高性能 Web 應用程式的範例。

如果您有興趣加入我的學習之旅，請隨意探索 Neo.mjs GitHub 儲存庫並嘗試其網站中的一些範例應用程式。

如果您曾經使用過Neo.mjs，請發表評論並提供一些技巧！