Рубрика «mobx» - 2

в 7:40, , рубрики: javascript, JS, mobx, React, ReactJS, tinkoff, Tinkoff.ru, Блог компании Tinkoff.ru, Разработка веб-сайтов

Опыт использования MobX в большом приложении - 1

Всем привет!

Меня зовут Сергей, я работаю в команде разработки приложений контроля качества Tinkoff.
Поделюсь опытом нашей команды в использовании библиотеки Mobx и расскажу о деталях работы с ней в связке с React. В этой статье не будет описания базовых концепций. Я расскажу о вещах, которые мы отметили для себя за время разработки и считаем полезными для всех, кто решил использовать Mobx в своем проекте.

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

Читать полностью »

в 9:06, , рубрики: graphql, javascript, mobx, observable, redux, rxjs, state, state manager, архитектура, Программирование, Разработка веб-сайтов, Совершенный код

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.

Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.

Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?

Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.

Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

Читать полностью »

в 9:22, , рубрики: flux, javascript, mobx, React, ReactJS, redux, vuejs, vuex

В интернетах давно ведётся священная война между адептами Функционального Программирования и ООП, Redux и MobX, React и Angular. Многие годы я обходил её стороной, но теперь эта тема коснулась и меня.
image

Читать полностью »

в 15:26, , рубрики: javascript, mobx, React, state management, TypeScript, Разработка веб-сайтов

Разработка на javascript иногда становится похожа на работу детектива. Как понять чужой код? Хорошо, если разработчик обладает тонким искусством называть переменные так, чтобы другие поняли суть. А как быть, если члены команды все таки не всегда способны понять замысел своего коллеги? Как понять, что приходит в аргумент какой-либо функции?

Предположим, что аргумент функции называется errors. Вероятно в errors находится массив. Скорее всего строк? Ну то, что массив это понятно. Ведь далее проверятся его длинна. Но свойство length есть и у строки. Похоже, чтобы точно разобраться, необходимо поставить breakpoint и запустить скрипт. Затем полностью пройти по сценарию на UI (например нам нужен финальный шаг формы). Теперь в devtools видно, что errors — это объект с набором определенных полей, среди которых и поле length.

Подобная неоднозначность при разборе javascript кода приводит к пустой трате времени разработчика. Неплохим решением в данном случае может стать typescript (далее ts). Можно использовать его в следующем проекте, а еще лучше сделать поддержку ts в существующем. После этого время на понимание чужого кода сократится значительно. Ведь, чтобы понять структуру любых данных достаточно одного клика. Можно сконцентрироваться на логике работы с данными и в любой момент времени знать, что вы однозначно понимаете работу кода.

Читать полностью »

в 17:34, , рубрики: front-end разработка, javascript, mobx, react.js, ReactJS, redux, state management

Я работаю с Реактом на протяжении почти 3 лет, использовал как Redux так и MobX и у меня к текущему моменту возник вопрос. Почему абсолютное большинство front-end разработчиков продолжают свято верить в то, что Redux + Redux Saga + Reselect + 100500 других библиотек «облегчающих» жизнь — это лучшее решение на сегодняшний момент? Я приведу 4 аргумента в пользу того, чтобы в следующем проекте вы использовали MobX вместо Redux.
Читать полностью »

в 19:27, , рубрики: Cypress, javascript, mobx, React, ReactJS, webpack 4, Разработка веб-сайтов

Приветствую!

Читаю данный ресурс со времени основания, но время на написание статьи появились только сейчас, а значит пора поделиться своим опытом с сообществом. Начинающим разработчикам, рассчитываю, статья поможет улучшить качество проектирования, а опытным выступит в качестве чек-листа, чтобы не забыть важные элементы на этапе архитектуры. Для нетерпеливых — итоговый репозиторий и демо.

Читать полностью »

в 7:15, , рубрики: angular, DDD, dependency injection, di, inversion of control, ioc, javascript, mobx, mobx-state-tree, React, react-ioc, ReactJS, TypeScript, Проектирование и рефакторинг

Иерархическое внедрение зависимостей в React и MobX State Tree в качестве доменной модели - 1 Довелось мне как-то после нескольких проектов на React поработать над приложением под Angular 2. Прямо скажем, не впечатлило. Но один момент запомнился — управление логикой и состоянием приложения с помощью Dependency Injection. И я задался вопросом, удобно ли управлять состоянием в React используя DDD, многослойную архитектуру, и внедрение зависимостей?

Если интересно, как это сделать, а главное, зачем — добро пожаловать под кат!

Читать полностью »

в 9:34, , рубрики: javascript, mail.ru group, mobx, React, ReactJS, workshop, Блог компании Mail.Ru Group

Разыгрываем билеты на воркшоп «Advanced React State Management With MobX» - 1

Привет, хаброчитатели! Мы с классными новостями. Как только наши коллеги узнали, что Michel Weststrate готов сделать воркшоп в Москве, сразу собрали группу желающих. И решили разыграть два билета на мастер-класс среди читателей хаброблога. Про воркшоп и условия розыгрыша читайте под катом.Читать полностью »

в 9:36, , рубрики: holyjs, immer, javascript, Michel Weststrate, mobx, open source, Open Source Software, библиотека, Блог компании JUG.ru Group, конференции

«Ваша библиотека, как ваш ребёнок, может пойти в неожиданную для вас сторону»: интервью с создателем MobX - 1

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

Мишель Уэстстрате хорошо знает обо всём этом: у его библиотеки MobX больше 17 000 звёзд на гитхабе, число её контрибьюторов давно перевалило за сотню. А скоро Мишель приедет в Россию выступить на HolyJS, поэтому ребята из программного комитета конференции (Дмитрий Махнёв и Евгений Кот) подробно расспросили его: и об опенсорсе в целом, и конкретно о MobX, и о конференциях.
Читать полностью »

в 21:21, , рубрики: javascript, mobx, React, ReactJS, redux

Cразу небольшой спойлер — организация состояния в mobx ничем не отличается от организации общего состояния без использования mobx на чистом реакте. Ответ на закономерный вопрос зачем тогда собственно этот mobx нужен вы найдете в конце статьи а пока статья будет посвящена вопросу организации состояния в чистом в react-приложении без каких-либо внешних библиотек.

Как организовать общее состояние в react-приложениях без использования библиотек (и зачем нужен mobx) - 1

Реакт предоставляет способ хранить и обновлять состояние компонентов используя свойство state на инстансе компонента класса и метод setState. Но тем не менее среди реакт сообщества используются куча дополнительных библиотек и подходов для работы с состоянием (flux, redux, redux-ations, effector, mobx, cerebral куча их). Но можно ли построить достаточно большое приложение с кучей бизнес-логики c большим количеством сущностей и сложными взаимосвязями данных между компонентами используя только setState? Есть ли необходимость в дополнительных библиотеках для работы с состоянием? Давайте разберемся.Читать полностью »

123
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js