#mobx — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #mobx, aggregated by home.social.
-
Context-driven Reusable Form Pattern: Масштабируемая архитектура для Create / Edit / Create-from-Source
Как перестать копировать формы и построить масштабируемую архитектуру В enterprise-приложениях формы множатся быстро: create, edit, import, create-from-lead, duplicate — и вот у вас уже шесть копий одной формы, а внутри условный ад из if (mode === …). О чём статья: Почему mode prop и giant form component не масштабируются; Как разделить форму на четыре слоя: presentation, orchestration, context, data source; Что такое capabilities и почему они лучше условной логики; Как адаптеры отвязывают форму от source entities; Куда прятать submit, валидацию и внешний store; Как тестировать такую архитектуру изолированно. Примеры на React + TypeScript, но подход применим к любому компонентному UI. Для начинающих и тех, кто уже устал от копипасты в enterprise.
https://habr.com/ru/articles/1038754/
#react #mobx #zustand #frontend #typescript #javascript #enterprise_architecture #формы_react #react_hook_form #redux
-
Context-driven Reusable Form Pattern: Масштабируемая архитектура для Create / Edit / Create-from-Source
Как перестать копировать формы и построить масштабируемую архитектуру В enterprise-приложениях формы множатся быстро: create, edit, import, create-from-lead, duplicate — и вот у вас уже шесть копий одной формы, а внутри условный ад из if (mode === …). О чём статья: Почему mode prop и giant form component не масштабируются; Как разделить форму на четыре слоя: presentation, orchestration, context, data source; Что такое capabilities и почему они лучше условной логики; Как адаптеры отвязывают форму от source entities; Куда прятать submit, валидацию и внешний store; Как тестировать такую архитектуру изолированно. Примеры на React + TypeScript, но подход применим к любому компонентному UI. Для начинающих и тех, кто уже устал от копипасты в enterprise.
https://habr.com/ru/articles/1038754/
#react #mobx #zustand #frontend #typescript #javascript #enterprise_architecture #формы_react #react_hook_form #redux
-
Context-driven Reusable Form Pattern: Масштабируемая архитектура для Create / Edit / Create-from-Source
Как перестать копировать формы и построить масштабируемую архитектуру В enterprise-приложениях формы множатся быстро: create, edit, import, create-from-lead, duplicate — и вот у вас уже шесть копий одной формы, а внутри условный ад из if (mode === …). О чём статья: Почему mode prop и giant form component не масштабируются; Как разделить форму на четыре слоя: presentation, orchestration, context, data source; Что такое capabilities и почему они лучше условной логики; Как адаптеры отвязывают форму от source entities; Куда прятать submit, валидацию и внешний store; Как тестировать такую архитектуру изолированно. Примеры на React + TypeScript, но подход применим к любому компонентному UI. Для начинающих и тех, кто уже устал от копипасты в enterprise.
https://habr.com/ru/articles/1038754/
#react #mobx #zustand #frontend #typescript #javascript #enterprise_architecture #формы_react #react_hook_form #redux
-
Context-driven Reusable Form Pattern: Масштабируемая архитектура для Create / Edit / Create-from-Source
Как перестать копировать формы и построить масштабируемую архитектуру В enterprise-приложениях формы множатся быстро: create, edit, import, create-from-lead, duplicate — и вот у вас уже шесть копий одной формы, а внутри условный ад из if (mode === …). О чём статья: Почему mode prop и giant form component не масштабируются; Как разделить форму на четыре слоя: presentation, orchestration, context, data source; Что такое capabilities и почему они лучше условной логики; Как адаптеры отвязывают форму от source entities; Куда прятать submit, валидацию и внешний store; Как тестировать такую архитектуру изолированно. Примеры на React + TypeScript, но подход применим к любому компонентному UI. Для начинающих и тех, кто уже устал от копипасты в enterprise.
https://habr.com/ru/articles/1038754/
#react #mobx #zustand #frontend #typescript #javascript #enterprise_architecture #формы_react #react_hook_form #redux
-
Облако своими руками для расчета пространственных стержней методом конечных элементов на Node js, React js и Three js
В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.
https://habr.com/ru/articles/1022206/
#webgl #mobx #мкэ #сопромат #расчеты_на_прочность #glsl #nodejs #инженерия
-
Облако своими руками для расчета пространственных стержней методом конечных элементов на Node js, React js и Three js
В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.
https://habr.com/ru/articles/1022206/
#webgl #mobx #мкэ #сопромат #расчеты_на_прочность #glsl #nodejs #инженерия
-
Облако своими руками для расчета пространственных стержней методом конечных элементов на Node js, React js и Three js
В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.
https://habr.com/ru/articles/1022206/
#webgl #mobx #мкэ #сопромат #расчеты_на_прочность #glsl #nodejs #инженерия
-
Облако своими руками для расчета пространственных стержней методом конечных элементов на Node js, React js и Three js
В данной статье (а возможно цикле статей) речь пойдет о собственной разработке облачного SPA приложения по моделированию пространственных стержневых систем методом конечных элементов с численно-аналитическим решением для инженеров-проектировщиков в основе которого математическая модель Эйлера-Бернулли, вариационные принципы и итерационный метод сопряжённых градиентов применяемый для большеразмерных СЛАУ с разреженной матрицей жёсткости с одной стороны, и JavaScripts экосистема облака, выполненного в стеке Node js, Express js бэкенд части, и React js, MobX, Three js, glsl shaders фронтенд части с другой стороны. Отображение эпюр усилий в пространственных стержневых элементах реализовано на шейдерах vertexShader и fragmentShader. Это позволяет вычислять эпюры для каждого стержня на лету и выполнять отображение графиков (в общем случае полиномов 5 степени) в пространстве мгновенно.
https://habr.com/ru/articles/1022206/
#webgl #mobx #мкэ #сопромат #расчеты_на_прочность #glsl #nodejs #инженерия
-
react-ui-kit-forms: новая библиотека для работы на React в стиле Angular
Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.
https://habr.com/ru/companies/cloud_x/articles/1005500/
#формы #react #angular #reactjs #mobx #вебразработка #cloudx
-
react-ui-kit-forms: новая библиотека для работы на React в стиле Angular
Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.
https://habr.com/ru/companies/cloud_x/articles/1005500/
#формы #react #angular #reactjs #mobx #вебразработка #cloudx
-
react-ui-kit-forms: новая библиотека для работы на React в стиле Angular
Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.
https://habr.com/ru/companies/cloud_x/articles/1005500/
#формы #react #angular #reactjs #mobx #вебразработка #cloudx
-
react-ui-kit-forms: новая библиотека для работы на React в стиле Angular
Связка React+MobX хорошо себя зарекомендовала при работе с формами, в то время как за реактивность модели данных в Angular обычно отвечает библиотека RxJS. Но что делать, если вы хотите воспользоваться преимуществами Angular в React или Node.js? В этой статье речь пойдет о новой библиотеке от Cloud X, которую мы разработали для того, чтобы проложить “мостик” из мира Angular, где всё богато, но дорого в мир React, где все дешево, но скудно. В этой статье я описываю применение ядра @cloudx/react-ui-kit-forms, которое отвечает за структуру модели данных, реактивность модели данных и контроль состава данных (валидацию), позволяя “скрестить” плюсы React и Angular на одном проекте.
https://habr.com/ru/companies/cloud_x/articles/1005500/
#формы #react #angular #reactjs #mobx #вебразработка #cloudx
-
Подходы к state management в React
У React-разработчика две беды: 1. Целевые данные изменились, а ререндера нет. 2. Целевые данные не изменились, а ререндер есть. Есть много вариантов подружить данные с интерфейсом, в рамках данной статьи я пройдусь по самым популярным из них. Выясним, как они устроены и для чего каждый из них подойдет лучше, обсудим конкретные реализации разных паттернов.
https://habr.com/ru/articles/984424/
#React #redux #zustand #mobx #valtio #jotai #state_management
-
Подходы к state management в React
У React-разработчика две беды: 1. Целевые данные изменились, а ререндера нет. 2. Целевые данные не изменились, а ререндер есть. Есть много вариантов подружить данные с интерфейсом, в рамках данной статьи я пройдусь по самым популярным из них. Выясним, как они устроены и для чего каждый из них подойдет лучше, обсудим конкретные реализации разных паттернов.
https://habr.com/ru/articles/984424/
#React #redux #zustand #mobx #valtio #jotai #state_management
-
Подходы к state management в React
У React-разработчика две беды: 1. Целевые данные изменились, а ререндера нет. 2. Целевые данные не изменились, а ререндер есть. Есть много вариантов подружить данные с интерфейсом, в рамках данной статьи я пройдусь по самым популярным из них. Выясним, как они устроены и для чего каждый из них подойдет лучше, обсудим конкретные реализации разных паттернов.
https://habr.com/ru/articles/984424/
#React #redux #zustand #mobx #valtio #jotai #state_management
-
Подходы к state management в React
У React-разработчика две беды: 1. Целевые данные изменились, а ререндера нет. 2. Целевые данные не изменились, а ререндер есть. Есть много вариантов подружить данные с интерфейсом, в рамках данной статьи я пройдусь по самым популярным из них. Выясним, как они устроены и для чего каждый из них подойдет лучше, обсудим конкретные реализации разных паттернов.
https://habr.com/ru/articles/984424/
#React #redux #zustand #mobx #valtio #jotai #state_management
-
Эволюция плеера RUTUBE: от монолита к гибким модулям
Принимая архитектурные решения, часто так или иначе приходится идти на компромисс: между качеством и скоростью разработки, сложностью реализации и удобством поддержки, быстротой решения бизнес-задачи и гибкостью. Со временем небольшие уступки накапливаются и проект покрывается легаси. Даже если исправно разгребать техдолг, то в любом случае на достаточно длинной дистанции решения и технологии устареют, и станет невозможно обойтись «генеральной уборкой» — потребуется смена архитектуры. В статье расскажу, как мы столкнулись с неизбежной необходимостью переделки веб-плеера RUTUBE — сервиса, который существует с 2006 года, пережил несколько смен команд и парадигм разработки и при этом достаточно большой и высоконагруженный, чтобы нельзя было «просто так взять и всё переписать».
-
Эволюция плеера RUTUBE: от монолита к гибким модулям
Принимая архитектурные решения, часто так или иначе приходится идти на компромисс: между качеством и скоростью разработки, сложностью реализации и удобством поддержки, быстротой решения бизнес-задачи и гибкостью. Со временем небольшие уступки накапливаются и проект покрывается легаси. Даже если исправно разгребать техдолг, то в любом случае на достаточно длинной дистанции решения и технологии устареют, и станет невозможно обойтись «генеральной уборкой» — потребуется смена архитектуры. В статье расскажу, как мы столкнулись с неизбежной необходимостью переделки веб-плеера RUTUBE — сервиса, который существует с 2006 года, пережил несколько смен команд и парадигм разработки и при этом достаточно большой и высоконагруженный, чтобы нельзя было «просто так взять и всё переписать».
-
Эволюция плеера RUTUBE: от монолита к гибким модулям
Принимая архитектурные решения, часто так или иначе приходится идти на компромисс: между качеством и скоростью разработки, сложностью реализации и удобством поддержки, быстротой решения бизнес-задачи и гибкостью. Со временем небольшие уступки накапливаются и проект покрывается легаси. Даже если исправно разгребать техдолг, то в любом случае на достаточно длинной дистанции решения и технологии устареют, и станет невозможно обойтись «генеральной уборкой» — потребуется смена архитектуры. В статье расскажу, как мы столкнулись с неизбежной необходимостью переделки веб-плеера RUTUBE — сервиса, который существует с 2006 года, пережил несколько смен команд и парадигм разработки и при этом достаточно большой и высоконагруженный, чтобы нельзя было «просто так взять и всё переписать».
-
Эволюция плеера RUTUBE: от монолита к гибким модулям
Принимая архитектурные решения, часто так или иначе приходится идти на компромисс: между качеством и скоростью разработки, сложностью реализации и удобством поддержки, быстротой решения бизнес-задачи и гибкостью. Со временем небольшие уступки накапливаются и проект покрывается легаси. Даже если исправно разгребать техдолг, то в любом случае на достаточно длинной дистанции решения и технологии устареют, и станет невозможно обойтись «генеральной уборкой» — потребуется смена архитектуры. В статье расскажу, как мы столкнулись с неизбежной необходимостью переделки веб-плеера RUTUBE — сервиса, который существует с 2006 года, пережил несколько смен команд и парадигм разработки и при этом достаточно большой и высоконагруженный, чтобы нельзя было «просто так взять и всё переписать».
-
Найди x: React + MobX + SSR + x = Счастье
С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение . Вы статье вы узнаете, как мы решили уравнение)
https://habr.com/ru/articles/880720/
#dependency_injection #inversion_of_control #di #ioc #react #mobx #ssr #server_side_rendering #state_management
-
Найди x: React + MobX + SSR + x = Счастье
С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение . Вы статье вы узнаете, как мы решили уравнение)
https://habr.com/ru/articles/880720/
#dependency_injection #inversion_of_control #di #ioc #react #mobx #ssr #server_side_rendering #state_management
-
Найди x: React + MobX + SSR + x = Счастье
С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение . Вы статье вы узнаете, как мы решили уравнение)
https://habr.com/ru/articles/880720/
#dependency_injection #inversion_of_control #di #ioc #react #mobx #ssr #server_side_rendering #state_management
-
Найди x: React + MobX + SSR + x = Счастье
С ростом приложения и увеличением количества зависимостей, мы осознали необходимость в централизованном управлении зависимостями, выходящем за рамки React и MobX. Существующие IoC-контейнеры показались избыточными и тяжеловесными. Поэтому было создано собственное решение . Вы статье вы узнаете, как мы решили уравнение)
https://habr.com/ru/articles/880720/
#dependency_injection #inversion_of_control #di #ioc #react #mobx #ssr #server_side_rendering #state_management
-
Основы программирования на примере исходного кода MobX
Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.
https://habr.com/ru/articles/813647/
#структуры_данных #алгоритмы #шаблоны_проектирования #solid #frontend #mobx #state_management #observer_pattern
-
Основы программирования на примере исходного кода MobX
Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.
https://habr.com/ru/articles/813647/
#структуры_данных #алгоритмы #шаблоны_проектирования #solid #frontend #mobx #state_management #observer_pattern
-
Основы программирования на примере исходного кода MobX
Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.
https://habr.com/ru/articles/813647/
#структуры_данных #алгоритмы #шаблоны_проектирования #solid #frontend #mobx #state_management #observer_pattern
-
> #React #Compiler is the result of a problem: the introduction of #hooks has led to far too much logic in #components.
It's clear to me that #Knockout had it right back in 2012; #MVVM is the correct pattern for #WebApps
https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler
#webDev #reactJs #javaScript #mobx #observables #viewModel #programming
-
Собрать звуковую спектрограмму на React и MobX
Привет! Я Таня, фронтенд-разработчик в KTS и студент магистратуры МГТУ им. Баумана. На одном из недавних проектов я работала над интересной фичей — визуальным представлением аудиоданных, a.k.a. звуковой спектрограммой. Казалось бы, штука нехитрая: кто не видел график, прыгающий в такт с музыкой на разных частотах? Он есть в любом секвенсоре, на любом диджейском пульте и даже в динамическом островке последних айфонов. Однако задача оказалась нетривиальной, поскольку для целей проекта мне нужно было разработать звуковую спектрограмму на React и MobX в особом дизайне. Подробных разборов этой темы и готовых решений я не нашла, поэтому в процессе пришлось самостоятельно разобраться с кучей тонкостей и нюансов. Результат можете посмотреть по ссылке . А в этой статье я расскажу, как сделать такую же звуковую спектрограмму, а также как изменять ее стиль и другие параметры.
https://habr.com/ru/companies/kts/articles/955044/
#визуализация_данных #Звуковая_спектрограмма #FFT #mobx #react
-
Удалить полпроекта: как мы переписывали MobX‑сторы на React Query в большом Next.js‑проекте
Привет. Я Дима Рагозин, фронтенд-разработчик в KTS . Эту статью я хочу начать с предыстории. Полтора года назад на проекте для одного крупного клиента мы получили задачу — ускорить главную страницу. К тому моменту в кодовой базе уже жили два отдельных фронтенд-приложения под две разные платформы — CSR-версия (Client Side Rendering) и SSR‑версия (Server Side Rendering), — а MobX‑сторы все время жизни проекта разрастались вместе с функциональностью. Каждый новый экран приносил еще один класс (а то и несколько), еще кучу связей, и в какой‑то момент мы стали замечать снижение воспринимаемой скорости приложения, избыточные HTTP‑запросы, сложности с поддерживаемостью и другие проблемы, которые становились критичнее по мере роста проекта. В статье я расскажу о том, как мы шаг за шагом перевели такие сторы на React Query, сократили код вокруг запросов на ≈50 % и практически избавились от повторных GET‑ов. Попутно поведаю о наших граблях и поделюсь советами по миграции.
https://habr.com/ru/companies/kts/articles/935086/
#mobx #React #React_Query #Nextjs #Frontend #Управление_состоянием #Оптимизация_производительности #ssr
-
Anyone using lit/signals in production or any other tc39 based signals approach?
I've been a long time user of mobx and found the pattern very powerful and well performing when correctly managed. I'm real tempted to replace this with signals now, but would to hear other folks experiences.
Mobx is very mature, but the payload is high. While signals are small but ergonomics are not there yet.
-
Внедрение зависимостей (DI) через библиотеку Tsyringe
Привет, Хабр! Меня зовут Роман Мельник, я фронтенд-разработчик во «ВКонтакте для Бизнеса». Наша команда создаёт инструменты, которые помогают владельцам сообществ управлять и развивать свои проекты. Сегодня я расскажу про Dependency Injection (DI) через библиотеку Tsyringe. Почему это важно? Крупные проекты сталкиваются со следующими проблемами: разрастающимся глобальным стором, сложностями тестирования, масштабирования и переиспользования кода. Внедрение зависимостей помогает решить эти вопросы, делая код гибким и управляемым. На практике это выглядит гораздо интереснее. Давайте разберёмся! Начнём с архитектурных принципов и паттернов.
-
Solid.js как альтернатива (P)React+MobX на практике
Как известно, у Solid довольно скудная экосистема, поэтому для сложных проектов я беру React+MobX. Однако недавно подвернулся небольшой mobile-only проект, в котором разве что маскированные инпуты и кастомные селекты, которых для Solid предостаточно. При этом требования к размеру выходных файлов и перфомансу были высокие. Очевидным решением посчитал взять Solid, заодно и сравнить его по всем параметрам (размер, перфоманс, возможности реактивности, удобство настройки) в реальном проекте. Никаких синтетических тестов с рендерингом больших таблиц и хранением в сторе нескольких мегабайт данных не будет, зато приведу замеры из реального приложения. Бонусом - репозиторий с универсальной архитектурой для Solid+Preact+React, где замена фреймворка (набора стейт-менеджер + рендеринг UI) производится одной строчкой кода.
-
Как MobX делает объекты реактивными с помощью Proxy
Привет! На связи снова Дмитрий — React-разработчик, который стремится разобраться, как всё устроено, и делится информацией с вами. В прошлой статье мы подробно разобрали, что такое Proxy и как он работает, поэтому повторяться не будем. Сегодня поговорим о том, как MobX использует Proxy, создавая свою "реактивную магию". Как MobX делает объекты реактивными? MobX превращает обычные объекты JavaScript в реактивные, что позволяет автоматически отслеживать изменения их свойств и обновлять зависимости. В основе этого механизма лежат два ключевых инструмента: makeAutoObservable и observable.
-
Топ-5 библиотек для управления состоянием React в 2025 году
Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.
-
Отладка и мониторинг в MobX: trace, introspection и spy
Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.
https://habr.com/ru/companies/gnivc/articles/855346/
#react #reactjs #mobx #javascript #web #frontend #frontend_разработка
-
I wrote about #React Compiler and compared with it with #Mobx.
Both help solve re-renders but only one helps with bigger problems
https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler
-
Redux это бойлерплейт, а Mobx нет! Но есть нюанс
На прошлой неделе впервые поучаствовал в конференции по Frontend, где один из докладчиков, расказывал, как удачно его команда переехала с Redux на Mobx. Главным преимуществом он назвал отсутствие бойлерплейта и ускорение разработки в полтора раза. Я прочитал несколько статей и посмотрел другие доклады, где все как один говорят, что Mobx лучше, чем Redux. Возможно это и так, но почему в сравнение всегда идет Redux, а не Redux-Toolkit, я не понимаю. Попытаемся конструктивно посмотреть действительно ли Mobx настолько хорош как о нем говорят.
-
Redux vs Mobx кого же выбрать для React-приложения в 2024 году?
Привет, Хабр! Сегодня я хочу поделиться с вами своими размышлениями о том, какой стейт менеджер лучше использовать для разработки приложений на React в 2024 году. Как вы знаете, React — это одна из самых популярных и мощных библиотек для создания пользовательских интерфейсов, которая предоставляет множество возможностей и преимуществ для разработчиков. Однако, по мере роста и усложнения приложений на React, возникает необходимость в управлении состоянием и данными, которые используются в разных компонентах. Для этого существуют различные решения, называемые стейт менеджерами. Стейт менеджер — это инструмент, который позволяет централизованно хранить, обновлять и передавать данные между компонентами, а также реагировать на изменения состояния. В этой статье я рассмотрю два из самых популярных и зрелых стейт менеджеров для React: Redux и Mobx. Я сравню их основные принципы, преимущества и недостатки, а также покажу примеры их использования в коде. Также я попытаюсь ответить на вопрос, какой из них лучше подходит для разработки современных приложений на React в 2024 году.
https://habr.com/ru/articles/795901/
#mobx #mobxstatetree #redux #reduxsaga #react #reactjs #javascript #webразработка #webпрограммирование #technology
-
Об одном способе реализации архитектуры крупного Flutter-приложения
Привет! Меня зовут Олег Скирюк, я лидирую контент-разработку в одной из команд билайна. Сам я перешёл в мобильную разработку из веба три года назад, после чего собрал и обучил одну из первых Flutter-команд в компании. Вместе с этой командой мы постоянно экспериментируем и пробуем различные решения, чтобы совершенствовать наши приложения. В этом посте я хочу рассказать про архитектуру Flutter-приложений, о том, как мы в билайне это делаем, чего мы достигли и как это у нас работает. Поговорим о создании архитектуры, организации управления состояниями и зависимостями, о привычных и не очень методах и концепциях, затронем Mobx, GetX и Flutter modular, а также разберём всё это на живом примере — на нашем мобильном приложении для дилеров. Мы обсудим его особенности, технические сложности, и посмотрим, как реализовать такое крупное приложение. Затем — углубимся в вопрос управления состоянием, зависимостями, приложением.
https://habr.com/ru/companies/beeline_tech/articles/785730/
#flutter #разработка_мобильных_приложений #mobx #getx #UI #дизайнсистема #верстка
-
Как я сделал проект для себя и получил приз от Telegram
Всем привет! Telegram устроил конкурс на разработку мини-приложений, где моя работа заняла призовое место. В конкурсе была высокая конкуренция, так как выбор технологий и идеи для приложения был свободный. В связи с этим Telegram даже увеличил общую стоимость призовых. В этой статье разберём как проходила разработка, с какими сложностями столкнулся и чему научился.
https://habr.com/ru/articles/779508/
#конкурс_разработчиков #telegram #fullstack_development #mobx #postgresql #supabase #anki
-
This must be some of the magic as to how adobe got #photoshop running in the browser with #lit and #mobx - https://github.com/adobe/lit-mobx
-
This would be a really interesting development for the #web & #JS in general: https://eisenbergeffect.medium.com/the-future-of-native-html-templating-and-data-binding-5f3e52fda259
Templating is neat, data binding is very cool, but personally just getting #signals natively into JS would be *incredible*!
I use #Mobx absolutely everywhere, even in Node, and its an incredible model that hugely improves how you think about & manage state. Native widely available support would be an absolute dream.
-
A bunch of shiny new goodness in #dart: https://medium.com/dartlang/announcing-dart-3-53f065a10635
Over time dart became my go-to for quick UI. #flutter is a pleasure to work with, and they have #mobx for easy store management. The dependency story is less insane than nodejs, too.
Of course flutter sucks really bad when it comes to behaving like a good native app would (anywhere, really. Even flutter web target sucks). But it allows to move fast and that's why it's ideal for small hacks.
-
#Signals are just the reactivity model from #Solid, #MobX, #Ember, #Knockout, et al. It pushes a notification with an #observable-like mechanism that something has changed, there’s a dependency graph (implicit or explicit) that is notified. Then, it schedules a pull to calculate values. #ReactJS #Preact #javaScript #webDev #frontend
-
Anyone had any experiences running 5.x and 6.x versions of #mobx on the same page?
We're running into some issues with conflicting versions across a few different components. Already using the isolateGlobalState flag in all cases but still losing reactivity in the v6 version that is lazy loaded late.
-
Hooks are a problem in React, they increase complexity and have odd behaviors and footguns, agreed!
mobx has been out there fixing this for years. Literally do none of these things, just use mobx, and go back to enjoying frontend dev again 🎉
-
Топ-5 библиотек для управления состоянием React в 2025 году
Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.
-
Топ-5 библиотек для управления состоянием React в 2025 году
Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.
-
Топ-5 библиотек для управления состоянием React в 2025 году
Хранение данных и управление глобальным состоянием в React-приложениях всегда было важной темой среди разработчиков. К 2025 году выбор подходящей библиотеки для решения этих задач стал еще более разнообразным — от проверенного Redux до современных, легковесных решений, таких как Zustand и SWR. Каждое из этих решений имеет свои особенности, плюсы и подводные камни, что делает выбор оптимального инструмента порой непростым. В этой статье я рассмотрю 5 самых популярных библиотек на сегодняшний день, проанализирую их основные преимущества, применение на реальных проектах и актуальность в контексте последних трендов разработки. Привет, Хабр! Меня зовут Мария Кустова, я frontend-разработчик IBS. Подобного рода сравнительные исследования стейт-менеджеров выходят каждый год. Когда я начинала сбор информации, именно перевод похожей статьи стал для меня отправной точкой, но в ней были приведены другие библиотеки. Думаю, эта статья будет интересна тем, кто хочет узнать, что сейчас активно используют коллеги по React.