Mastodon

techbashTake a look inside observables with Bob Fornal at TechBash 2025.Join us Nov 4-7 in the Poconos! Learn more and register: <a href="https://techbash.com/" rel="nofollow noopener" translate="no" target="_blank">https://techbash.com/</a><a href="https://social.vivaldi.net/tags/developers" class="mention hashtag" rel="nofollow noopener" target="_blank">#developers</a> <a href="https://social.vivaldi.net/tags/angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular</a> <a href="https://social.vivaldi.net/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a> <a href="https://social.vivaldi.net/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://social.vivaldi.net/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://social.vivaldi.net/tags/kalahari" class="mention hashtag" rel="nofollow noopener" target="_blank">#kalahari</a> <a href="https://social.vivaldi.net/tags/nepa" class="mention hashtag" rel="nofollow noopener" target="_blank">#nepa</a>

HabrОт магии до понятной структуры: разбираемся, как работает Change Detection в AngularВ Angular любое изменение в компоненте, которое отображается на экране, является результатом работы механизма отслеживания изменений (Change Detection, CD). За этим процессом стоит Zone.js, который можно представить в роли дирижера, сообщающего компонентам о необходимости обновить DOM. Zone.js не запускает CD сам. Он лишь создает контекст, в котором Angular потом может его запустить. Его задача только уведомлять Angular о завершении асинхронных операций, после чего Angular решает, нужно ли проверять изменения. Чтобы понять важность такого подхода, нужно учитывать особенности JavaScript. В JavaScript асинхронные операции, такие как setTimeout или fetch, разрывают стек вызовов. Это значит, что callback-функция, выполняемая после завершения асинхронной операции, не имеет информации о контексте, в котором она была вызвана. Для фреймворка, который отслеживает изменения, это создает определенные трудности: как узнать, что асинхронная операция завершилась и, возможно, изменила данные? Заглянуть под капот<a href="https://habr.com/ru/articles/925260/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/articles/925260/</a><a href="https://zhub.link/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a> <a href="https://zhub.link/tags/Change_Detection" class="mention hashtag" rel="nofollow noopener" target="_blank">#Change_Detection</a> <a href="https://zhub.link/tags/Zonejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#Zonejs</a> <a href="https://zhub.link/tags/Zoneless" class="mention hashtag" rel="nofollow noopener" target="_blank">#Zoneless</a> <a href="https://zhub.link/tags/Angular_Signals" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular_Signals</a> <a href="https://zhub.link/tags/%D0%9F%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C" class="mention hashtag" rel="nofollow noopener" target="_blank">#Производительность</a> <a href="https://zhub.link/tags/%D0%9E%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F" class="mention hashtag" rel="nofollow noopener" target="_blank">#Оптимизация</a> <a href="https://zhub.link/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> <a href="https://zhub.link/tags/%D0%90%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#Архитектура</a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

HabrКак выжить в мире сложных интерфейсов в 2025-м: 7 работающих рецептов от React и CSS до дизайн-системКак говорил дядя Бен, большие продукты — это большая ответственность. И без сложных интерфейсов тут никуда: а с ними и исследования становятся труднее, и встречается больше препятствий на этапе кода — от нюансов реактивного программирования до риска утонуть в разнообразии CSS-спецификаций. Для<a href="https://habr.com/ru/companies/ncloudtech/articles/924704/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/companies/ncloudtech/articles/924704/</a><a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://zhub.link/tags/ux" class="mention hashtag" rel="nofollow noopener" target="_blank">#ux</a> <a href="https://zhub.link/tags/%D0%BC%D0%B8%D1%82%D0%B0%D0%BF" class="mention hashtag" rel="nofollow noopener" target="_blank">#митап</a> <a href="https://zhub.link/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://zhub.link/tags/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#дизайнсистема</a> <a href="https://zhub.link/tags/%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81%D1%8B" class="mention hashtag" rel="nofollow noopener" target="_blank">#интерфейсы</a> <a href="https://zhub.link/tags/%D1%84%D0%B8%D0%B3%D0%BC%D0%B0" class="mention hashtag" rel="nofollow noopener" target="_blank">#фигма</a> <a href="https://zhub.link/tags/figma" class="mention hashtag" rel="nofollow noopener" target="_blank">#figma</a> <a href="https://zhub.link/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://zhub.link/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a>

