Reactive Programming in Modern Web

Thank you Meligy for warm welcoming.

Thank you guys for attending the talk.

Yeah, this talk is not about Angular at all, like maybe 1%, but all the rest is.

It's it's a little Angular related, but yeah, you'll see.

So yeah.

My name is Alex Kuncevič.

Today we're talking about reactive programming.

But before we get started, I just had a little bit more details on what I do.

I also teaching like workshops online, offline workshops, like helping teams to adopt, best practices.

Also involved into community organizing and organizing some Sydney based meetups you might know of, like GDC Sydney and Angular Sydney.

So also, I'm a host of Angular Rocks podcast here.

Everything thing I do is angular related somehow, and in my spare time there was a slide.

It's not showing.

That's fine.

So today we're talking about reactive programming and we go through basic concepts.

What problem does it solve, real.

I'll show you a couple of real world use cases.

I show you little demo.

Actually, this morning I talked to Demo Gods and they said that there is 50% chance that my live demo would go perfect.

no issue.

So let's see.

There is still hope.

All right.

Oh yeah.

That's my spare, that's my spare time slide.

My spare time.

I'm riding motorcycle and I really enjoying walking around the coast.

There is if not, if you guys, someone new to Sydney, there is like really nice walks around the coast here, you'll, probably check it out.

It's really cool.

All right, so we're talking about reactive programming today, and that's a Twitter thread.

A week ago, I accidentally pops into my in front of me like Minko Gechev saying, Hey, nobody knows what reactive means.

Everyone is in JavaScript.

Community has their own definition for that.

And then Ben Lesh Replied yeah, like reactivity.

Just an automatic propagation of change.

Not to be confused, the reactive programming or functional reactive programming.

So yeah, I think it's little.

There is a relation between, reactivity and reactive programming, but there is no relation to function, no reactive programming at all.

so yeah, and then I replied, yeah, I'm going to fix that problem in a week time with Web Directions.

So here I am and hopefully you'll learn something new today.

By the way, anyone have any familiarity like reactive concepts, reactive programming?

Alright, a couple of hands.

That's great.

Awesome.

So what is reactive programming?

I think if you are new to that topic, probably the best you can do is just search and Google and you end up with a few definitions.

And this definition is quite like, it's hard to understand really.

They too smart.

So I come up with my definition because everyone has their own opinion on the reactive program.

I have too.

So yeah, here you are.

Reactive programming is a software design, paradigm built on top of the idea that everything is data stream.

That's the simplest, that's the simplest, uh, definition I came with.

I have another definition, which I show you in the end of my talk.

It's the second one.

A little bit complex.

I, I think so, reactive program programming is based on observer pattern, right?

It's like a core thing.

it's actually, it's not as, hard as it's simple.

It's not as weird as it sounds like observer pattern.

Like what's that?

So there is two objects, observer and observable, right?

And so observer pattern, setting up a contract.

Between, observe and observable, right?

So it's dictates how they communicating to each other, right?

Might be a little bit complex at first sight, but let me give you this live example, like real world example.

So imagine there is some, someone on a stage showing you, a magic trick, right?

That's gonna be an observable.

So it's like emitting, we call it observable emitting streams of data, right?

So observable emitting stuff.

And then there is someone who was, is observable, right?

That's an observer.

Could be one observer, could be many.

So that's probably the best explanation for, this pattern.

And observable.

There is lots of cool things about observable I want to share with you today.

It's cancelable, right?

So if we comparing it with, promises.

Anyone ever try to cancel a promise?

try so you can cancel observables, like, it's built in, like it's cancelable, right?

You just boom, you just unsubscribe, boom.

It is done.

So it's, it has built in predictable error handling.

So it's easy to error handle.

The observable's, guaranteed tear down of resources built in so you don't have to think much about how to free up the resources.

then it keeps you away from, call back hell.

Anyone dealt error with a call back hell?

Couple hands.

Yeah.

So you won't have that problem with observables.

And also it has, it's it's additional topic to observable is extensive list of operators.

