Просматривая GitHub и ища проекты с открытым исходным кодом для совместной работы, я нашел Neo.mjs. Я заинтересовался этим проектом и начал больше исследовать эту новую структуру. Я хочу поделиться всем, что я узнал об этом, в этом сообщении в блоге.

Что такое Neo.mjs?

Neo.mjs был разработан для создания высокопроизводительных веб-приложений, управляемых данными, с упором на использование веб-работников для повышения скорости реагирования пользовательского интерфейса. Вот подробный обзор того, что он может предложить:

• Многопоточность с помощью веб-воркеров: Одним из основных нововведений Neo.mjs является использование веб-воркеров по умолчанию. Он переносит сложную логику, тяжелые вычисления и задачи обработки данных на фоновые потоки (веб-работники), позволяя основному потоку пользовательского интерфейса оставаться отзывчивым.
• Быстрый и легкий: Он направлен на создание высокоэффективных и высокоскоростных приложений при одновременном уменьшении занимаемой среды. Это делает его идеальным для создания крупномасштабных приложений с большим объемом данных, таких как информационные панели, CRM и инструменты визуализации данных.
• Пользовательский интерфейс, управляемый данными: Платформа предлагает подход, управляемый данными, который помогает разработчикам эффективно связывать модели данных с компонентами пользовательского интерфейса.

Особенности фреймворка:

• Реактивное программирование: Neo.mjs использует модель реактивного программирования, что означает, что изменения в моделях данных автоматически распространяются на компоненты пользовательского интерфейса, обеспечивая удобство работы с пользователем.
• Компонентная архитектура: Как и многие современные среды JavaScript, Neo.mjs использует компонентную архитектуру, которая позволяет разработчикам создавать повторно используемые компоненты пользовательского интерфейса, обеспечивая модульность кода и удобство сопровождения.
• Декларативный пользовательский интерфейс: Он поддерживает декларативный способ определения пользовательских интерфейсов, что позволяет разработчикам писать более чистый и понятный код.
• Минимальные зависимости: Neo.mjs создан для работы с минимальными зависимостями, что помогает уменьшить размеры пакетов и время загрузки.
• Разделение пользовательского интерфейса и рабочих процессов: Платформа эффективно отделяет рендеринг пользовательского интерфейса от тяжелых задач по обработке данных, что является ключевым фактором в поддержке адаптивных приложений.

Настройка: начало работы с 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 автоматически создает папку приложений в вашем рабочем пространстве. Внутри этой папки основная точка входа вашего приложения находится в файле view/MainContainer.mjs. Здесь вы начнете создавать компоненты пользовательского интерфейса и логику приложения.

Шаг 4. Изучите структуру

Ваше новое рабочее пространство Neo.mjs поставляется с предварительно настроенными папками для представлений, компонентов и других файлов приложения. Потратьте некоторое время на изучение структуры файлов, чтобы понять, как организованы различные части приложения. Это облегчит вам задачу при создании пользовательских компонентов.

Берегись

Neo.mjs имеет уникальный синтаксис, который может показаться немного отличающимся от традиционных фреймворков JavaScript. Он широко использует объектные литералы для определения компонентов пользовательского интерфейса, напоминающих JSON. Этот синтаксис предназначен для максимизации производительности и обеспечения гибкости при создании сложных приложений, управляемых данными.

Поначалу мне было сложно понять, как файлы взаимодействуют и взаимодействуют друг с другом. Это то, чему я все еще учусь.

Что дальше?

Я планирую глубже погрузиться в Neo.mjs, поэкспериментировать с созданием простых пользовательских интерфейсов и изучить, как в полной мере использовать его возможности многопоточной производительности. Следите за новостями в блоге или даже видеоруководством, в котором я надеюсь поделиться более подробными советами, приемами и примерами использования Neo.mjs для создания высокопроизводительных веб-приложений.

Если вы хотите присоединиться ко мне в этом учебном путешествии, не стесняйтесь изучить репозиторий Neo.mjs GitHub и опробовать некоторые примеры приложений на их веб-сайте.

Оставьте комментарий, если вы раньше использовали Neo.mjs, с некоторыми советами!