Als ich GitHub durchstöberte und nach Open-Source-Projekten für die Zusammenarbeit suchte, stieß ich auf Neo.mjs. Ich interessierte mich für dieses Projekt und begann, mehr über dieses neue Framework zu recherchieren. Alles, was ich darüber herausgefunden habe, möchte ich in diesem Blogbeitrag teilen.

Was ist Neo.mjs?

Neo.mjs wurde für die Erstellung leistungsstarker, datengesteuerter Webanwendungen entwickelt, wobei der Schwerpunkt auf der Nutzung von Web-Workern für eine verbesserte Reaktionsfähigkeit der Benutzeroberfläche liegt. Hier finden Sie eine detaillierte Übersicht darüber, was es zu bieten hat:

• Multithreading mit Web-Workern: Eine der wichtigsten Innovationen von Neo.mjs ist die standardmäßige Verwendung von Web-Workern. Es verlagert komplexe Logik, umfangreiche Berechnungen und Datenverarbeitungsaufgaben auf Hintergrund-Threads (Web-Worker), sodass der Haupt-UI-Thread weiterhin reaktionsfähig bleibt.
• Schnell und leichtgewichtig: Ziel ist es, hocheffiziente Hochgeschwindigkeitsanwendungen zu erstellen und gleichzeitig den Platzbedarf des Frameworks zu reduzieren. Dies macht es ideal für die Erstellung umfangreicher, datenintensiver Anwendungen wie Dashboards, CRMs und Datenvisualisierungstools.
• Datengesteuerte Benutzeroberfläche: Das Framework bietet einen datengesteuerten Ansatz, der Entwicklern hilft, Datenmodelle effizient an UI-Komponenten zu binden.

Framework-Funktionen:

• Reaktive Programmierung: Neo.mjs verwendet ein reaktives Programmiermodell, was bedeutet, dass Änderungen in Datenmodellen automatisch an die UI-Komponenten weitergegeben werden, um ein reibungsloses Benutzererlebnis zu gewährleisten.
• Komponentenbasierte Architektur: Wie viele moderne JavaScript-Frameworks verwendet Neo.mjs eine komponentenbasierte Architektur, die es Entwicklern ermöglicht, wiederverwendbare UI-Komponenten zu erstellen und so die Modularität und Wartbarkeit des Codes zu fördern.
• Deklarative Benutzeroberfläche: Es unterstützt eine deklarative Methode zum Definieren von Benutzeroberflächen und ermöglicht es Entwicklern, saubereren und verständlicheren Code zu schreiben.
• Minimale Abhängigkeiten: Neo.mjs ist so konzipiert, dass es mit minimalen Abhängigkeiten arbeitet, was dazu beiträgt, Bundle-Größen und Ladezeiten zu reduzieren.
• UI/Worker-Trennung: Das Framework trennt effektiv das UI-Rendering von umfangreichen Datenverarbeitungsaufgaben, ein Schlüsselfaktor für die Aufrechterhaltung reaktionsfähiger Anwendungen.

Einrichtung: Erste Schritte mit Neo.mjs

Das Einrichten Ihres ersten Projekts ist unkompliziert. So fangen Sie an:

Schritt 1: Installieren Sie den Neo.mjs App Generator

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um einen neuen Neo.mjs-Arbeitsbereich und eine neue Anwendung zu generieren:

npx neo-app@latest

Schritt 2: Befolgen Sie die Setup-Eingabeaufforderungen

Nachdem Sie den Befehl ausgeführt haben, werden Sie durch eine Reihe von Eingabeaufforderungen zum Anpassen Ihrer neuen Neo.mjs-Anwendung geführt. So lief mein Setup:

> 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

Unter diesem Link finden Sie ein schönes Video, das die gesamte Einrichtung mit weiteren Details erklärt.

Schritt 3: Starten Sie die Anwendung

Nach Abschluss des Setups werden die notwendigen Pakete automatisch installiert. Die Anwendung startet dann Ihren Standardbrowser und öffnet localhost:8080. Hier sehen Sie, wie Ihre frisch erstellte Neo.mjs-Anwendung ausgeführt wird:

Sie werden feststellen, dass Neo.mjs automatisch einen Apps-Ordner in Ihrem Arbeitsbereich generiert. In diesem Ordner befindet sich der Haupteinstiegspunkt Ihrer Anwendung in der Datei view/MainContainer.mjs. Hier beginnen Sie mit dem Aufbau Ihrer UI-Komponenten und Anwendungslogik.

Schritt 4: Erkunden Sie die Struktur

Ihr neuer Neo.mjs-Arbeitsbereich ist mit Ordnern für Ansichten, Komponenten und anderen Anwendungsdateien vorkonfiguriert. Nehmen Sie sich etwas Zeit, um die Dateistruktur zu erkunden, um zu verstehen, wie verschiedene Teile der App organisiert sind. Dies erleichtert Ihnen die Erstellung benutzerdefinierter Komponenten.

Kopf hoch

Neo.mjs hat eine einzigartige Syntax, die sich möglicherweise ein wenig von herkömmlichen JavaScript-Frameworks unterscheidet. Es verwendet häufig Objektliterale, um UI-Komponenten auf eine Weise zu definieren, die JSON ähnelt. Diese Syntax ist darauf ausgelegt, die Leistung zu maximieren und Flexibilität für die Erstellung komplexer, datengesteuerter Anwendungen zu bieten.

Als Anfänger fand ich es zunächst schwierig zu verstehen, wie die Dateien interagieren und miteinander kommunizieren. Das ist etwas, was ich immer noch lerne.

Was kommt als nächstes?

Ich habe vor, tiefer in Neo.mjs einzutauchen, mit der Erstellung einfacher Benutzeroberflächen zu experimentieren und herauszufinden, wie ich die Multithread-Leistungsfähigkeiten voll ausnutzen kann. Seien Sie gespannt auf einen zukünftigen Blog-Beitrag oder sogar ein Video-Tutorial, in dem ich hoffentlich detailliertere Tipps, Tricks und Beispiele für die Verwendung von Neo.mjs zum Erstellen leistungsstarker Webanwendungen teilen werde.

Wenn Sie daran interessiert sind, mich auf dieser Lernreise zu begleiten, können Sie gerne das GitHub-Repository von Neo.mjs erkunden und einige der Beispielanwendungen auf ihrer Website ausprobieren.

Hinterlassen Sie einen Kommentar mit einigen Tipps, wenn Sie Neo.mjs schon einmal verwendet haben!