We will talk, about, this important, part, later on today.

I give you some interesting demos and more details about list of operators.

And yeah, observables are lazy.

It means like if you just have an observable, it's doing nothing by default.

And it is a common mistake when people start learning observable.

I go, I went through this past myself, I forget to subscribe.

If you want subscribe to observable, you just spend like the whole day.

Like why doesn't work?

But really you just need to subscribe.

That is first thing to remember.

Very important.

And yeah, there is ECMAScript, observable proposal.

It's been sitting there like for five years.

and doesn't get executed yet.

It's on a stale status, maybe in a couple of years in the future it'll be implemented.

We don't know.

But yeah, that's something to keep your eye on.

So observables is not, it is something really big, honestly.

Yeah, you'll see it's through my presentation, and if you want to get more details on, observe pattern, check out this url.

you'll read up some more details.

yeah, reactive extensions is a kind of another part, right?

Another part, piece of, part of a puzzle.

And especially beginners, it's very important to know this, right?

The different like reactive extensions, really it is.

Okay, you start Google about, observable and reactive program and reactive extensions and ReactiveX and Rx like what that?

It's all the same.

it's all one thing.

It's RX equal to ReactiveX equal to Reactive Extensionx.

So just don't get confused.

And yeah, there's lots of every programing language you name, right?

What's like whatever you net, devrel developer, ruby developer, Scala developer, you name it, right?

Boom, boom.

Booms every language has reactive extensions implemented.

and here, think about it, right?

If you learn observables once, you can transfer this knowledge to any other language, right?

Maybe today you are doing like Go programming, right?

Or Ruby.

So you learn this concept in your current language and then maybe in two, three years you change your career, right?

And boom, you can apply this knowledge.

Maybe there is would be a problem you wanna solve using observables, you just bam!

Yeah, I know how to solve it.

yeah.

And today, because it's Web Directions, right?

So we're talking about RxJS, and as title suggests, it's something to do with reactivity, right?

Rx?

yeah.

RxJS stands for reactive extensions for JavaScript.

There is 44 million downloads per week.

Just this single library.

It's like more than twice more.

More than doubles than react downloads from NPM.

Yeah, it's very big.

So who's using RxJS?, I mean, I saw a couple of hands, but that's probably those guys downloading, right?

there's like many companies using that.

Microsoft, Google, Sony, Netflix, Canva.

And Slack and there is small companies.

Is it like, it doesn't mean that Microsoft using RxJS everywhere, right?

There is some products which rely on this technology.

So what are the common use cases?

I think everyone knows this screen right.

Familiar with, uh, with Excel, right?

And that's great example, where we can use observable if you wanna implement this sort of, behavior, right?

So we have a cell and other cells relying on this cell, and if that cell gets any change, other cells which are relying on that cell getting updated accordingly.

Yes, that's where it's one of those perfect, use cases for using, RxJS or similar, approach.

Then, reactive dashboards, right?

When you don't want user to wait and click this update button or refresh button, right?

You just applying this approach, data just flows on your user.

ah, user, like relaxing, having cup of tea and just watching the update.

Yes.

So cool.

And also, yeah, this sort of dynamic dashboards, right?

Very helpful, lots of data, like you wanna filter the data, combine different pieces of data, map the data, filter the data, right?

That's another great example.

doesn't mean you have to use, RxJS It just, you can consider using that, right?

So you have to make the decision.

I'm not saying that we have to just go and run and change our code, like using RxJS, like for this, if you have any similar screens.

No, I'm not saying that at all.

Just consider that.

So very small, like we can implement state management solutions, user Web sockets management, user Input, h and yeah, front end frameworks.

Also adopting these practices.

Every major framework loves RxJS.

Like some of them, not us, but yeah, anyone try to plug RxJS into Vue?, self, react?

Yeah, a couple hands.

Yeah, so you can do that.

It's possible.

Try to play around and see, maybe you can.

It might help you to solve a particular use case.

So yeah, we just spoke about reactive programming.

I gave you definition.