SoftwareMillDo you want to understand core concepts and operations of Reactive Programming nice and easy?Dive into our tutorial, Rx Playground! 👉 <a href="http://sml.io/rxplayground" rel="nofollow noopener" translate="no" target="_blank">http://sml.io/rxplayground</a>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.<a href="https://softwaremill.social/tags/reactiveprogramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactiveprogramming</a> <a href="https://softwaremill.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> <a href="https://softwaremill.social/tags/threejs" class="mention hashtag" rel="nofollow noopener" target="_blank">#threejs</a>

HabrAngular 20: Большое обновление для современного вебаAngular 20 — это мощное обновление, которое делает разработку веб-приложений быстрее, удобнее и современнее. Новые возможности шаблонов, стабильные сигналы, поддержка zoneless режима и интеграция с AI позволяют создавать высокопроизводительные приложения с минимальными усилиями. В этой статье разберём ключевые нововведения Angular 20 и покажем, как их использовать в ваших проектах.<a href="https://habr.com/ru/articles/914934/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/articles/914934/</a><a href="https://zhub.link/tags/%D0%B0%D0%BD%D0%B3%D1%83%D0%BB%D1%8F%D1%80" class="mention hashtag" rel="nofollow noopener" target="_blank">#ангуляр</a> <a href="https://zhub.link/tags/angular_20" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular_20</a> <a href="https://zhub.link/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a> <a href="https://zhub.link/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://zhub.link/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://zhub.link/tags/j" class="mention hashtag" rel="nofollow noopener" target="_blank">#j</a> <a href="https://zhub.link/tags/%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5" class="mention hashtag" rel="nofollow noopener" target="_blank">#обновление</a>

InfoQExplore <a href="https://techhub.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> best practices designed for today’s modern ecosystem! This <a href="https://techhub.social/tags/InfoQ" class="mention hashtag" rel="nofollow noopener" target="_blank">#InfoQ</a> 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: <a href="https://bit.ly/44Uvj7H" rel="nofollow noopener" translate="no" target="_blank">https://bit.ly/44Uvj7H</a> <a href="https://techhub.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a> <a href="https://techhub.social/tags/Angular17" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular17</a> <a href="https://techhub.social/tags/Angular18" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular18</a> <a href="https://techhub.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a>

Sal RahmanPeople keep saying RxJS (well, observables) aren't suitable for React.No, RxJS (and observables) are absolutely perfect for React.<a href="https://techhub.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> <a href="https://techhub.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a> <a href="https://techhub.social/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReactJS</a> <a href="https://techhub.social/tags/FrontendDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontendDevelopment</a> <a href="https://techhub.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

