Как стать Front-end разработчиком? #9 Хранение состояния (фреймворки)

Перед тем, как приступить к освоению библиотек хранения состояния, настоятельно рекомендую прочитать статью "Фронтенд фреймворки" и начать с изучения фреймворков.

А если вы все еще читаете эту статью, я подозреваю, что вы уже ознакомились с понятием "локальное состояние" в фронтенд фреймворках.

А что, если я скажу вам, что можно создать еще и "глобальное" хранилище состояний? 😱

Один из важнейших моментов в разработке - это способность приложения скейлиться (то есть масштабироваться, расти и тд). И важно понимать, что библиотеки хранения состояния - это только один из способов масштабировать ваше приложение. Если не хотите создавать сторонние зависимости, не торопитесь с их использованием.

Какие библиотеки использовать?

React

Давайте сравним две основные библиотеки для React - MobX и Redux.

• MobX использует экспериментальный синтаксис JS - декораторы. При написании с MobX используется ООП подход, и именно поэтому процесс написания будет выглядеть более логичным для большинства программистов. Код, написанный с использованием Mobx, гораздо чище кода Redux.
• Redux использует функциональный подход программирования и требует установки дополнительных зависимостей. Например, для использования асинхронного кода нужно разобраться в библиотеках вроде Redux Thunk и Redux Saga. Хорошо скейлится и поэтому подходит для больших приложений.

Изучение

• MobX проще освоить благодаря ООП, код чище и порог вхождения ниже. Комьюнити меньше, но информации для изучения достаточно. Тем не менее, я по своему опыту ощутил, что, если использовать эту библиотеку с React, сложно найти актуальные туториалы для современного подхода написания кода (с использованием хуксов).
• Redux поначалу кажется более запутанным из-за функционального программирования. Необходимость изучения сторонних зависимостей повышает порог вхождения и не способствует быстрому старту. Комьюнити больше по сравнению с MobX и актуальных туториалов очень много.

Дебаг

Расширения для удобного отслеживания состояния на каждом шаге

• React-devtools
• MobX-devtools
• Redux-devtools

Полезные ресурсы:

• Awesome-react - раздел MobX и Redux содержит в себе много ресурсов по изучению

Также в React глобальное хранилище состояния можно создать с помощью встроенного context API.

Angular

Для приложений на Angular существует библиотека вдохновленная Redux — @ngrx/store.

Также можно использовать Redux, так как он подходит для всех фреймворков или чистого JS.

Полезные ресурсы:

• @ngrx/store - официальный сайт
• Awesome-angular раздел NgRx

Vue

Можно выбрать Redux или Mobx либо спроектированные на их основе библиотеки под Vue, но наиболее оптимальным решением является официальная Flux-подобная библиотека Vuex.

Полезные ресурсы:

• Awesome-vue - раздел хранения состояния

Как действовать

Принцип изучения прост, но само обучение, как всегда, выглядит не так радужно:

1. Открывайте документацию, используйте информацию из разделов "Полезные ресурсы" и параллельно пробуйте создать супер простое тестовое приложение с использованием библиотеки хранения состояния (например "Счетчик", который можно увеличивать, уменьшать и т.д.). Так вы наглядно поймете как они работают.
2. Попробуйте внедрить библиотеку хранения состояния в свой существующий или новый проект. Перестройте структуру своих компонентов с использованием нового глобального состояния. Так вы потихоньку начнете понимать, зачем данные библиотеки существуют и как они используются.

Послесловие

Как уже было сказано выше, не старайтесь установить слишком много зависимостей "на всякий случай" в ваш проект. Используйте библиотеки хранения состояний с умом и тогда, когда вашему приложению это действительно необходимо. При правильном подходе данные библиотеки помогут создать масштабируемое и хорошо поддерживаемое приложение, при неправильном - только все усложнят.

Продолжайте учиться, практикуйтесь и хорошо высыпайтесь. Удачи! 🖖