We talk about observer patterns, then we talk about reactive extensions, and we focused on observer pattern a lot.

But there is more.

Reactive extensions, not just about an observer pattern.

It's also about pipeable operators like merge, filter, map, does it remind you anything?

Did you ever use lo-dash?

Right?

So whatever lo-dash is for arrays, operators, observable operators, it's lo-dash for, observable, right?

Pipeable operators.

So there is 250 plus operators, does it sound scary for you?

do I need to know their like 250 operators?

You don't have to be PhD in RxJS to use RxJS.

That's a good thing.

So you can just start with a couple of playing round with maybe fromEvent operator, then apply a merge, see how it works, and console log, like filter, see what's the result like map.

Then maybe you wanna switchMap.

Yeah, just try to play around with a couple of those operators and yeah, that's how we started with observables and that's how, that's the path I, used to take myself and everyone in who's familiar with RxJS, they done something similar.

So yeah, there is a pipe operator, pipe function, which we use to pipe operators, right?

Because like you have an observable and you think what, usually you're applying like multiples operators for an observable.

And so you're using this pipe, function to pipe operators one after each other.

So that's a simple example.

so we have two observables, observable1, observable2 We use an of operator passing 1, 2, 3.

So we made up like this fake observable, right?

So two times, right?

And then the difference here.

Yeah.

We applying pipe, we using pipe function and we applying two operators.

We are one filter.

In first case we want to take odd numbers and a second case we want to take, even numbers, right?

And then we using map function just to square that.

So then, we use a merge operator combine our two observables into observable number three, which is square.

And then we subscribe in for, for square observable to console log, right?

Remember this example.

We will come back to that in a few minutes.

And now let me show you a quick demo.

So that's my code.

that's an app.

That's a great use case for using RxJS.

It's a instant search.

if you search for something here, RX listing that if I be more specific .net.

Here you are.

What else?

Ruby?

yeah, that's how it works.

And let's see.

It's, also console log result.

And I run in the Server, so we know that it's all real.

So let's take a look into, line number 22.

that's how I'm catching the user Input.

It's key.

Key up.

I, I wanna capture only keeups, right?

So when I'm typing, I want to get, an Input.

So that's how I'm taking my key ups and turning them into an observable, then I'm using pipe function to apply operators.

So I don't really need the whole object, I just need a value.

So I'm mapping the object, the event, into like I'm taking just the value bit from out there, and, uh, yeah, we did not come into that yet.

Let's assume it's commenced.

That's what we get.

did I actually save?

and there is a little problem here.

If I type any, just one, one little character, right?

I'm getting the result from API.

Do we really want that?

Like maybe we can improve it.

I want probably like let's limit to two, right?

I want to limit an interaction between, front end and backend.

Yeah.

Let's just say, okay, we just want, we, we want more than one, lens, like secure length.

So now if I type one character, it doesn't hit the API.

Oops.

So yeah, that's what I want, right?

And if I type two characters, I type two characters.

Oops.

'rx.net'.

Yeah, it works.

But if I type in one, it's, it shouldn't work.

this, there is no result like that.

So you're telling me, not found, but we, limit a little bit of interaction with the Server using this one line of code.

We can change it to two, for example, right?

If you type two characters, nothing happened.

'rx' nothing happened.

But if you type in '.net', yeah, we getting the result as you can see.

So now let's change it to one back to one.

What?

What else can we improve?

Very, let's say, okay, while I'm typing on every key up, I get an API right call, right?

So if I type rx, if I type D.

You see every time pay attention only console every time I type in the character.

The client call the client app, hit an API.

Do we really want that?

for some use cases, yes we do.

But let's assume we don't want for this particular use case.

So what we can take, we can apply the balance time operator saying that passing 1000 milliseconds, which means that, it'll measure for us the user Input.

if I type in, faster than one second, the API will be hit, right?

So if I type in quite fast, Oops.

Did I save?

Okay, let's, yeah.

So you see if I type in quite fast, there is no, nothing happen in console, right?

So let me, but if I type like more than more, more slower, there is a result.

