Build Ultra-Fast, Scalable, and Extensible Web Apps ⚡

🚀 Break Free from the Main Thread – Experience True Multi-Threading

Neo.mjs enables the creation of highly dynamic web applications by running everything inside an App Worker. From components and state providers to view controllers, everything operates within the worker, allowing the main thread to focus only on DOM updates and delegating UI events. This ensures high performance, smooth reactivity, and extensibility for both multi-window and SPA applications.

🔍 Why Neo.mjs?

Neo is a worker thread-driven frontend framework designed to create multithreaded GUIs using JavaScript. By leveraging the Off Main Thread (OMT) paradigm, Neo ensures that your application’s UI remains responsive, even during computationally intensive tasks.

Unlike traditional single-threaded frameworks, Neo distributes workloads across multiple threads, unlocking new levels of performance and scalability. Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.

Key Benefits of Neo.mjs

1. Multithreading for Performance:
   • Neo’s OMT paradigm moves tasks like data processing, state management, and rendering to worker threads, keeping the main thread free for rendering and user interactions.
   • This approach eliminates UI freezes and ensures a smooth user experience, even for complex applications.
2. Declarative Class Configuration:
   • Neo’s class config system allows you to define and manage classes in a clean, reusable way. This reduces boilerplate code and makes your codebase more maintainable.
   • With declarative configurations, you can focus on building features instead of wrestling with setup and initialization.
3. Modular and Scalable Architecture:
   • Neo’s modular design makes it easy to build scalable applications. Components are self-contained and reusable, promoting a clean separation of concerns.
   • Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
4. Ease of Use:
   • Neo’s intuitive API and comprehensive documentation make it easy to get started, even for developers new to multithreaded programming.
   • The framework’s design prioritizes developer productivity, allowing you to focus on solving real-world problems.
5. Future-Proof Technology:
   • Neo is built on modern web standards like JavaScript modules and worker threads, ensuring compatibility with the latest browser features.
   • By embracing the OMT paradigm, Neo is uniquely positioned to take advantage of future advancements in web development.

Real-World Applications

Neo is ideal for:

• Data-intensive applications: Handle large datasets and complex calculations without compromising UI responsiveness.
• Real-time dashboards: Build dynamic, real-time dashboards that update seamlessly.
• Enterprise solutions: Scale your application to meet the demands of large organizations.

Why Choose Neo Over Traditional Frameworks?

Traditional single-threaded frameworks often struggle with performance bottlenecks, especially when handling complex UIs or large datasets. Neo’s multithreaded architecture addresses these challenges head-on, delivering a responsive and scalable solution for modern web applications.

With Neo, you get:

• ✅ Responsive UIs: No more UI freezes or janky animations.
• 🚀 Scalability: Build applications that can handle increasing complexity without compromising performance.
• 💻 Developer Productivity: Spend less time optimizing and more time building features.
  
  

🌟 Key Features

🎭 Actor Model:
The App Worker acts as the central actor, handling application state and logic, independent of the main thread. This drives the OMT (off the main thread) paradigm into perfection, since it is keeping the main thread free for non-blocking DOM updates and UI interactions.

🔄 Reactive State Management:
Built-in reactivity allows dynamic, efficient updates between components and state providers.

⚡ Instant JavaScript module based Development Mode:
Zero builds or transpilations required. Run your app directly in the browser, modify reactive properties in real-time, and see instant updates. This gives you an unmatched debugging experience, saving time and reducing development costs. You can even build entire apps inside the console if you wish.

📊 Hierarchical State Management:
Seamlessly manage state between parent and child components with nested state providers. Each component binds to the state data from its closest provider, even combining data from multiple providers inside one binding.

🧩 Clean Architecture:
View controllers ensure a separation of concerns, isolating business logic from UI components for easier maintenance and testing.

🌐 Multi-Window & SPAs:
Easily build and manage complex, highly interactive applications that require multiple windows or traditional SPAs. No native shell required.

🌀 Dynamic Component Management:
Unmount, move, and remount components across the UI or even in separate browser windows — without losing the component’s state or logic. This runtime flexibility is a game-changer, preserving JS instances while still updating the UI dynamically.

:dependabot: No npm dependency hell:
Neo.mjs apps do not need any dependencies at all, just some dev dependencies for tooling.

💡 Perfect for Complex Use Cases

Need a web-based IDE, banking dashboard, or an enterprise-grade multi-window app? Neo.mjs is built for it.

📦 Declarative Class Configuration

Neo’s class config system allows you to define and manage classes in a declarative and reusable way. This simplifies class creation, reduces boilerplate code, and improves maintainability.

import Component from '../../src/component/Base.mjs';

class MyComponent extends Component {
    static config = {
        className   : 'MyComponent',
        myConfig_   : 'defaultValue',
        domListeners: {
            click: 'onClick'
        }
    }

    afterSetMyConfig(value, oldValue) {
       console.log('myConfig changed:', value, oldValue)
    }

    onClick(data) {
        console.log('Clicked!', data)
    }
}

export default Neo.setupClass(MyComponent);

With Neo.mjs’s class config system, you can:

• Define default properties and methods in a clean, structured way.
• Easily extend and reuse configurations across classes.
• Keep your codebase organized and scalable.

For more details, check out the Class Config System documentation.

🚀 Get Started

Quick Start

Run the following command in your terminal, and your new Neo app will be created, the local web server will start, and your app will open in a new browser window:

npx neo-app@latest

This one-liner sets up everything you need to start building with Neo, including:

• A new app workspace.
• A pre-configured app shell.
• A local development server.
• Opening your app inside a new browser window

📖 More details? Check out our Getting Started Guide

🧑‍🎓 Make sure to dive into the Learning Section

🧠 The most advanced tutorial to help you with getting up to speed is this one: Earthquakes Tutorial

Next steps:

• ⭐ Explore exciting Examples here: Neo.mjs Examples
• Many more are included inside the repos apps & examples folders.
• 📘 All Blog Posts are listed here: Neo.mjs Blog
  
  

🤝 Join the Community

💬 Have questions? Join our Slack channel and connect with other developers.

🛠️ Want to contribute? Check out our Contributing Guide.

Copyright (c) 2015 - today, Tobias Uhlig