[JavaScript, ReactJS] Biscuit-store — еще один взгляд на state-management в JavaScript приложениях
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Приветствую дамы и господа! В этой статье я расскажу о JavaScript библиотеке Biscuit-store. 
ОписаниеBiscuit - это многофункциональный, гибкий, модульный инструмент для создания и удобной работы с контейнерами управляемых состояний в JavaScript приложениях.Основные цели статьи
- Рассказать о biscuit-store и его целях;
- Провести сравнение с другими подобными инструментами;
- Дать краткий обзор функционала.
Здесь я не буду погружаться под капот, а лишь проведу краткий обзор.Плюсы biscuit-store
- Стремление к простоте исполнения;
- Поддержка React;
- Стремление к единому подходу;
- Асинхронность из коробки;
- Простое расширение через Middleware;
- Отсутствие зависимостей;
- Гибкая модульная архитектура;
- Оптимальное соотношение размера библиотеки и количества функций;
- Встроенный отладчик.
Характеристики
- Вес core- 18Kb, Gzip: 6.2кб (скомпилировано в CommonJs);
- Вес react модуля – 6.8, Gzip: 2.0кб;
- Вес adapter модуля – 9.6, Gzip: 3.5кб (скомпилировано в CommonJs);
- Проверено в браузерах:
- Internet-explorer 11+;
- Chrome 48+;
- Opera 25+;
- Mozilla firefox 40+;
- Safari 9+.
- Включена поддержка TypeScript.
Для чего создавалась эта библиотека и зачем она нужна?Чтобы понять мотивы создания библиотеки, надо посмотреть на существующие популярные инструменты для JavaScript state-management, а именно: redux и mobx.ReduxЭто легковесная библиотека, которая весит всего 2kB и представляет единый контейнер управляемых состояний для js приложения. Основными плюсами redux являются его малый вес и гибкость. C помощью redux можно разрабатывать приложения любого размера. Мне лично нравится эта библиотека.Но дьявол, как известно, в деталях.Все не так просто, как кажетсяКогда смотришь пример кода на GitHub кажется, что все понятно. Но, когда дело касается применения в реальном проекте и если вы новичок, то у вас может вскипеть мозг. Вы просто не понимаете что, куда и как… Судорожно начинаете искать в интернете статьи и видео-уроки чтобы понять, как собрать все паттерны воедино. Redux-utils конечно сглаживает эту проблему, но лишь частично.Отсутствие асинхронности из коробки.Вероятно, в 2015, когда создавалась эта библиотека, это не было столь значимо. Сейчас на дворе 2021 и асинхронность повсюду во вселенной JavaScript. Конечно, эта проблема частично решается через middleware, такие как redux-saga и redux-thunk. Но это порождает еще две проблемы: отсутствие единого подхода и увеличение зависимостей проекта.Отсутствие единого подходаRedux лентяй и прокрастинатор… Он хочет что бы работу за него делали другие. Вам нужна асинхронность - подключайте отдельные библиотеки для слайд-эффектов, нужно избавится от лишних перерисовок - подключайте reselect, бесит писать reducers через switch – подключайте что-то типа redux-actions. Весь этот зверинец и порождает отсутствие единообразия. Лишние зависимости от сторонних библиотекТут буду немногословен: лишние зависимости - не есть хорошо.ВыводRedux - хороший инструмент, но, я бы сказал, что он слишком много сваливает на разработчика.MobxОсновной лозунг mobx:
“Все, что может быть получено из состояния приложения, должно быть. Автоматически”.
Если redux - это лентяй и прокрастинатор, за которого нужно думать, то mobx - это скорее нарциссичный профессор в мире state-management. Он говорит: “Я все сделаю за тебя, а ты только включи творчество и нарисуй архитектуру».
Автоматика — это хорошо, особенно, если вы делайте одноразовый, быстрый проект, который после релиза уйдет в пыльный ящик или будет поддерживаться небольшой командой. Но если вы разрабатываете более крупный проект, над котором работают смеженные команды, то от всей этой архитектурной свободы вы скорее всего получите максимум боли… Иной раз вы просто не сможете понять что, откуда тянется.
Ни в коем случае не воспринимайте всё вышесказанное как хейт. Это всего лишь моё субъективное мнение, о плюсах и минусах данных инструментов.
Теперь можно поговорить о BiscuitЦельbiscuit-store - как раз заполнить нишу между прокрастинатором redux и профессором mobx. Создать некоего работягу, который ходит на завод и вытачивает заготовки. Он однообразно делает свою работу, не задавая лишних вопросов.По задумке, biscuit должен быть максимально функционален, в меру автоматизирован и поощрять единый подход к архитектуре.Перейдем к практикеВы наверняка заметили утку на превью к статье и задались вопросом: «Причем тут утка?», речь же о бисквите… Тут нет каких-то безумных аналогий, просто я предпочитаю описывать создание контейнера состояний в biscuit по принципу трех шагов создания утки:
- Создайте утку;
- Донесите до утки, что она утка и должна, крякать, летать и плавать;
- Научите утку крякать, летать и плавать.
Хватит слов, давайте поиграем в утиного богаИтак, создадим нашу утку (хранилище состояний).Если вы ранее использовали redux, то вы привыкли, что у вас есть одно хранилище состояний для всего приложения. Напротив, Biscuit-store поощряет создание нескольких контейнеров для разных абстрактных сегментов вашего приложения.
import { createStore } from '@biscuit-store/core';
export const { store, actions } = createStore({
name: 'duck',
initial: { value: '' },
});
Мы создали хранилище с минимально необходимыми настройками. То есть у нас теперь есть утка. Но она еще не осознает, что она утка и не умеет быть таковой.Теперь мы должны донести до нее, что она утка и должна делать вещи, присущие уткам.
import { createStore } from '@biscuit-store/core';
import { adapter } from './adapter';
export const { store, actions } = createStore({
name: 'duck',
initial: { value: '' },
actions: {
duckSwim: 'duck/swim',
duckFly: 'duck/fly',
duckQuack: 'duck/quack',
},
middleware: [adapter]
});
В поле actions мы явно указали то, что должна уметь наша стейт-машина, то есть наша утка теперь знает, что ей надо делать некие действия. Теперь нам нужно научить утку делать те самые действия.
import { createAdapter } from '@biscuit-store/adapter';
const { action, connect } = createAdapter();
action('duck/swim', () => {
return { value: 'duck flews' };
});
action('duck/fly', () => {
return { value: 'duck flews' };
});
action('duck/quack', (payload, state, { send }) => {
// This is an asynchronous way of transmitting the payload
send({ value: 'duck quacks' });
});
export const adapter = connect;
Adapter это модуль промежуточного программного обеспечения который позволяет завязывать логику на состояния.Наша утка готова отправится в большой мир.Давайте проверим, на что она способна.
import { actions, store } from './store/duck'
const { duckQuack } = actions;
store.subscribe((state) => {
console.log(state.value); // 'duck quacks'
})
duckQuack.dispatch();
А так это будет выглядит в React.
import { observer, useDispatch } from '@biscuit-store/react';
import { actions } from './store/duck';
const { duckQuack } = actions;
export default observer(
({ value }) => {
const [setQuack] = useDispatch(duckQuack);
return (
<div className='DuckWrapper'>
<p>action: {value}</p>
<button onClick={setQuack}>Duck quacks</button>
</div>
);
},
[duckQuack]
);
Вот небольшое демо.На этом все, спасибо за внимание! Web-сайт проектаBiscuit-store молод и нуждается в поддержкеBiscuit еще очень молод и находится в стадии бета-тестирования.
Если вам понравилась эта библиотека, помогите ей развиваться звездочкой в GitHub'
===========
Источник:
habr.com
===========
Похожие новости:
- [JavaScript, Программирование, HTML, TensorFlow] Отслеживание лиц в реальном времени в браузере с использованием TensorFlow.js. Часть 1 (перевод)
- [JavaScript, Программирование] Почему вы можете обойтись без Babel (перевод)
- [Анализ и проектирование систем, Учебный процесс в IT] Пример модели знаний о требованиях
- [JavaScript] Неудачный опыт миграции Electron приложения на ECMAScript модули
- [JavaScript, ReactJS] Поиск данных в столбцах таблицы с пагинацией (front-часть)
- [JavaScript, ReactJS, Карьера в IT-индустрии, TypeScript] Яндекс.Практикум запустил курс «React-разработчик»
- [Управление e-commerce, Управление продуктом, Управление продажами] Зачем бизнесу внедрять PIM-системы и как это сделать эффективно
- [Разработка мобильных приложений] Как выбрать мобильную кросс-платформу в 2021 году (перевод)
- [Разработка веб-сайтов, JavaScript, Программирование, ReactJS] Разрабатываем чат на React с использованием Socket.IO
- [JavaScript, API] ExtendScript Работа с композициями
Теги для поиска: #_javascript, #_reactjs, #_javascript, #_library, #_statemachine, #_management, #_react, #_immutable, #_javascript, #_reactjs
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 25-Ноя 15:16
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Приветствую дамы и господа! В этой статье я расскажу о JavaScript библиотеке Biscuit-store.  ОписаниеBiscuit - это многофункциональный, гибкий, модульный инструмент для создания и удобной работы с контейнерами управляемых состояний в JavaScript приложениях.Основные цели статьи
“Все, что может быть получено из состояния приложения, должно быть. Автоматически”.
Автоматика — это хорошо, особенно, если вы делайте одноразовый, быстрый проект, который после релиза уйдет в пыльный ящик или будет поддерживаться небольшой командой. Но если вы разрабатываете более крупный проект, над котором работают смеженные команды, то от всей этой архитектурной свободы вы скорее всего получите максимум боли… Иной раз вы просто не сможете понять что, откуда тянется. Ни в коем случае не воспринимайте всё вышесказанное как хейт. Это всего лишь моё субъективное мнение, о плюсах и минусах данных инструментов.
import { createStore } from '@biscuit-store/core';
export const { store, actions } = createStore({ name: 'duck', initial: { value: '' }, }); import { createStore } from '@biscuit-store/core';
import { adapter } from './adapter'; export const { store, actions } = createStore({ name: 'duck', initial: { value: '' }, actions: { duckSwim: 'duck/swim', duckFly: 'duck/fly', duckQuack: 'duck/quack', }, middleware: [adapter] }); import { createAdapter } from '@biscuit-store/adapter';
const { action, connect } = createAdapter(); action('duck/swim', () => { return { value: 'duck flews' }; }); action('duck/fly', () => { return { value: 'duck flews' }; }); action('duck/quack', (payload, state, { send }) => { // This is an asynchronous way of transmitting the payload send({ value: 'duck quacks' }); }); export const adapter = connect; import { actions, store } from './store/duck'
const { duckQuack } = actions; store.subscribe((state) => { console.log(state.value); // 'duck quacks' }) duckQuack.dispatch(); import { observer, useDispatch } from '@biscuit-store/react';
import { actions } from './store/duck'; const { duckQuack } = actions; export default observer( ({ value }) => { const [setQuack] = useDispatch(duckQuack); return ( <div className='DuckWrapper'> <p>action: {value}</p> <button onClick={setQuack}>Duck quacks</button> </div> ); }, [duckQuack] ); Если вам понравилась эта библиотека, помогите ей развиваться звездочкой в GitHub' =========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 25-Ноя 15:16
Часовой пояс: UTC + 5