Мы запихнули LifeOS в Telegram Mini App: как сделать сложный UI на React + Framer Motion и не сойти с ума

На рынке тысяча трекеров привычек. Еще тысяча трекеров зала. И еще сотня приложений для медитаций. Проблема одна: они разрозненны. Данные о том, что я плохо спал, никак не влияют на план тренировок в другом приложении. А медитация живет в вакууме от уровня стресса. Мы хотели создать LifeOS — единую систему управления собой, которая живет там, где я провожу 90% времени. В Telegram. Никаких впнов, ноушенов и тому подобное не надо. Но была проблема: стандартные Telegram WebApps часто выглядят... как веб-сайты из 2010-го. Мне нужен был «вайб» Apple: премиальный, темный, с глубокими тенями и, главное, тактильный. Так появился UltyMyLife. Вот как мы строили архитектуру дисциплины на React. Интересный факт: Перед тем как релизнуть проект, мы поняли, что нужен полный редизайн, и в итоге потратили еще пару недель.

https://habr.com/ru/articles/992100/

#telegrambot #telegram_api #telegram_mini_app #react #rxjs #framer_motion #javascript

От учебной проблемы до 1000 пользователей: как я писал интерактивный учебник по RxJS

История проекта началась в прошлом (2025) году. Я преподаю JavaScript в HTML Academy, и когда мне предложили взять поток начинающих разработчиков по Angular, я согласился. Мы успешно прошли базу, но когда дело дошло до HttpClient и обработки данных, я столкнулся с проблемой: студентам сложно понять Observable и реактивный подход, имея в багаже только промисы. На лекции мне задали резонный вопрос: А где посмотреть актуальные и понятные материалы по RxJS?. Я провел небольшой ресерч и понял, что ниша полупустая: видеокурсы - это долго, документация - сложно, а интерактивной практики почти нет. Так появился мой open-source проект. В этой статье я показываю честную аналитику за 90 дней: как набрать 1000 пользователей без рекламы, почему провалилась моя любимая фича и как пет-проект превращается в полноценный продукт. Смотреть аналитику

https://habr.com/ru/articles/991572/

#rxjs #angular #pet_project #open_source #frontend #reactive_programming #обучение_программированию #аналитика #mvp #javascript

Реактивная Архитектура: Пишем надежный Optimistic UI на чистом RxJS (Pattern Compensating Transaction)

Пользователи ненавидят спиннеры. Они хотят видеть лайк сразу после клика. Optimistic UI решает эту проблему, но создает новую: что делать, если сервер вернет ошибку? В императивном коде (Promise/async-await) откат состояния превращается в ад из try/catch и ручных мутаций переменных, порождая Race Conditions. В этой статье я покажу, как реализовать надежный паттерн Compensating Transaction на чистом RxJS . Мы построим архитектуру, где состояние это поток, который невозможно "сломать" частыми кликами или сетевыми сбоями. Никаких if/else, только чистые потоки. Построить реактивный UI

https://habr.com/ru/articles/974068/

#angular #rxjs #typescript #frontend #архитектура #паттерны_проектирования #optimistic_ui #reactive_programming #state_management #best_practices

RxJS入門｜ObservableとOperator
https://qiita.com/Tsurukawauchi_Jin/items/85e41aca2ba8eac2fd8b?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #RxJS #初心者向け #アウトプット #operator #Observable

I feel like the currently-proposed TC39 Observables lacking some value that can be supplied upon "completion" is a mistake.

#RxJS #Observables #TC39 #ECMA262

The Epic Journey from React State Management Despair to StateDream

The raw, unfiltered story of one team's descent into React state management hell, their desperate search for salvation, and the revolutionary solution they built that every frontend developer secretly craves.

https://hyperdrift.io/blog/the-epic-journey-from-react-state-management-despair-to-statedream

#react #state-management #frontend #architecture #statedream #javascript #typescript #rxjs

🗺️ New package: `@ngworker/router-signal-store` 17.0.0

An #NgRx SignalStore-based version of `@ngworker/router-component-store` with no #RxJS dependency.

- `RouterSignalStore` shared API for DI
- `provideLocalRouterSignalStore` for local router signal store, a replacement for `ActivatedRoute`
- `provideGlobalRouterSignalStore` for global router signal store, a replacement for NgRx Router Store
- Strong and strict typing
- Serializable router state

https://github.com/ngworker/router-component-store/releases/tag/router-signal-store-v17.0.0
#OpenSource #Angular

Поиск на RxJS и Taiga UI

Привет, Хабр! Я Антон Марченко, разработчик в Т-Банке. Поделюсь интересной задачей по работе с потоками на RxJS, которую мы однажды решали. Представьте HR-портал ИТ-компании, в котором реализован поиск по постам и статьям. Нам предстояло внедрить на сайт несколько внешних поисков: по пользователям, ссылкам и исходникам. А еще предусмотреть скелетоны и обработку ошибок и заложить возможность добавлять новые внешние источники поиска динамически, не дорабатывая каждый раз пользовательский интерфейс.

https://habr.com/ru/companies/tbank/articles/936794/

#angular #вебразработа #rxjs

Angular Signals + RxJS: объединяем два реактивных мира в одном стейт-менеджере

Angular долгое время ассоциировался с RxJS. Даже слишком: многие разработчики ощущали, что без Observable ничего не работает. Но вот в Angular 17 появляются Signals — синхронная реактивность прямо из коробки. В 17+ — они становятся мейнстримом. Возникает вопрос: а что делать с RxJS? Выбрасывать? Signals и RxJS — не конкуренты, а два мощных инструмента для решения разных задач. И если их правильно сочетать, можно построить удобную, масштабируемую и эффективную архитектуру.

