Reactive Programming: Why It Matters

hello everybody thank you so much for inviting me miss Iceland the organizers so you know my name you know that I built cycle Jess I've also been working with rxjs and I've been working on our XJS raise your hand if you've ever heard of our XJS that's the kind of a good number so this talk was labeled JavaScript and we're gonna be talking about JavaScript but actually most of the stuff we're gonna see today are like kauflin haskell java aspectj and even some Microsoft Excel so it's like truly polyglot presentation so to get started there's this buzzword which is reactive right and we've been talking about that like a lot of it's kind of like a cool thing if something is reacted it's kind of cool but like what does it actually mean it's kind of confusing so if you open Wikipedia for instance you're gonna see automatic propagation of change or dynamic data flow I mean what does that even mean because like data is always flowing from A to B in any program and it's dynamic so any program is reactive I don't know so what do you think and this is actually a question what do you think is reactive anyone want to give like my gut feeling definition yeah okay it's like an excel you changed something and the whole thing changes okay that's good I mean that's good you're getting there but it's complicated you know it's like how can you say that a program is not reactive because well I changed something and go something changes so I don't know it's kind of complicated but what I want with today is that you leave here to the coffee break knowing what reactive means and knowing how to classify that this is not reactive and especially why do you reactive why is this stuff important let's talk about large code bases for a little bit so they all end up complex a bit like this so it becomes spaghetti and each of those boxes is like a class and your Java code base why can't we just keep it simple I mean it's it's annoying so the reason why it becomes complex is there's two type of complexities accidental complexity it's whenever you over engineer or you have too much stuff and you need to delete some nonsense and it basically happens every time you use Java so real really I mean don't be offended if you do Java I've been doing a lot of Java and like for work and for my master's thesis and it really is really bad and the other type of complexity is essential complexity it basically means that it's already complex no matter what language you're going to use and here's an example in e-commerce you have all of those concepts and they have to be related to each other there's nothing you can do to simplify that it's just going to be like that and probably there's even more concepts so imagine that each of these boxes would be a module depending on your language it could be a class or a file or I don't know a module and an arrow means that you know this will change that for instance you know the payment will somehow change the sale and you know the User Profile will affect the invoice so if we have let's say an arrow from the cards to the invoice it means that you know somehow the cart will change the invoice as an example let's say you add a new product to the cart and then you need to update the total amount invoiced right now because you're programming in module so everything lives inside a module ok everything lives inside a file or inside a class so that means that the arrow also lives inside a module but where does it live well it can either live in the arrow tail like that or in the arrow head so if it lives in the arrow tail it means that inside the cart module you have some kind of code that says update the invoice or basically you know when you're gonna add a product we're gonna call invoice update okay so if we look at a bit of this code in Kotlin which is similar to Java we have their imports the invoice Singleton define this other cart singleton and then we have a method or a function that when we add a product product we're going to call invoice singleton update the invoicing so so in this situation the cart module is kind of proactive you know it's responsible for making that change happen and the invoice is just sitting there passively doing nothing and it has this method there so you can poke it and save you know update so the invoice is completely unaware that it has that dependency with the cart right it just exposes this method and anyone can call it so that means that we need to have the increment counter public in order for other modules to change it and we're going to call that passive programming it's characterized by remote imperative changes and this sort of delegation of responsibility because the invoice is not responsible for itself but we can define the arrow in the arrow head like that which means that the invoice would have some code that knows how to register a callback in order to run that function whenever a product is added on the cart right now that's different because now the invoice module will import the cart so before we have the cart importing the invoice now we have the opposite and there in the side the invoice singleton we have this setup method that will add a callback there to the cart and then the invoice knows how to update itself okay so we put all this logic there so now the cards assumes this like broadcasting role the only thing it needs to do is the cart does its own cart stuff and it sends out some events about some stuff that happens inside it and then the invoice just assumes a reactive role where it listens to those interesting events happening in the cart and it changes itself okay so yeah and for that we need to make this these events public on the cart module because then any other module can listen to those and voila this is called reactive programming okay easy definition no longer a buzz word is that it's whenever the module being changed is responsible for defining that change okay it's not invoice it's not the cart that's defining change at all so this is definitely not new okay callbacks are reactive there you go callbacks are cool maybe but you know next time you argue with your coworker you can say you know callbacks are reactive and you can actually define why so to summarize passive programming is when you never have remote setting remote updating and reactive programming is when you have whenever you have self updates according to these events and in both of these cases something needs to be public so it's not like one of them completely wins the other they're dual to each other and it turns out that a lot of stuff are reactive I said callbacks but also spreadsheets are reactive if you don't even check in Wikipedia they talk about reactive programming they're just like our friend above there said that you know it's something that hates like a spreadsheet and why is because if you look at a and B B is basically a times 2 divided by a hundred and where's that relationship defined isn't the formula for B ok so there we go because the the if you think of in the arrow from A to B that arrow is defined B that's how it's reactive ok so back to the real world ecommerce example let's say you're working with a system like this and it has 770 classes or files and you want to understand how does this one module you know I want to understand this module ok you usually have two questions in your mind one of them is how does this module work and how does this module what does it affect in the rest of my system ok so let's suppose you have passive everywhere this is usually the case with a naive Java code base is that every class is updating the other classes ok if you ask yourself which other modules does the invoice change ok no one wants it given guess but its sale and payment of course because we have those arrows there and how did we discover that is by looking in side the invoice module then we see okay it calls sale de update it calls payment the update but if you ask yourself how does the invoice module work right how does it change over time the type of stuff you need to find all the usages of its methods you need to you know it just exposes public methods and you need to hunt down grip around the codebase how does the rest of the codebase call these but now suppose that you have reactive everywhere okay you're doing like spreadsheet type of stuff everywhere and you ask what other modules does the invoice change then it's the same answer sale and payment but the way that you discovered that is by searching for the usages of those events that the invoice has okay then invoice omit some events some other folks listen to those so we need to search for all of those usages of events but if you ask yourself how does the invoice work then you only need to look inside the invoice module and then you're going to see ok the invoice imports the cards and it uses it like that and it imports the coupon and it changes its itself according to that so passive and reactive are dual to each other in this regard okay in both cases you have some use case where you need to find usages some use case where you need to look inside so can we say that one is better than the others they look so balanced you know but the thing is that you usually want to know first how does this module work and then once you know how it works you can answer okay what are the other things that it affects and that's why reactive programming matters and it's a good default because it allows you to just look at something and you okay you understand it and that's it so in contrast if you would use passive by default okay passive everywhere then you basically get modules that are irresponsible because you want to know how does the invoice work I don't know you need to start searching for logic that is scattered all around the codebase in other models so if you've ever been in this hell of like fine usages of this find usages of that find users of that and then you're like okay what was I looking in the first place and you're trying to build this mental model of how stuff work you're just visiting the whole thing that's what I'm talking about and here's an example that I've done a couple of times and it was proven really well to work really well is analytics how do you set those events up usually what I've seen is in like a naive case is that let's say we have a login page and inside that we have a piece of code that says analytics dot send event then the front page says analytics that's in event and then you want to know okay so how does analytics work in this application you don't know you open the analytics module and the only thing you see is send event method okay and then you need to search for everywhere else that has that but if you do reactive everywhere then it sort of liberate all of these pages from knowing anything about analytics and then if you want to know how analytics works you just open the analytics class or file and it's all there and I've done this for real in like an Android and Java application that's been like super nice so and I really recommend it so right now if this may be sound sounding like aspect-oriented programming has anyone heard of that before yeah it's kind of like an oldish type of thing it's meant for cross-cutting concerns like things that are everywhere like logging or analytics and here we were able to solve a cross-cutting concern with reactive programming I don't want to go too deep into aspect oriented programming but here's just a dump example really quickly let's say you have a login page and right now has nothing related to analytics that's good it's only doing it's logging stuff and with an framework called aspectj for java you can do stuff like defining a point cut which is basically defined moments in the execution of your program like for instance the login page was initialized that's I'm gonna call that opened and then you can define an advice that is code to be run whenever the execution passes those those points it's basically saying you know after the execution of the program hits open run that advice snip it so with that we're able to isolate all this analytic stuff in these advices basically and we can do something similar with reactive programming but in this case we need to add a little bit of stuff which is the broadcast event so by the end of the initializing method we need to say ok broadcast this event called open and so far there's nothing related to analytics itself it's just an event that other modules could use in completely different ways and then it should be able to be possible to listen to that event so for instance here I can make the analytics class that will import the login page and then it knows how to set up a listener - you know whenever open happens I'm gonna send this event what do you get is that if you want to know how this analytics work in my program you open this class or this file and you see everything also if you want to turn off and on the ticks everywhere you can just remove this class or you can just swap it with something else that's really nice right because we separated the whole analytics concerns in one place that's nice but if you're a nitpicker like me then you're seeing problems and one of the problems is that I'm not really being honest here because it's not really reactive everywhere there's still some passive programming here for instance back in the e-commerce example which is basically the same thing there we have there this remote update so what is really going on here because I have a I have a remote update right the thing is it looks reactive ok the invoice is reacting to the cart it is but when you look deeper inside the invoice it's just the setup phase that's reacting to the cart but inside that class I'm still updating some other part let's say some member of that class right so how could we not have setup or updaters at all how could we just use reactive everywhere and there we go our friend at the top guess correctly that something like spreadsheet there are no update methods in spreadsheets and that's why you know business guys love this because the only thing that they have is data and formulas so let's stop and admire excel bit yeah so anyway um and we can model something like the e-commerce application because you have there a cell for the invoice and what what it does it just has a formula saying you know I'm gonna sum over the column of products there we go we don't have any updates whatsoever here so if we would plot that as a time line okay then every time we interact with that column of products and we add a new product it's going to add automatically recalculate the the invoice using the sum formula and so forth every time something is added so but what if we could have more formulas than just sum and average and all those statistics stuff that Excel has what if you would have in Excel like delay if you would have delay then it means that you know you change a cell here and after one second another cell changes here and with that you suddenly enable animations in spreadsheets I don't have a demo of that but just imagine in your mind that you change a cell there and then everything's kind of like goes like funny and stuff well if you would add not just delay but a ton of other crazy stuff then you end up with something like a functional and reactive programming library like arts Java or XJS and the idea here is basically to represent each variable as a stream of values over time and in rxjs and Java they call this observables so if this these would be primitives okay I have a stream here and I could just pass it around like I could give it to this module and then that module would have a stream it can listen to that stream and it can do stuff that's the idea you can just pass around streams as if they would be like integers or whatever so whenever I say stream try to put in your head that it's kind of like a spreadsheet cell or a spreadsheet column with superpowers in case you get confused a bit or you can think of it as just a stream so how can we get rid of passive programming here with this update thingy we can just think you know every time I add a product to this cart that's an event right I added a product so that's an event and if you just put them all in a timeline that's a stream of infants and then I could use that stream of events and I just do a sum over all of those right kind of like in spreadsheet and that's what we're gonna do here so let's imagine that the cart would have a stream of product added stream and then it passes we pass we get that to the invoice and then the invoice knows okay I'm gonna add over these with the fold and then we get out a stream of values of those that invoice total calculated that's why it's float there that's really nice because then if you want to know how does the invoice work okay you don't need to hunt down any update invoice method at all even internally here we don't have any update at all we can just look inside that get invoice and we know exactly how this thing will behave over time just like in a spreadsheet where you have a formula there and you don't need to hunt down any other kind of update method it's it's not passive anymore but if you're a nitpicker like me you probably see a problem anyone see like a really weird problem okay well maybe this has been kind of hidden okay yeah guests are not like updates or centers so that's not passive but yeah okay yeah okay uh we're kind of short in time so we need to go like chop chop chop so what you're saying is that it's kind of like a call back still I agree yeah it's kind of composing callbacks but the problem that you've haven't seen is that there's Singleton's everywhere oh my god what are we doing you know here we have import the card singleton and we have defining the singleton invoice and you know Singleton's are not good if we do reactive everywhere we get Singleton's everywhere and if we do passive everywhere we get irresponsible modules and you know with Singleton's you you really don't have reusable code because it's statically importing some specific thing and it turns out that while we were doing reactive everywhere we missed out on something nice about passive programming instead it's really good for data structures whether it's mutable or immutable for instance list dot sort is a passive programming thing because you know the list is just sitting there waiting and then you can just kick it say sort and then it sorts itself yeah and it's also really good for dependency injection because you can say yo depend on this and then it depends on that so yeah and then when you're dealing with dependencies there's two things okay it's like a what is exactly the thing that I'm depending on and how do I depend on that we don't need to put those two things as one we can separate them so here we had import the singleton the card singleton and that's exactly what am i depending on and the how do I depend on that is here this observable declaration I'm saying given that stream of product at is I'm gonna depend on it like this and this is the bad part we want to get rid of this so the good part of passive programming is that the invoice was unaware of the dependency right it's a nice thing but the good thing is the reactive programming is that the invoice was was responsible for change in itself so could we have these two these two things yeah we can with passively reactive I'm not joking it's like you can actually use reactive just to have this property of how does it work look inside and passive to know you know I don't know who I depend on please inject so let's change this code the way that we do that is remove these Singleton's they're not single tons anymore now this is like a invoice class and then we add this member their public park cart and it's public so anyone can set that right that's passive programming and then I'm using this dot cards dot product added observable okay so someone can set that card for me and I'm gonna depend on it like that passive style so this is good because how does the invoice work just look inside the getter what does it depend on it's reusable anything but if you're in it pretty girl like me you probably notice some problems here this is not perfect because you know I have just get invoice inside the invoice class so can we do better one thing we can do is we can get this cart member and put it in the parameter of the getter like that okay because you know functions already have a dependency injection maker mechanism you just miss the parameter can you just pass that parameter of the parameter is the dependency there you go and why do we have this class I mean go away you know so in Kotlin you can do this and that's really good that's why cotton is good job is bad because in in Java you would have to have a class doesn't matter so and do we even need the cart we only need the product added observable right and it happens to be on the cart but we could just make that be the argument so given the product add an added stream we're going to depend on it like this we're going to sum over all the stuff and we're going to spit out the stream of invoice values and there we go now we get a function that only takes an observable string of product added and then we get out observe streamium of calculated invoice basically this situation here stream stream stream and the function is a dependency injection mechanism probably better than you know setting things like in class members and because it's a function we also have the opportunity of making it appear function and we just need to make sure we're not doing side-effects okay what's the problem with the side-effects here's the problem if I pass foo to this function I want to get out a and then I pass through we want to get eight again I might pass through again I get B and that's not nice because you know how can we predict what this thing is doing so that's why moving side-effects away gives us this predictability so we just we can move these side-effects by putting them in listeners or observers basically I have the stream I pass through the stream and then you can listen to it and do some nasty stuff like analytics dot send event and that is a write effect okay I'm sending stuff to the server that's a right effect but there are other types of effects that we need to take care of one of them is reading write the opposite of writing for instance every time the user clicks on buy this product bye bye bye bye bye that is a click right and that comes from the user we're reading that from the external world we can model that as a stream stream of clicks and you know if we keep on doing this we end up with an architecture like this that has only streams and functions where all the side effects are pushes to the extremes where we start with like read we process stuff and we end up with writes and on the Left we have pure logic and on the right we have only effects and handling and everything on the left was completely reactive like spreadsheets and also completely functional because we don't have side effects and while out there you go this is the idea in cycle j/s so yeah and it's a framework for JavaScript you can check it out let's look at a little bit of psycho Jess okay now you should know everything of psychologists no no sorry okay yeah so the way that we do psychologists is that all the pure logic that I talked about goes into this main function sources are basically everything that you can read from like clicks and sinks are everything that you're gonna write so for instance here we can detect clicks on some kind of button and that is a stream and then we you know use formulas like in spreadsheets to make we sum all of those clicks over time kind of like you have some in spreadsheets then we map that to markup okay and this markup will be the right effect I want to write this to the DOM and I want to read clicks from the DOM and this is the application running in the browser and on the right we have a dev tool that visualizes the streams and the functions between those so at the top we have a read stream okay clicks are at the top and at the bottom is the write effects so basically the bottom square there encodes the basically the how to make this markup appear on the DOM and the vents passing through are this data flow Network you know it turns out that this is not a new idea it's basically the same as an ancient Haskell io model called stream IO it's also the so called dataflow paradigm that exists since the 60s or 70s and it's pretty much explored a lot in visual programming so in some game engines they use visual programming with dataflow and stuff like that and yeah it's it has a lot of connection with other good sort of existing literature so to summarize this is what I want you to take home reactive programming is self updates self updates according to events and passive programming is remote setting why reactive is because you know you want to be able to look inside this module and know how it works right it's a good default and if you start moving effects to the edges of your system you end up with functional programming in some form and it's a great idea that brings separation of concerns and predictable code thank you very much for listening hi thank you for a very clear and accessible talk I think you've made a lot of stuff clear now I noticed that fans of reactive programming they like to discuss continuous versus discrete directive programming and I have to say I never fully understood it doesn't matter and if so can you like give the very short version of what the distinction is yeah so it really matters a lot and in this presentation I didn't try to go into that but a really good example of that is your age and your birthdays so your age is continuous value you always have an age right now you have an age but you don't have a birthday right now I mean birthdays are events that happen annually right but these two are really interrelated every year your age changes because of your birthday so they are like core ideas that you want to express sometimes some things are fundamentally events dreams and something are fun fundamentally values over time like ages and birthdays and they happen all over the place in anything you know is this library using the ragged effects yes psycho chess is using react effects and sweet young and we actually support multiple stream libraries since Monday and yeah this Monday so now we have our own stream library called extreme because I always wanted to do extreme programming but I never know knew how to do it yeah it's yeah reactive X okay thank you Andrew [Applause]

Channel: Coding Tech

Views: 60,186

Keywords: reactive programming, software development, coding, web development, web design, clean code

Id: 49dMGC1hM1o

Length: 30min 33sec (1833 seconds)

Published: Sat Nov 25 2017