Amadeus MaximilianHas anyone here worked with RxDB (<a href="https://rxdb.info" rel="nofollow noopener" translate="no" target="_blank">https://rxdb.info</a>) 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.<a href="https://mastodon.design/tags/localFirst" class="mention hashtag" rel="nofollow noopener" target="_blank">#localFirst</a> <a href="https://mastodon.design/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://mastodon.design/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a>

FunctionalProgrammingImplementing API Polling with RxJS Indroduction - The Use Case of Polling One of the most common ... <a href="https://codewithstyle.info/rxjs-polling/" rel="nofollow noopener" target="_blank">https://codewithstyle.info/rxjs-polling/</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/rxjs" target="_blank">#rxjs</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/async" target="_blank">#async</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/polling" target="_blank">#polling</a> <a href="https://awakari.com/pub-msg.html?id=O9PUV59DzSZwLVmsWS9ViC0x3aK" rel="nofollow noopener" target="_blank">Event Attributes</a>

FunctionalProgrammingUsing the Fetch API with RxJS - story of a bug Some time ago I encountered an interesting bug at ... <a href="https://codewithstyle.info/rxjs-fetch-cancellation/" rel="nofollow noopener" target="_blank">https://codewithstyle.info/rxjs-fetch-cancellation/</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/rxjs" target="_blank">#rxjs</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/async" target="_blank">#async</a> <a rel="nofollow noopener" class="mention hashtag" href="https://mastodon.social/tags/bug" target="_blank">#bug</a> <a href="https://awakari.com/pub-msg.html?id=EAij49fsx5vyDvCp8OdJkwJtPgu" rel="nofollow noopener" target="_blank">Event Attributes</a>

Habr[Перевод] Что новенького в Angular 19Всем привет, с вами Максим Иванов , и сегодня мы поговорим о некоторых улучшениях, которые появились в последней версии Angular 19 , вышедшей в ноябре 2024. Публикация довольно запоздалая с этой точки зрения, но мы сегодня постараемся рассмотреть некоторые нововведения более детально. Как и всегда ребята из Google дарят нам что-то новое, что сделает наши приложения еще более быстрыми и эффективными. И в этом нам помогут модерновые реактивные примитивы, инкрементальная гидратация и многое другое.<a href="https://habr.com/ru/articles/884208/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/articles/884208/</a><a href="https://zhub.link/tags/angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular</a> <a href="https://zhub.link/tags/angular2" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular2</a> <a href="https://zhub.link/tags/angularjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#angularjs</a> <a href="https://zhub.link/tags/angular_19" class="mention hashtag" rel="nofollow noopener" target="_blank">#angular_19</a> <a href="https://zhub.link/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a> <a href="https://zhub.link/tags/signal" class="mention hashtag" rel="nofollow noopener" target="_blank">#signal</a> <a href="https://zhub.link/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#google</a>

Sander van KasteelIT IS A FUCKING GEM.... <pre><code>interval(50) .pipe( filter(() => storageService.isReady()), retry(100) ) .pipe(take(1)) .subscribe(() => { console.log("storage ready"); }) </code></pre> And I absolutely hate it. <a href="https://social.sandervankasteel.nl/tags/rxjs" rel="nofollow noopener" target="_blank">#rxjs</a> <a href="https://social.sandervankasteel.nl/tags/javascript" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://social.sandervankasteel.nl/tags/typescript" rel="nofollow noopener" target="_blank">#typescript</a>

Sander van KasteelI know how powerful <a href="https://social.sandervankasteel.nl/tags/rxjs" rel="nofollow noopener" target="_blank">#rxjs</a> can be, but sometimes it's REALLY hurting my brain....

Matti JärvinenI've been pondering about creating EventSourcing, CQRS & DDD scaffolding from scratch in TypeScript.There doesn't seem to be an OpenSource basic scaffolding for this using RxJS? ( I mean the basic bang like NgRx ).DDD -> NgRx - Command -> Action ( in imperative ) - Command Handler -> Effect - Domain Event -> Action ( in past tense ) - Aggregate state -> a Store entry - Aggregate state's apply -> ReducerDid I get this right?<a href="https://mastodon.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> <a href="https://mastodon.social/tags/CQRS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CQRS</a> <a href="https://mastodon.social/tags/EventSourcing" class="mention hashtag" rel="nofollow noopener" target="_blank">#EventSourcing</a> <a href="https://mastodon.social/tags/DDD" class="mention hashtag" rel="nofollow noopener" target="_blank">#DDD</a> <a href="https://mastodon.social/tags/NgRx" class="mention hashtag" rel="nofollow noopener" target="_blank">#NgRx</a> <a href="https://mastodon.social/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a>

Kerrick Long (code)Having worked with <a href="https://ruby.social/tags/Angular" class="mention hashtag" rel="nofollow noopener" target="_blank">#Angular</a> in-depth for 2 years now, I can articulate what I don’t like about the <a href="https://ruby.social/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#framework</a>.1. <a href="https://ruby.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> is a terrible primitive to build most <a href="https://ruby.social/tags/CRUD" class="mention hashtag" rel="nofollow noopener" target="_blank">#CRUD</a> software upon. <a href="https://ruby.social/tags/Promises" class="mention hashtag" rel="nofollow noopener" target="_blank">#Promises</a> are better for most things, and event listeners are fine.2. Its <a href="https://ruby.social/tags/DI" class="mention hashtag" rel="nofollow noopener" target="_blank">#DI</a> system encourages long-lived, easily-accessible Singletons that are serious “foot guns.”3. Data management is painful. Resolvers are a worse DX than either <a href="https://ruby.social/tags/EmberJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#EmberJS</a>’s Ember Data or <a href="https://ruby.social/tags/React" class="mention hashtag" rel="nofollow noopener" target="_blank">#React</a>’s TanStack Query.<a href="https://ruby.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://ruby.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> <a href="https://ruby.social/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#FrontEnd</a>

Alvin Ashcraft 🐿️Master Asynchronous JavaScript with RxJS.<a href="https://buff.ly/41lIkVY" rel="nofollow noopener" translate="no" target="_blank">https://buff.ly/41lIkVY</a> <a href="https://hachyderm.io/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://hachyderm.io/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a> <a href="https://hachyderm.io/tags/async" class="mention hashtag" rel="nofollow noopener" target="_blank">#async</a> <a href="https://hachyderm.io/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://hachyderm.io/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdevelopment</a>

Lars HanischWho's excited about observables in the browser like I am? <a href="https://troet.cafe/tags/reactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#reactive</a> <a href="https://troet.cafe/tags/observable" class="mention hashtag" rel="nofollow noopener" target="_blank">#observable</a> <a href="https://troet.cafe/tags/rxjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#rxjs</a> but not rxjs<a href="https://wicg.github.io/observable/" rel="nofollow noopener" translate="no" target="_blank">https://wicg.github.io/observable/</a>

AdædraNew article!I rewrote my blog build scripts to eliminate Gulp, and used RxJS for the file streams. I wrote down what I learned:<a href="https://adaedra.eu/gulp-to-rxjs/" rel="nofollow noopener" translate="no" target="_blank">https://adaedra.eu/gulp-to-rxjs/</a><a href="https://nerdculture.de/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://nerdculture.de/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://nerdculture.de/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a>

Doug Parker 🕸️Since it's related, here's the `removeEventListener` API I wish we had:```javascript const removeListener = window.addEventListener('something', () => { /* ... */ });await someTime();removeListener(); ```Benefits: 1. You only provide the handler once, so it works great with lambdas. You don't need to keep a reference to the handler just to remove it later. 2. You don't need to provide the event twice. It's additional information to hard-code and/or dynamically track. 3. You can't accidentally `removeEventListener` on a function which was not bound in the first place (which is a no-op that often indicates a bug such as `removeEventListener('something', foo.bind(this)`).This design is basically a copy of the way <a href="https://techhub.social/tags/RxJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJS</a> handles subscriptions, but I find this much more ergonomic and intuitive.

HabrRxJs для самых маленькихВ этой статье мы подробно рассмотрим такую библиотеку как RxJs. Разберем несколько простых примеров и поймем что такое поточность в программировании.<a href="https://habr.com/ru/articles/816755/" rel="nofollow noopener" translate="no" target="_blank">https://habr.com/ru/articles/816755/</a><a href="https://zhub.link/tags/RxJs" class="mention hashtag" rel="nofollow noopener" target="_blank">#RxJs</a> <a href="https://zhub.link/tags/%D0%B0%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D1%8C" class="mention hashtag" rel="nofollow noopener" target="_blank">#асинхронность</a> <a href="https://zhub.link/tags/%D0%BF%D0%BE%D1%82%D0%BE%D0%BA" class="mention hashtag" rel="nofollow noopener" target="_blank">#поток</a> <a href="https://zhub.link/tags/%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B8" class="mention hashtag" rel="nofollow noopener" target="_blank">#потоки</a> <a href="https://zhub.link/tags/%D0%B0%D0%BD%D0%B3%D1%83%D0%BB%D1%8F%D1%80" class="mention hashtag" rel="nofollow noopener" target="_blank">#ангуляр</a>

Recent searches

Search options

Administered by:

Server stats:

#RxJS