Эффективное управление состоянием в приложениях JavaScript с помощью Statemanjs
11 января 2023 г.При разработке приложений JavaScript важно учитывать его ограничения, такие как отсутствие поддержки потоков, однопоточная модель выполнения, ограниченная поддержка больших чисел и высокоточной арифметики и т. д. Эти ограничения могут сузить возможности языка. , но он остается ведущим языком в современной веб-разработке. По мере усложнения веб-приложений разработчики могут столкнуться с проблемами производительности. Существуют различные способы оптимизации веб-приложения, но одним из аспектов, который следует учитывать, является управление состоянием.
Управление состоянием — важнейший аспект создания современных приложений JavaScript. Это позволяет разработчикам управлять данными, которые управляют их приложениями, и помогает гарантировать надежность, масштабируемость и удобство обслуживания приложения. Доступно множество библиотек управления состоянием, каждая со своим набором функций, компромиссов и ограничений. В этой статье мы сосредоточимся на Statemanjs, независимой от фреймворка библиотеке управления состоянием для приложений JavaScript и Node.js. Мы рассмотрим ключевые функции и преимущества Statemanjs, и я объясню, почему это лучший выбор для управления состоянием в приложениях JavaScript. Но сначала давайте посмотрим, какие у нас есть подходы к управлению состоянием.
Подходы к управлению состоянием:
В JavaScript существует несколько подходов к управлению состоянием: неизменяемый, реактивный и изменяемый. Каждый со своим набором преимуществ и ограничений.
Неизменяемый подход. Неизменяемый подход предполагает создание новых копий состояния при каждом его обновлении, а не непосредственное изменение состояния. Это может обеспечить более высокий уровень безопасности и надежности, поскольку предотвращает случайные или несанкционированные изменения состояния. Однако неизменяемый подход может быть неэффективным в JavaScript из-за однопоточной модели выполнения и цикла обработки событий.
Реактивный подход. Реактивный подход включает определение зависимостей между обновлениями состояния и автоматическое повторное выполнение обновлений при изменении зависимостей. Реактивный подход может быть медленнее в других случаях, и его может быть сложнее изучить и использовать, чем другие подходы.
Изменяемый подход: изменяемый подход включает непосредственное обновление состояния, а не создание новых копий состояния или отслеживание зависимостей. Это может быть быстрее и эффективнее, чем неизменяемый или реактивный подходы, и его может быть проще понять и реализовать. Однако изменяемый подход может обеспечить более низкий уровень безопасности и надежности, поскольку позволяет разработчикам напрямую изменять состояние.
Краткий обзор:
Statemanjs – это независимая от фреймворка библиотека управления состоянием для приложений JavaScript и Node.js. Он написан на TypeScript, который обеспечивает отличную поддержку «из коробки», и имеет крошечный размер, менее 80 КБ (в распакованном виде).
Statemanjs использует изменяемый подход к управлению состоянием со ссылками на состояние только для чтения и строгим API для взаимодействия с состоянием. Давайте углубимся.
Производительность:
Одним из основных преимуществ Statemanjs является его более высокая производительность по сравнению с другими библиотеками управления состоянием. Statemanjs использует изменяемый подход к управлению состоянием, который напрямую обновляет состояние и позволяет избежать накладных расходов на создание новых копий состояния или отслеживание зависимостей. Это может сделать Statemanjs быстрее и эффективнее, чем библиотеки, использующие неизменяемые или реактивные подходы, такие как Redux или MobX.
Чтобы оценить производительность этих библиотек, мы использовали тестовый пример, который включает добавление элементов n в массив определенное количество раз — x. Элемент представляет собой объект {foo: "bar", baz: "qux"}. Между итерациями хранилище (то есть массив) сбрасывается до пустого массива.
Например: если n = 5 и x = 2, это означает добавить 5 элементов 2 раза (итерация).
Среднее значение для итераций вычисляется и записывается как результат.
В этом тесте Statemanjs стабильно превосходит Redux и MobX. Например, если n = 100000 и x = 10, результаты будут следующими:
| Либ | Разрешение (мс) | |:---:|:---:| | Редукс | 2354867.223542001 | | МобХ | 4473.258667119965 | | Государственные манифесты | 279,83934087000785 |
Как видите, в этом тесте Statemanjs более чем в 8000 раз быстрее, чем Redux, и почти в 16 раз быстрее, чем MobX. При большем количестве элементов или более сложной логике обновления разница в производительности между Statemanjs и другими библиотеками становится еще более заметной.
Например, при n = 5 0000000 (50 миллионов элементов) и x = 1 (1 итерация) и Redux, и MobX не могут завершить тест после более чем 6 часов выполнения, в то время как Statemanjs выполняет тест всего за 14 499,883542001247 мс (14,5 секунд).
Простота:
Помимо превосходной производительности, Statemanjs также проще для понимания и использования, чем другие библиотеки управления состоянием. У него четкий и строгий API, всего семь методов для взаимодействия с состоянием: set, get, subscribe, unsubscribeAll< /code>, getActiveSubscribersCount, развернуть и обновить. Эти методы позволяют разработчикам устанавливать и получать состояние, подписываться на изменения состояния и обновлять состояние контролируемым и надежным образом. Statemanjs также предлагает ссылки на состояние только для чтения, которые обеспечивают ограниченный доступ к состоянию и предотвращают случайные или несанкционированные изменения.
Этот простой и понятный API может упростить разработчикам изучение и использование Statemanjs, особенно если они плохо знакомы с управлением состоянием или имеют ограниченный опыт работы с другими библиотеками. Это также позволяет разработчикам сосредоточиться на основной логике своих приложений, а не тратить время на изучение сложных API или написание стандартного кода.
Масштабируемость:
Statemanjs легко масштабируется и подходит как для небольших, так и для крупных проектов. Он может обрабатывать широкий спектр типов состояний, от примитивов до сложных и многомерных объектов, и его легко использовать с любой интерфейсной средой, включая React, Vue и Svelte. Кроме того, пакет Statemanjs имеет небольшой размер, не содержит зависимостей и занимает менее 80 КБ (в неупакованном виде), что позволяет легко включать его в любой проект без увеличения объема приложения.
В дополнение к своей масштабируемости, Statemanjs также имеет отличную поддержку TypeScript из коробки. Это может облегчить разработчикам написание и поддержку типового кода, а также снизить риск возникновения ошибок и багов в их приложениях.
Надежность:
Statemanjs также обеспечивает более высокий уровень безопасности и надежности по сравнению с другими библиотеками управления состоянием. Его строгий API и ссылки на состояние только для чтения предотвращают случайные или несанкционированные изменения состояния, а его изменяемый подход гарантирует, что обновления состояния будут быстрыми и эффективными. Эти функции помогают разработчикам создавать более надежные и удобные в сопровождении приложения, а также снижают риск появления ошибок и багов в их коде.
По умолчанию ссылки на состояние доступны только для чтения, и изменить состояние можно только с помощью методов API.
Простая демонстрация
Это демо с TypeScript:
import { createState } from "@persevie/statemanjs";
type TransferElement = {
speed: number;
info: string;
error?: string;
};
// Create a new state with initial value { speed: 0, info: "" }
const transferState: = createState<TransferElement>({ speed: 0, info: "" });
// Subscribe to state changes and log the updated state
const unsubscribe = transferState.subscribe((state) => {
console.log("State updated:", state);
});
// Update the state to { speed: 50, info: "Transfer in progress" }
transferState.update((state) => {
state.speed = 50;
state.info = "Transfer in progress";
});
// Get the current state
const currentState = transferState.get();
console.log("Current state:", currentState);
// Unsubscribe from state updates
unsubscribe();
// Subscribe to state changes, but only log the updated state if the error
transferState.subscribe(
(state) => {
console.log("An error occurred:", state.error);
},
{
notifyCondition: (state) => {
state.error !== undefined;
},
},
);
// Set (create new object and replace old) the state to { speed: 0, info: "Ooops...", error: "Internet connection" }
transferState.set({
speed: 0;
info: "Ooops...",
error: Internet connection,
});
console.log("Active subscribers count:", transferState.getActiveSubscribersCount());
// Remove all subscribers
transferState.unsubscribeAll();
console.log("Active subscribers count after unsubscribe:", transferState.getActiveSubscribersCount());
// Output:
// "State updated: { speed: 50, info: "Transfer in progress" }"
// "Current state: { speed: 50, info: "Transfer in progress" }"
// "An error occurred: "Internet connection""
// "Active subscribers count: 1"
// "Active subscribers count after unsubscribe: 0"
Вывод:
В заключение следует отметить, что Statemanjs — отличный выбор для управления состоянием в приложениях JavaScript. Его превосходная производительность, простота, масштабируемость и надежность выделяют его среди других библиотек управления состоянием, и он хорошо подходит для широкого круга проектов и сред. Если вы ищете мощную и эффективную библиотеку управления состоянием для своего приложения JavaScript, ==Statemanjs — лучший выбор.==
* ссылка Statemanjs на GitHub * ссылка Statemanjs-react на GitHub * ссылка Statemanjs-vue на GitHub * ссылка Statemanjs-solid на GitHub
Оригинал