#RxJS
The more #React code I write, review and debug, the more leery I get of useEffect.
It may have its uses, but I feel like it violates React's core principle of referentially transparent components. Its effects are (locally) surprising and (globally) intransparent.
I much prefer handling async state updates via #redux or #zustand or even #rxjs and eschewing useEffect altogether.
In 2013 we wrote async javascript & the only patterns we had were races and callbacks & we liked it. Now we got 100*+ abstractions over races and callbacks.
* most of those are #rxjs
Check out my latest video on error handling with Observables:
🧐Catch and Rethrow
🧐Catch and Continue
🧐Retry on Error
🧐RetryWhen
🧐Errors and Action Streams
#RxJS ไม่เจอปัญหานี้ 🤔
https://medium.com/codesxdiary/40e0cb6afdaf
Looking for a better way to manage state in your Angular applications?
The new Angular signals are well suited to effectively manage the data we retain in our components and services.
Check out the video here:
#rxjs created an industry, a massive enterprise in wondering if observables need to be unsubscribed. I think the anti-unsubscription crowd is right in the sense of
- We don't know what is happening in unsubscribe(), maybe nothing
- The computer will be shut down, we will all die, and the universe will be cold and black and so should we really care about collecting the garbage early
- Out-of-memory will force garbage collection organically as the user reboots.
Angular Signal vs RxJS Behavior Subject. . . Fight!
Just kidding. 😆
In reality, there are use cases for both. In this video, we take a look at how to replace a synchronous BehaviorSubject with a signal.
Angular v16 RC 1 is out!
This release candidate includes some changes to RxJS/signals interop:
🚥 Renamed fromObservable/fromSignal
🚥 Changed how the fromObservable default works
🚥 Improved error handling
This video applies these changes in a sample app.
Fucking #rxjs #RaceConditions and severed #pipelines. Grrrr
Theres something about #rxjs operators that make you think in a really composable manner and I like that. Reactive libs are actually really nice once you learn its concepts/mental models
Wondering how these new Angular signals work with our existing RxJS?
In this video, we create signals from Observables and bind to those signals. And react to a signal in an Observable pipeline.
Angular v16 signals, everything old is new again - What's the hype?
https://link.medium.com/olxCzDXhHyb #Angular #signal #reactivity #statemanagement #rxjs #react #vue #webdev #web #development
![gameEvents.on("change", ({ path }) => {
if (!["score", "health", "healthMax"].includes(path)) return;
const container = getTopBarContainer();
if (!container) return;
const { scale } = gameState;
update(container, scale, gameState.states.game);
});](https://files.mastodon.social/cache/media_attachments/files/110/033/437/772/594/749/small/cdd31c0bf15eede3.jpeg)
This is for the RxJS lovers in Angular:
The `fromObservable` pipe:
https://github.com/angular/angular/discussions/49090#discussioncomment-5284843
Please upvote the comment in the Angular Signals discussion. 🙏
The `fromObservable` pipe would convert from Observable to Signal internally. RxJS users could then benefit from the better "Signal" change detection without the conversion step in TypeScript. You would not even have to know about Signals ;)
@spierala @angular
I think people are already using async/await and promises with Angular in large numbers, and that these people are just not as vocal in social media and github as rxjs proponents. It is an illusion imho that all Angular codebases look the same because Angular is an “opinionated” framework.
#angular #signals #rxjs
Are you an Angular developer that also does C#?
Join me at the VSLive conference in Nashville in May!
I'm talking about #rxjs and new-ish features in C#.
Use this link to register: http://bit.ly/3kSNaaf
I am still not sure about the Signals stuff in Angular.
At first it looks great:
- faster and simpler Change Detection
- easy for devs to go first steps with reactive code
On the other hand I am not looking forward to see code which mixes Signals, Observables, Raw Values. Convert from Signal to Observable and vice versa.
RxJS also shielded us from Async Await code, Promises, custom Callback code.
In the end, life could have been easier with just RxJS everything. 🤔
คือตอนนี้ที่ทำงานย้ายมา #Next.js/React แล้ว แต่คือยังงง dataflow มันเมื่อเทียบกับ Angular (สวนทางกับที่เค้าบอกในคลิป)
พอไปส่อง #SolidJS แล้วเข้าใจ flow ขึ้นเยอะมาก
ถ้า #Angular ย้ายมา signal แล้วคนเข้าใจง่ายกลับมาใช้กันจริงก็ยินดีและเป็นเรื่องดีมาก ขอแค่มัน compatible เต็มที่กับ #RxJS เพราะ signal มัน less powerful than RxJS ในแง่ของ pipeline มากๆ โดยเฉพาะเมื่อเกี่ยวกับ async
Announcing RxAngular CDK and Template 1.0 stable. Introduction to the packages and future plans described. http://www.rx-angular.io/blog/2023/03/07/announcing-rxangular-cdk-and-template-1-0 #Angular #OpenSource #RxJS
@prestonjlamb
If I know for sure that the first value can not be null then I use non-null assertion in the template
`(myvar$ | async)!`
It would be strange to make the Input to support null, if there is effectively never null pushed to that Input. PLUS not needed null-checks in the child: 🤮
@sanderelias To be sure about the future of the RxJS APIs in Angular, I asked it on the Angular Signals discussion:
https://github.com/angular/angular/discussions/49090#discussioncomment-5120224
@Cito I totally agree with the things said in the video.
Signals will be great for a much more simple and performant change detection.
Angular beginners will be able to use Signals and explore the world of reactivity.
RxJS can be added when asynchronous reactivity is needed or for more advanced use-cases.
#Angular is about to get its most important change in a long time by introducing "Signals". On a first glance, seems to make a lot of sense to me. I particularly like the idea of being able to convert between #rxjs and signals back and forth. What do you think? https://www.youtube.com/watch?v=4FkFmn0LmLI
I wrote an NgModelSignal directive using signals from @angular v16-next and parts from
@synalx‘s rxjs-interop PR:
https://stackblitz.com/edit/angular-ng-model-signal?file=src%2Fng-model-signal.directive.ts
Not sure about the part where I'm setting a signal in the updateEffect... According to Pawel Kozlowski this is not a good idea. Is there a better alternative?
Angular App with Signals, by Eduardo Roth (built Angular v16 pre-release):
Great explanation of Signals in Angular and how they are playing together with RxJS.
By Joshua Morony:
Here's the draft for the RxJS interop layer of @angular signals: https://github.com/angular/angular/pull/49154
You can create a signal from an observable using the function "fromObservable"; the signal value type is a discriminating union of "NoValueState", "ValueState<T>" and "ErrorState" (the property "kind" is the discriminant), which reflects the different states an observable can have. Interestingly enough there is no "CompletedState" (yet).
You’ll see how easy it is to use #RxJS primitives to create a declarative solution that is both readable and generic...
https://softwaremill.com/implement-onclick-ondoubleclick-and-onhold-streams-with-rxjs/
Angular started prototyping reactivity with Signals... see the GitHub discussion here: https://github.com/angular/angular/discussions/49090
More insights from @brandontroberts with @synalx on twitch: https://www.twitch.tv/videos/1740066149
@Perl @gandalf’s RxPerl will cure what ails you, if what ails you is dealing with streams of data via asynchronous callback functions. https://metacpan.org/pod/RxPerl
You can drop it into your existing event-driven #Perl code with ease, as it works with @leonerd’s IO::Async, @mojolicious’s Mojo::IOLoop, and AnyEvent interface libraries. It’s an implementation of #ReactiveX designed to behave like #JavaScript’s #RxJS. https://noc.social/@gandalf/109839670728579860
RxJS has crazy a lot weekly downloads on npm: more than 47 million!
See the RxJS stats on npm: https://www.npmjs.com/package/rxjs
I wonder: Who uses it? In which context?
A well known context is Angular (RxJS is a peerDependency of Angular). But that can only be a small portion. Angular core has 3.3M weekly downloads: https://www.npmjs.com/package/@angular/core
MiniRx ComponentStore is like NgRx ComponentStore on steroids!
✅ Support for Immutable State
✅ Undo out of the box
✅ Memoized selectors right at hand
✅ More lightweight
✅ Small but powerful API surface
ComponentStore is the pathway to migrate to FeatureStore if you need global state management (with Redux DevTools support). You can refactor to FeatureStore by changing two lines of code.
MiniRx is incredible flexible!
Check it out on GitHub: https://github.com/spierala/mini-rx-store
Pretty interesting concept: Using remotely-controllable #promises in #javascript to orchestrate async behaviour akin to #golang channels. I'd have resorted to #RxJS immediately, but it might be a good fit if it's all you need.
https://pedrocattori.dev/blog/go-like-channels-in-10-lines-of-javascript
Just updated the MiniRx Svelte Demo to MiniRx Store 5.
MiniRx features now a ComponentStore for fully local state management.
There are 2500 Pixel Components on this screen (see screenshot). Each one has its own ComponentStore.
With ComponentStore you can manage state independently of the global state object (which is used by Store and FeatureStore).
Check out the Svelte demo here: https://svelte-demo.mini-rx.io/#/art
See what's new in MiniRx on GitHub: https://github.com/spierala/mini-rx-store
@rx-angular/cdk and @rx-angular/template 1.0.0 stable have been released. RxAngular enables high-performance local rendering with a nice DX for working with #RxJS https://rx-angular.io
#Angular #OpenSource
@nilix You might also consider to refactor from Subject to BehaviorSubject.
If the Subject does not emit immediately, then the async pipe effectively outputs null as a first value.
BehaviorSubject can have an initial value. And BehaviorSubject will emit its last value to late subscribers.
But also with BehaviorSubject you will need the non-null assertion or ngIf solution.
One last tip: `combineLatest` from the video accepts also an object instead of an array. Less work 😀
MiniRx 5 became even more lightweight...
See the Angular state management comparison here:
https://github.com/spierala/angular-state-management-comparison/blob/master/README.md
mini-rx-store@5 alpha has been released!
What's new?
- Component Store for local state management
- Lazy store initialisation with `setInitialState`
- `setState` accepts an Observable
- Tree-shakable and even more light-weight
Read more here: https://github.com/spierala/mini-rx-store
Or try it out: npm i mini-rx-store@5@alpha
Just posted a new video:
- Why do we need an RxJS Subject?
- What is best practice for creating one?
- What's the diff between Subject and BehaviorSubject?
- How to emit a value into a Subject?
All in under 2 min 15 sec. 😀
Let me know what you think!
Higher-order mapping with RxJS:
- Maps a value (such as an id) to an Observable
- Automatically subscribes and unsubscribes from the inner Observable
- Flattens the result
More information here:
Use RxJS mapping to:
- Change an http response to a useable format
- Add properties to retrieved data
- Build a string title from retrieved data
And see the difference between first order and higher-order mapping.
Great things are coming in MiniRx Store 5:
- Local Store: Local Store allows you to manage state independently of the global state object (which is used by Store and Feature Store)
- Local Store supports the ImmutableStateExtension, LoggerExtension and UndoExtension!
- Lazy store initialisation with `setInitialState`
- `setState` becomes more flexible and accepts an Observable
- Tree-shakable and even more lightweight
We've all learned the procedural approach to getting data from an Observable. But using a *declarative* approach opens up many more options for manipulating the data and reacting to changes from an Observable.
My take on reactive programming:
Declare your streams and the operations that are performed on that streams.
Declare how your streams depend on each other.
Push data into the streams.
See how the output of your streams updates automatically.
My definition is inspired by: https://codecraft.tv/courses/angular/reactive-programming-with-rxjs/streams-and-reactive-programming/