RxJS for Beginner Angular Developers- Part 1: Introduction
Angular is a star front-end development framework and it has been since 2014. With how rapidly and consistently Google’s Angular Team continues to release major updates, it doesn’t look like that’s going to change any time soon. See their recently published roadmap for more vision into the future of the Angular framework.
How to learn Angular
There are many effective ways of learning new software development skills and concepts. Online learning subscriptions such as Thinkster.io are one good way. Another great way is to buy a course from a famous Angular instructor like Deborah Kurata. Joining a meetup like this one is another fantastic way to not only learn, but become a part of the Angular community. Some people just buy a book on the subject from a respected publisher and read the thing — that doesn’t work for me personally. It’s much more exciting to attend — physically or virtually — a conference such as ng-conf. All of these can be good ways to learn Angular.
If you’re like me then maybe what you want is a series of articles on the topic that you skim over quickly. And again if you’re like me then it doesn’t hurt if there are a bunch of gifs from your favorite classic video games sprinkled throughout. That’s exactly what you can expect from this series.
This is part 1 of a 3 part series on RxJS for beginners. You won’t be a pro at RxJS after reading this series, but you’ll have an excellent foundation that will help you start using RxJS in your everyday Angular development.
What is RxJS?
It’s distracting when someone teaches you a new thing without first defining what that thing is. RxJS stands for Reactive Extensions for JavaScript. It’s a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type: the Observable and three satellite types: Observer, Scheduler, and Subject. RxJS also provides over 100 operators inspired by Array extras — for example, map, filter, reduce, every, and more — to allow handling asynchronous events as collections.
Now there’s another big distraction! By defining RxJS for you, I’ve introduced a ton of loaded concepts that you might not understand yet. That’s okay if you don’t understand them yet! This series of articles is dedicated to people who might not understand all of those concepts yet, and I’m about to explain them to you. I’m not going to explain computer science basics such as libraries or arrays and collections. Before you read this article you will need to know at least that much.
What Are Asynchronous Programs?
Web applications have changed a ton over the years from being simple static pages to animated monstrosities to server-side rendered screen-dumps, to asynchronous single-page applications. There are hundreds of minor steps and innovations in between and even after those big steps, but I’d say we’re still in the era of the single page application. Heretofore I will refer to them as SPAs.
Old-fashioned websites required refreshing of the entire page in order to go to another page — even if a lot of the pieces of that web page remained the same such as the sidebar, navigation bar, or footer section. These were mainly collections of files just moved onto a server where each page was just a static thing and you had links that moved you between them. That sucked because you had to wait for things to load every time and the screen would constantly repaint the entire thing even in situations where everything should look exactly the same. What saved us from this pain was AJAX.
AJAX — Asynchronous JavaScript And XML — was every developer’s dream because you can:
- Read data from a web server — after the page has loaded
- Update a web page without reloading the page
- Send data to a web server — in the background
It’s not a programming language, just a method of doing the above things using a combination of browsers’ built-in XMLHttpRequest object and JavaScript + HTML DOM—if you need to dynamically change something on the page visually.
This concept became the foundation of the SPA which has allowed endlessly more powerful applications to be built for the Internet. So what is asynchronous? The answer is any logic that isn’t done by the application synchronously. That isn’t a fulfilling answer though, so let me break it down further.
To display useful data to your user on their screen, you first need to have that data in your application. If you need data that your application doesn’t have hard-coded into it, then you’ll have to get that data from somewhere, usually a server on the internet somewhere. To get that data you’re going to have to make an HttpRequest to that server asking for it. The thing is, it’s impossible to know exactly how long it will take before that server will deliver your data to your application. Therefore it took an indefinite amount of time to accomplish that piece of logic giving you the data you asked for. The response didn’t come synchronously — or line after line of code — instead it came whenever it came. Usually, you’ve written some code prepared to do something with that data upon receipt. That’s why it’s called asynchronous.
What Are Event-based Programs?
The paradigm of event-driven programming is a pretty simple concept. You build your program so that it reacts to user actions — such as mouse clicks, key presses, and voice-activation — sensor outputs, or messages containing data from other programs — including programs running on other servers. In Angular, all of your logic is based on such events. So it makes perfect sense that Angular decided to include RxJS as a core library, because RxJS is about making it easy to react to events.
Even though RxJS is requisite for the Angular framework, some developers opt into not using it more than absolutely necessary. Part of the reason they do this is that we were reacting to events long before RxJS existed using callbacks and promises. Another part of the reason some developers don’t use RxJS much is that it adds a learning curve to your development and even though observables are here to stay, it’s not always easy to justify learning a new thing when you’re heads-down working on building new features and fixing bugs for your company. I’d argue that we constantly need to be improving our knowledge and skillsets — even if it’s on our own time — but even if it’s necessary, it’s not always easy to make time for it.
What Is An Observable?
An observable represents the idea of an invokable collection of future values or events. For now, I just want you to think of it as a tool in your programming for handling asynchronous logic. I’ll go into greater depth on observables in the next article.
RxJS in Angular
While RxJS isn’t only used in Angular, it is a proud member of the Angular ecosystem. But it might not have been if it weren’t for Ben Lesh.
A Brief History
During the early, early days of Angular 2, a new hire named Ben Lesh that had recently come from working at Netflix shared his ideas around async with Igor Minar and Misko Hevery. He concluded that promises weren’t the ideal abstraction of async primarily because of a lack of sufficient handling of cancellation. Ben set up a meeting between those two and Jafar Husain, the Cross-Team Technical Lead for the Netflix UIs.
At the time it also seemed to all of them that TC 39 was going to be adopting observables. That didn’t happen, but it turned into a partnership between Angular and RxJS nonetheless. This information comes from an interview of Ben Lesh done by the team of the Angular Show Podcast episode 30. The Angular Show Podcast is another excellent resource for learning about Angular and its community.
Where is RxJS Today?
The following features in Angular leverage Observables by default:
- Routing emits parameters via a paramMap Observable
- FormControl emits a value via a valueChanges Observable
- HttpClient emits the response via an Observable
- Output/event-emitters generate Observables
- Angular has a built-in Async pipe for automatically unwrapping observable-contained values in templates.
Here are some other really cool facts about RxJS today:
- RxJS became the cornerstone of state in Angular, for example NgRx.
- The Angular Team embraced RxJS in much of the Angular ecosystem
- RxJS is the #1 requested subject at ng-conf
- 20,000 other libraries depend on RxJS, and currently, it almost has more downloads than Angular and React combined times 2 at approximately 23 million per week.
- An adaptation of Reactive Extensions is available for idiomatic Java, Scala, C#, C++, Clojure, Python, Groovy, JRuby, and other programming languages.
The Future of RxJS
RxJS is Open-sourced Software which is marvelous because you can dig into the source code and see how it works. It also means that the community controls how RxJS will evolve, not just a single company. The problem with open-sourced software is that it’s practically impossible to predict when new versions will become available. That’s because the people working on it are all volunteers — as is the nature of OSS.
Want the future of RxJS to come sooner? Consider joining the team of people working on it by contributing to it on GitHub.
Next Major Version of RxJS
At the time of writing this article, RxJS version 7 is still being worked on. It will include the following changes and more:
- Better TypeScript typings
- The toPromise operator is changing to firstValueFrom and lastValueFrom
- RxJS is smaller
- RxJS supports the latest TypeScript version: Typescript 4.1
In Conclusion
If you’re still on the fence about using RxJS with your Angular applications then it might be because of the following concerns:
- Complexity — even for an experienced front-end developer it involves a new pattern and requires us to expand our training. We are busy and this seems like it will take valuable time.
- Necessity — is it worth it to learn this? It seems like I can accomplish the same things using techniques I already understand like promises and async/await.
- History — I’ve had difficulties with this concept in the past or I’ve had coworkers who over-complicated things using this tool.
- Learning Curve — Is this going to make doing front-end harder than it needs to be? How are we going to train up beginners to do yet another complex thing?
My response to these concerns is below.
As software engineers, we work and live in an environment that is ever-expanding. Staying current in technology is an absolute necessity in our chosen career field. Front-end work has rapidly and drastically evolved over the past decade. Many features of applications that were only possible in the back-end are now things the front-end has taken command of. There are good reasons for that.
Client machines are more capable of processing logic than ever before, so businesses can distribute a lot of the compute cost onto the end-users through powerful front-end systems. We are also living in an age where society at large is educated about computers and so while our user base is almost universal, so are the laws and best practices. We are evolving with them.
The answer is not to throw our hands out and push against the wheel of innovation. RxJS is undoubtedly an innovation. It’s powerful, it solves several problems that promises are ill-equipped to solving and they do it elegantly.
The learning curve is real. The burden is on those who are grounded in years of experience in software engineering to soften the learning curve by teaching and mentoring our juniors and our peers. The negative experiences I’ve seen in the past and those that I’ve heard stories about from colleagues are almost always the result of one or more of the following:
- a lack of adequate mentoring
- a lack of sufficient standards
- a lack of desire to embrace change or learn
I know! I’ve been there. RxJS was hard for me at first too. It’s still hard for me sometimes when I’m solving really complicated problems. I’ve grown comfortable using RxJS for most of my async logic in Angular applications and so can you.
Next In the Series: Fundamentals of RxJS
In my next article in the series, I’ll go over Observables, Operators, Subjects and all of the basics you need to know conceptually about RxJS.
I’ll come back and update the previous articles in the series with links as I publish them.
Thanks for reading!
If you liked this article, please give me some claps — you can give 50 you know! That helps me celebrate my accomplishment of successfully teaching others how to do this really cool thing. You can also follow me on Twitter at @erik_slack. I invite you to dm me if I spoke incorrectly or you see a way to improve this article. Thank you for reading and please share it and stay tuned for the following two articles in the series!
Now that you’ve read this article and learned a thing or two (or ten!), let’s kick things up another notch!
Take your skills to a whole new level by joining us in person for the world’s first MAJOR Angular conference in over 2 years! Not only will You be hearing from some of the industry’s foremost experts in Angular (including the Angular team themselves!), but you’ll also get access to:
- Expert panels and Q&A sessions with the speakers
- A friendly Hallway Track where you can network with 1,500 of your fellow Angular developers, sponsors, and speakers alike.
- Hands-on workshops
- Games, prizes, live entertainment, and be able to engage with them and a party you’ll never forget
We’ll see you there this August 29th-Sept 2nd, 2022. Online-only tickets are available as well.
