The art of simplicity

During a code review of an Angular code base I noticed the following code snippet: What’s wrong with this code? We are subscribing inside a subscription. This makes it almost impossible to know what subscriptions are open at what moment. Good luck closing these subscriptions in the correct way(which you are doing, right?). A solution is to rewrite this code to use only 1 subscription. Closing this subscription will automatically clean up all inner streams. Let’s apply some RxJS magic to fix this:

After upgrading to Angular 5 (and having some trouble with RxJs but that is for another post), I noticed the introduction of "lettable operators", which can be accessed in rxjs/operators. What is a lettable operator? A lettable operator is basically any function that returns a function with the signature: <T, R>(source: Observable<T>) => Observable<R> . Euhm, what?! Simply put, operators (like filter, map, …) are no longer tied to an Observable directly but can be used with the current let operator(explaining the name). This means you can no longer use the dot-chaining, but will have to use another way to compose your operators. Therefore is a pipe method built into Observable now at Observable.prototype.pipe: Why lettable operators? Lettable operators were introduced to solve the following problems with the dot-chaining(from the documentation ): Any library that imports a patch operator will augment the Observable.prototype for all c...

Angular 2 goes reactive all the way. This means that data you get back from the http service is exposed through an observable. But how can you show the observable data on the screen? One option is to subscribe to the observable, extract the result, map it to a property on your component and databind to this property on your view. However there are better alternatives out there… Probably the cleanest solution is the use of the AsyncPipe . The main benefit to utilizing the async pipe is the performance optimization and one way data flow patterns that this feature can help enable.

Last week a colleague asked me for help because his HTTP POST method was not invoked inside his Angular 2 service. Here is the code he was using: this.http.post(this.apiUrl, JSON.stringify(user), this.getRequestOptions()); So why does this code doesn’t work? Reason is that the  post method of the Http class returns a cold observable. Cold observables only  are invoked when someone subscribes to it. They are kind of ‘lazy’. As we didn’t subscribe for the Observable results nothing happens.  Here is a fix: this.http.post(this.apiUrl, JSON.stringify(user), this.getRequestOptions()).subscribe(r=> {}); More information about cold vs hot observables can be found here: https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.an6vzfics

If you ever build an MVVM style application before(using WPF, Silverlight, UWP,…) you probably used the ObservableCollection class.  It implements the INotifyCollectionChanged interface and can be seen as the counterpart of INotifyPropertyChanged. Through this interface the ObservableCollection notifies its subscribers about items being added, deleted, moved, … Unfortunately the ObservableCollection is rather limited in it’s behavior and doesn’t fit well in a truely observable architecture. Luckily the ReactiveUI framework and more specificly the ReactiveList solve exactly this problem… Let’s describe a scenario I had to build that was hard to do using ObservableCollection and a walk-in-the-park with ReactiveList: In our application we have to show a list of alerts and update the list when new alerts arrive. However alerts can arrive at a high pace and we don’t want to update the UI continuously but only when at least 5 alerts are raised. In our original implementat...

Learning Reactive Extensions and Reactive UI can be quiet challenging. There are a lot of new concepts you need to wrap your head around. GitHub , one of the companies that use Reactive UI (for building their GitHub for Windows app), shared their ReactiveUI Design guidelines with the rest of the world. Thanks guys!

I’m building an application where I’m experimenting with ReactiveUI , an MVVM framework built on top of the Reactive Extensions. It’s the perfect fit if your application has a lot of interactivity and data that changes a lot. When I started using it, after installing the “reactiveui” nuget package , it immediately failed with the following error message: The base class or interface 'Splat.IEnableLogger' in assembly 'Splat, Version=1.6.2.0, Culture=neutral, PublicKeyToken=null' referenced by type 'ReactiveUI.IReactiveObject' could not be resolved. It is an annoying issue in the NuGet package where ReactiveUI.Core has a dependency on a Splat version >= 1.0. according to the package configuration. The problem is that the  latest version of Reactive UI couldn’t work with older Splat versions. After updating Splat to the latest version, the issue was solved. I hope the creator of the NuGet package fixes this, as this is really annoying for everyone...

You are interested in learning Reactive Extensions( http://rx.codeplex.com/ )? But you don’t know where to start or you don’t see a practical use case? Have a look at the ReactiveTrader application created by the guys from Adaptive. From the site: Reactive Trader is a client-server application demonstrating some of the problems needing to be dealt with when building reactive, or event driven, user interfaces. It was initially built as a demonstration application for a presentation we gave at ReactConf 2014 . What makes this example really nice is the fact that it exists for multiple platforms like HTML5, iOS, WPF,…