While browsing GitHub and looking for open-source projects to collaborate on, I found Neo.mjs. I became interested in this project and started researching more about this new framework. I want to share everything that I found out about it in this blog post.
What is Neo.mjs?
Neo.mjs was designed for building high-performance, data-driven web applications, with a strong focus on leveraging web workers for improved UI responsiveness. Here's a detailed overview of what it can offer:
- Multithreading with Web Workers: One of Neo.mjs's primary innovations is its default use of web workers. It offloads complex logic, heavy computations, and data processing tasks to background threads (web workers), allowing the main UI thread to remain responsive.
- Fast & Lightweight: It aims to create highly efficient, high-speed applications while reducing the framework's footprint. This makes it ideal for building large-scale, data-heavy applications like dashboards, CRMs, and data visualization tools.
- Data-Driven UI: The framework offers a data-driven approach, which helps developers efficiently bind data models to UI components.
Framework Features:
- Reactive Programming: Neo.mjs uses a reactive programming model, which means changes in data models automatically propagate through to the UI components, ensuring a smooth user experience.
- Component-Based Architecture: Like many modern JavaScript frameworks, Neo.mjs employs a component-based architecture that allows developers to create reusable UI components, promoting code modularity and maintainability.
- Declarative UI: It supports a declarative way of defining user interfaces, enabling developers to write cleaner and more understandable code.
- Minimal Dependencies: Neo.mjs is built to work with minimal dependencies, which helps reduce bundle sizes and load times.
- UI/Worker Separation: The framework effectively separates UI rendering from heavy data processing tasks, a key factor in maintaining responsive applications.
Setup: Getting Started with Neo.mjs
Setting up your first project is straightforward. Here’s how to get started:
Step 1: Install the Neo.mjs App Generator
Open your terminal and run the following command to generate a new Neo.mjs workspace and application:
npx neo-app@latest
Step 2: Follow the Setup Prompts
After running the command, you’ll be guided through a series of prompts to customize your new Neo.mjs application. Here's how my setup went:
> npx neo-app@latest
Need to install the following packages:
neo-app@7.10.0
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 <space> to select, <a> to toggle all, <i> to invert selection, and <enter> 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
In this link you will find a nice video explaining all the setup with more details.
Step 3: Launch the Application
After completing the setup, the necessary packages will be installed automatically. The application will then launch your default browser, opening localhost:8080. This is where you'll see your freshly created Neo.mjs application running:
You’ll notice that Neo.mjs automatically generates an apps folder in your workspace. Inside this folder, your application's main entry point can be found in the view/MainContainer.mjs file. This is where you’ll start building your UI components and application logic.
Step 4: Explore the Structure
Your new Neo.mjs workspace comes preconfigured with folders for views, components, and other application files. Spend some time exploring the file structure to understand how different parts of the app are organized. This will make it easier when you start building custom components.
Heads-Up
Neo.mjs has a unique syntax that may seem a bit different from traditional JavaScript frameworks. It uses object literals extensively to define UI components in a way that resembles JSON. This syntax is designed to maximize performance and provide flexibility for building complex, data-driven applications.
As a beginner, I found it challenging at first to grasp how the files interact and communicate with one another. That's something that I still learning.
What's Next?
I’m planning to dive deeper into Neo.mjs, experimenting with building simple UIs, and exploring how to take full advantage of its multithreaded performance capabilities. Stay tuned for a future blog post or even a video tutorial where I hope share more in-depth tips, tricks, and examples of using Neo.mjs to build high-performance web applications.
If you're interested in joining me on this learning journey, feel free to explore the Neo.mjs GitHub repository and try out some of the example applications in their website.
Leave a comment if you used the Neo.mjs before with some tips!
Top comments (1)
The idea of using more webworker is nice, but creating ui from another JS model instead of using simple html and css is not my way.