Right now I'm typing, boom, nothing changes.

But if I type in slower, If I type in '.net', you see there is nothing from like nothing.net.

But if I just go back ba bam really quickly, faster than one second, okay.

Okay.

I got the result.

Yeah, I, see.

I hope you get the idea.

So then there is more thing you can apply here.

Say we don't want to repeated result.

if I type in '.net' multiple times I get in, that same result.

Let's say we don't want that.

we, want only unique results.

So we can apply this distinctUntilChange operator.

And now if I type rx, I got that.

If I, okay, let's do '.net'.

Okay.

I type in '.net' again, Nothing like there is no hit because will not hit in any API, as you can tell by looking at the console.

Oops.

I just type an E, that's why it was hitted.

But if I continue typing.net, dot net, it's only comparing previous and current.

It doesn't like comparing like previous.

And it's not behaving a cache.

It just, taken current and previous and comparing them.

I hope it makes sense.

So then what happened here, after we catch an Input, we using switchMap operator.

So which we switching a stream, we, switching a stream from the Input into actually passing a Input value into our API, right?

So we using switchMap operator, we capturing this searchQuery and then yeah, we call an API.

Let me show you the error handler, right?

I go, as you can see, I'm using this catch error, function here.

So let me stop a Server, pay attention on the console if I, let me just, oh, okay.

You got it right, so we got it.

It's an error here.

Oops.

Yeah, so if we hit in an API, we, still continue getting the error.

So it's how easy it is to handle errors and yeah, you can apply, we can like check for error code, we can send your stack trace to whatever Server you can log, show user nice user friendly message here.

Yeah, I hope it does make sense and yeah, I obviously have to remember to subscribe if I remove that.

We won't get, we get nothing.

So yeah, that was a demo.

Now let's come back to this, code snippet.

And I want you to, think for 30, 20, maybe 10 seconds.

And I want to guess the output.

Anyone can guess and output here in the console log.

So we have squareOdd, observable squareEven we are doing, some magic multiplying, carrying the numbers.

So any guesses?

What's the final output result?

1, 4, 9.

Ah-huh.

Okay.

He got it here first.

Okay, let's see.

It's now 1 94.

So right, you just learned, observable absorb pattern.

basic RX concepts, RX in modern Web and real world use cases.

So yeah, that was the original, definition of reactive programming.

Record programming is a software design paradigm built on top of the idea that everything is a data stream.

It was my first definition, right?

And that's the second one.

It's a little different, but because.

Actually now we spent like about 20 minutes learning observer pattern, right?

And now we can think of this.

Reactive programming is a mental model based on observer pattern that considers an asynchronous events as a data streams.

I hope it makes sense for you.

So you always dealing with observables.

Remember to subscribe.

It's very important.

If you want to know more about Eric Jess, check out this Angela Rocks episode where me and Ben Lesh, who is team lead at Eric Jess, talking about reactive programming and Eric J.

So you learn a lot.

Over 40 minutes.

I think it's 40 minutes, but if you play it on 1.5 speed, you spent like 25 minutes, right?

So you can listen to any on any podcasting platform if you just go there and search for angular rocks, you'll see there.

So should I always use RxJS to solve asynchronous events?

I think I already mentioned that, but I want to stress.

So yeah, it's a good question, right?

I'm usually taking this rule into consideration.

Should I use RxJS or not?

is the source continuously changing?

This answer is yes.

Yeah.

I can consider using RxJS.

I don't have to.

I, but I, might consider it as an option, but if the source continuously not changing, yeah.

Nevermind.

It's like, why wouldn't I use RxJS?

So yeah, if you wanna help or your team needs help into in engineering, architecture, training, you can talk to me and get a consultant.

And yeah, if you want to learn more what I do, check out kuncevic.dev, that's my personal website, and also put the slides on this website like later on today, So check it out and you can follow me on Twitter or LinkedIn or any other social platform.

I'm probably there sometime.

yeah, that was my talk.

Thank you for listening.

And yeah, I'm looking for questions if we have time.