One of the frustrating aspects of knowing a few different programming languages is that you sometimes enjoy a feature in one language, only to find it missing in another language. This is what Michał Miszczyszyn encountered when he switched from Angular to React.
Instead of shrugging his shoulders and accepting the situation for what it is, he created a library to solve the particular frustration he had with React. I asked Michał how the library came into being and how it helps other developers.
Imagine you're talking to someone who has little technical knowledge. How would you explain your project?
react-with-observable allows you to use your favorite Observable library with React in a way that's simple and pleasant. An observable is, vastly simplifying, one of many ways to work with asynchronous events such as requests or user interactions.
Why did you create this project?
Back in the days, I used to work a lot with Angular 2+. I really enjoyed one particular thing about it: The way it handled observables declaratively inside templates (it's called an AsyncPipe). So I decided to take the same approach and try to reproduce this kind of interface for React. And it worked!
Awesome! What problems does it solve?
One of the major pains of working with observables is unsubscribing from the observable source when your components are destroyed. For example, when you go to another page forget to unsubscribe, you'll start seeing errors in your console or you'll see glitches and bugs in your app.
Another thing is the way you interact with Observables in React. Usually, you have to add some repeatable boilerplate code to your components to use Observables with React. Subscribe on mount, unsubscribe when destroying, update state when new data comes… And you have to do it over and over again in each and every component that uses observables.
Now, with react-with-observable, this is no longer the case. Just use your observables as if they were straight and simple data. Easy!
Sounds very useful for React devs. How much time did it take to create initially and how much time does it take to maintain it?
I created the first working version in just two days. It took another five to polish things up. It's a really simple library. Maintenance is also, mostly, updating the dependencies. It'll take more time to implement and maintain the features that are about to come, though…
Such as?
In the era of Hooks, I'm planning to add a hook to use observables. This way, you only install one package and use it both in hooks-enabled function components and class components. The hardest part is finding the time to implement that!
And how has the open-source community helped in all this?
First of all, as I said, another open-source project (Angular) vastly inspired me to create this library. When I got a few retweets and likes on Twitter, it reassured me and encouraged me to do more.
So I have a few other small OS projects and some people created Pull Requests to them. Meaning that they spent time testing, using, and improving my code. They wanted to return the favor, if you will. These are random people that I never even met or talked to. Open source is incredibly powerful when you think of it in that way.
Absolutely. Open source is a major source of innovation. Finally, What was the most difficult part of the project? Your biggest learning?
The most difficult part is definitely testing your library from the end user's perspective. Different setups, different operating systems, different npm or node versions. While with JavaScript and npm, most of these risks are mitigated, there are still some edge cases and scenarios in which installing such a simple library could go wrong
Which explains the popularity of containers. Thank you very much for your time, Michał. Best of luck with your future OS projects!
A link to the react-with-observable library: https://www.npmjs.com/package/@mmiszy/react-with-observable
A link to a typesafe, functional querybuilder (one of Michał's OS projects):
https://github.com/mmiszy/functional-orm