Mientras navegaba por GitHub y buscaba proyectos de código abierto en los que colaborar, encontré Neo.mjs. Me interesé en este proyecto y comencé a investigar más sobre este nuevo marco. Quiero compartir todo lo que descubrí al respecto en esta publicación de blog.

¿Qué es Neo.mjs?

Neo.mjs fue diseñado para crear aplicaciones web de alto rendimiento basadas en datos, con un fuerte enfoque en aprovechar los trabajadores web para mejorar la capacidad de respuesta de la interfaz de usuario. Aquí hay una descripción detallada de lo que puede ofrecer:

• Multiproceso con trabajadores web: Una de las principales innovaciones de Neo.mjs es el uso predeterminado de trabajadores web. Descarga lógica compleja, cálculos pesados ​​y tareas de procesamiento de datos a subprocesos en segundo plano (trabajadores web), lo que permite que el subproceso principal de la interfaz de usuario siga respondiendo.
• Rápido y liviano: Su objetivo es crear aplicaciones altamente eficientes y de alta velocidad al tiempo que reduce la huella del marco. Esto lo hace ideal para crear aplicaciones a gran escala con gran cantidad de datos, como paneles, CRM y herramientas de visualización de datos.
• IU basada en datos: El marco ofrece un enfoque basado en datos, que ayuda a los desarrolladores a vincular de manera eficiente modelos de datos a componentes de UI.

Características del marco:

• Programación reactiva: Neo.mjs utiliza un modelo de programación reactiva, lo que significa que los cambios en los modelos de datos se propagan automáticamente a los componentes de la interfaz de usuario, lo que garantiza una experiencia de usuario fluida.
• Arquitectura basada en componentes: Al igual que muchos marcos de JavaScript modernos, Neo.mjs emplea una arquitectura basada en componentes que permite a los desarrolladores crear componentes de interfaz de usuario reutilizables, promoviendo la modularidad y la mantenibilidad del código.
• UI declarativa: Admite una forma declarativa de definir interfaces de usuario, lo que permite a los desarrolladores escribir código más limpio y comprensible.
• Dependencias mínimas: Neo.mjs está diseñado para funcionar con dependencias mínimas, lo que ayuda a reducir el tamaño de los paquetes y los tiempos de carga.
• Separación de interfaz de usuario/trabajador: El marco separa eficazmente la representación de la interfaz de usuario de las tareas pesadas de procesamiento de datos, un factor clave para mantener aplicaciones receptivas.

Configuración: introducción a Neo.mjs

Configurar tu primer proyecto es sencillo. A continuación le indicamos cómo empezar:

Paso 1: Instalar el generador de aplicaciones Neo.mjs

Abre tu terminal y ejecuta el siguiente comando para generar un nuevo espacio de trabajo y aplicación Neo.mjs:

npx neo-app@latest

Paso 2: Sigue las indicaciones de configuración

Después de ejecutar el comando, se le guiará a través de una serie de indicaciones para personalizar su nueva aplicación Neo.mjs. Así es como fue mi configuración:

> 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

En este enlace encontrarás un bonito vídeo que explica toda la configuración con más detalles.

Paso 3: Inicie la aplicación

Después de completar la configuración, los paquetes necesarios se instalarán automáticamente. Luego, la aplicación iniciará su navegador predeterminado y abrirá localhost:8080. Aquí es donde verás tu aplicación Neo.mjs recién creada ejecutándose:

Notarás que Neo.mjs genera automáticamente una carpeta de aplicaciones en tu espacio de trabajo. Dentro de esta carpeta, el punto de entrada principal de su aplicación se puede encontrar en el archivo view/MainContainer.mjs. Aquí es donde comenzará a crear los componentes de la interfaz de usuario y la lógica de la aplicación.

Paso 4: Explora la estructura

Su nuevo espacio de trabajo Neo.mjs viene preconfigurado con carpetas para vistas, componentes y otros archivos de aplicaciones. Dedique algún tiempo a explorar la estructura de archivos para comprender cómo se organizan las diferentes partes de la aplicación. Esto facilitará las cosas cuando empieces a crear componentes personalizados.

Aviso

Neo.mjs tiene una sintaxis única que puede parecer un poco diferente de los marcos de JavaScript tradicionales. Utiliza literales de objetos ampliamente para definir los componentes de la interfaz de usuario de una manera que se asemeja a JSON. Esta sintaxis está diseñada para maximizar el rendimiento y brindar flexibilidad para crear aplicaciones complejas basadas en datos.

Como principiante, al principio me resultó difícil comprender cómo los archivos interactúan y se comunican entre sí. Eso es algo que todavía estoy aprendiendo.

¿Qué sigue?

Estoy planeando profundizar en Neo.mjs, experimentar con la creación de interfaces de usuario simples y explorar cómo aprovechar al máximo sus capacidades de rendimiento multiproceso. Estén atentos a una futura publicación de blog o incluso a un video tutorial donde espero compartir consejos, trucos y ejemplos más detallados sobre el uso de Neo.mjs para crear aplicaciones web de alto rendimiento.

Si estás interesado en acompañarme en este viaje de aprendizaje, no dudes en explorar el repositorio GitHub de Neo.mjs y probar algunas de las aplicaciones de ejemplo en su sitio web.

¡Deja un comentario si usaste Neo.mjs antes con algunos consejos!