https://habr.com/ru/articles/935526/

#signal #rxjs #angular

Take a look inside observables with Bob Fornal at TechBash 2025.

Join us Nov 4-7 in the Poconos! Learn more and register: https://techbash.com/

#developers #angular #rxjs #javascript #webdev #kalahari #nepa

От магии до понятной структуры: разбираемся, как работает Change Detection в Angular

В Angular любое изменение в компоненте, которое отображается на экране, является результатом работы механизма отслеживания изменений (Change Detection, CD). За этим процессом стоит Zone.js, который можно представить в роли дирижера, сообщающего компонентам о необходимости обновить DOM. Zone.js не запускает CD сам. Он лишь создает контекст, в котором Angular потом может его запустить. Его задача только уведомлять Angular о завершении асинхронных операций, после чего Angular решает, нужно ли проверять изменения. Чтобы понять важность такого подхода, нужно учитывать особенности JavaScript. В JavaScript асинхронные операции, такие как setTimeout или fetch, разрывают стек вызовов. Это значит, что callback-функция, выполняемая после завершения асинхронной операции, не имеет информации о контексте, в котором она была вызвана. Для фреймворка, который отслеживает изменения, это создает определенные трудности: как узнать, что асинхронная операция завершилась и, возможно, изменила данные? Заглянуть под капот

https://habr.com/ru/articles/925260/

#Angular #Change_Detection #Zonejs #Zoneless #Angular_Signals #Производительность #Оптимизация #RxJS #Архитектура #javascript

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

Как говорил дядя Бен, большие продукты — это большая ответственность. И без сложных интерфейсов тут никуда: а с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций. Для МойОфис как мультипродуктовой экосистемы со сквозными сценариями — все эти вопросы очень актуальны! Поэтому на прошлой неделе JS-еры, дизайнеры и UX-исследователи нашей и других компаний собрались на митапе под названием Frontend&UX Talks, чтобы обсудить эти и другие проблемы современного веба. Получилось интересно, драйвово и даже сказочно! (и я в прямом смысле этого слова :)) Под катом расскажем в 7 тезисах, к каким выводам пришли и как именно: поехали! О фронтенде в 2025-м году мы поняли, что... Понятный и простой код — куда важнее, чем кажется Примитивы это сказка! (причем буквально...) Реактивное программирование актуальное и удобное! Но не для всех... Следить за CSS обновлениями каждый квартал – базовый минимум Темизация это нелегко, но есть лазейки! Редизайны продуктов – это не страшно! (ну почти...) За сложными интерфейсами – глаз да глаз...

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Как выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-систем

Как говорил дядя Бен, большие продукты — это большая ответственность. И без сложных интерфейсов тут никуда: а с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций. Для

https://habr.com/ru/companies/ncloudtech/articles/924704/

#javascript #ux #митап #css #дизайнсистема #интерфейсы #фигма #figma #js #rxjs

Do you want to understand core concepts and operations of Reactive Programming nice and easy?

Dive into our tutorial, Rx Playground!
👉 http://sml.io/rxplayground

Rx Playground gives you:
✅ Interactive learning with real-time data flow
✅ Fun environment to experiment with Rx operators
✅ Beginner-friendly tutorial with advanced use cases

📚 Learn how operators like map, merge, switchMap, debounceTime, and more really work by seeing them in action.

#reactiveprogramming #RxJS #threejs

Angular 20: Большое обновление для современного веба

Angular 20 — это мощное обновление, которое делает разработку веб-приложений быстрее, удобнее и современнее. Новые возможности шаблонов, стабильные сигналы, поддержка zoneless режима и интеграция с AI позволяют создавать высокопроизводительные приложения с минимальными усилиями. В этой статье разберём ключевые нововведения Angular 20 и покажем, как их использовать в ваших проектах.

https://habr.com/ru/articles/914934/

#ангуляр #angular_20 #rxjs #javascript #typescript #j #обновление

Explore #RxJS best practices designed for today’s modern ecosystem!

This #InfoQ article guides you through patterns that scale from Angular 16 all the way to Angular 17/18, helping you write cleaner, more efficient, and future-proof code.

📰 Read now: https://bit.ly/44Uvj7H

#Angular #Angular17 #Angular18 #WebDevelopment

People keep saying RxJS (well, observables) aren't suitable for React.

No, RxJS (and observables) are absolutely perfect for React.

#RxJS #React #ReactJS #FrontendDevelopment #Frontend

Has anyone here worked with RxDB (https://rxdb.info) before? 🤔

(Have I asked this question beige? 😅)

I like the concept and it seems robust from what I’ve been reading on the docs, but something about it rubs me the wrong way.

The tracking during dev perhaps that’s not possible to turn off? The quite aggressive marketing of the premium version? The constant popups while reading the docs?

Unsure, but I’d like to hear from people who have used it, if there are any.

#localFirst #js #rxjs

Toying with Javascript Promise and async and the like, I tried my own wrapper. The outcome was, I realized, somewhat like RxJS. Though in the example I toyed with, my wrapper could not genuinely deliver the outcome of a list of Promises (or setTimeout calls) and **tell when all were finished**.

So I looked how RxJS does it and ... it doesn't either 😎 . See https://codeberg.org/harald/Codeschnipselnotizen/src/branch/main/typescript/RxjsDoesNotWait.ts

https://rxjs.dev/guide/observable

#typescript #javascript #promise #rxjs #async #asynchell #programming

[Перевод] Что новенького в Angular 19

Всем привет, с вами Максим Иванов , и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19 , вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.

https://habr.com/ru/articles/884208/

#angular #angular2 #angularjs #angular_19 #rxjs #signal #google