I switched a map and you'll never guess what happened next - Pete Darwin, Shai Reznik, Mike Brocchi

[Applause] hey what's he doing I'm just working on finishing this autocomplete component being for this Brynn ends tomorrow cool can I have a look sure hey you're using a switch man nice really I am well didn't you write this code okay listen don't tell the boss or anybody else but I just copy and pasted that code from Stack Overflow and it seems to be working what no no you can't do that don't you understand switch map no who do I look like Ben Lesh hey what's going on why don't you explain switch map to him oh yeah sure sure it's easy let's look at the docs here switch map projects each source value to an observable which is merged in the output observable emitting values only from the most recently projected observable well you see it subscribes to one at a time and then you have to worry about which one you're subscribed to you and then no idea what he was just talking about no me neither but look it's really not that difficult okay so a switch map is just like it's a mapping from one observable to multiple [Music] then can't you see this poor soul is lost here read this what just read the story oh okay [Music] the year is 2018 every five minutes a new JavaScript framework is born our story takes place inside the offices of Kevin Belson a young successful and handsome CEO if a little unstable you wrote it he previously made millions with startups such as IBM e and llama date he's currently working on his latest venture observables Kevin is obsessed with the latest technology whenever he gets a tweet about a new JavaScript framework he needs it like yesterday I knew it like yesterday let's see how Kevin got on one day when his Twitter stream went wild with new frameworks what's that beg born is the new hot for a walk as quick as you could say misko hevery Kevin was on the phone to a recruitment agent hello backbone recruitment agency Dalaran speaking right away sir before you knew it developers started to arrive hi do you know backbone yes great you're hired these are all hiding bundles come on come on you're hired and they kept coming hi do you know backbone yes you're great you could run the bank on materials did take some more yeah okay but of course Twitter never stands still and neither too hot new frameworks oh what's that Angela is the new HUD frame Oh he was now convinced that Angela was what he needed angular recruitment agency recruiter Rob speaking I need angular developers recruiter Rob has got you covered thanks Rick really Rob but just before any more developers arrived wait a minute I don't want any more backbone developers I better call their loris hello backbone recruitment agency tumbler speaking oh hi Dolores you're fired what didn't you hear angular is the new hot travel so please no more backbone developers who is this no sooner had he hung up than the first angular recruit arrived hi do you know angular yes I do I'm about ten years of experience then you who are you misko hevery with mister on the team there were plenty of developers keen to join observable hi do you know angular yes you're hired and this went on and on and on great nice stories but what the heck is this have to do with switch map what iris brilliant but then you get it I mean it's obvious if you remember she'll get a stream of hot new frame earthquakes okay I got that and this is an observable of tweets yeah and when the first wit arrives then the CEO calls the backbone agency and then ask them to start sending backbone developers and that's a recruit's observable so we have two observables at the same time ah don't worry about that for a minute so they keep sending backbone recruits until the CEO gets a new tweet about the angular framework and calls the angular agency and ask them to start sending angular recruits what about the background recruits yes so don't forget that then she'll cause Deloris at the backbone agency and asked her to stop sending no backbone there he hires her yeah we got that relax man yeah so after referrers her they stopped sending backbone recruits and that's when they kill the backbone recruits observable [Music] yeah and then we see envelope developers start rolling in okay and then when that comes that's a new recruits observable yes so where is the switch map when you think about it whenever the CEO gets a new tweet he switches from one agency's recruits to the other agencies recruits see yeah it's obvious like when you every time the new framework tweet arrives um we kill the most recent background recruits observable and then we get a new framework ever observable to replace it um yeah ah okay okay enough fury let's see how we might Coley's Oh finally let me do this so first we have an observable stream of tweets okay so we can just hard code that for a moment okay so if we were to subscribe to that observable we get one framework tweet after the other okay what do you mean like if I just do this yeah yeah just like that oh okay let's write in there see check the console but first let me sprinkle some whoo reactive determine magic on top of it now you can run the code wow thanks reactive teacher man so since we're subscribing to their framework tweets observable here we'll get first we'll get the backbone framework tweet logged into the console and then the angular framework tweet will arrive and the same thing happens alright isn't that beautiful right well so we don't really need to subscribe just yet right for each for a Brooke tweak the seal then call looks of an agency that specializes in that rebel okay we can have a function call called get agency which takes a framework and returns us the agency for that framework yes and then the CEO asked that agency to start sending recruits to him yeah right so the agency object can have a method on it called get recruits observable along whole long what no that's so 2017 we don't change map operators anymore the pipe method there yeah yeah sorry I knew that okay so the modern way of doing it is to put the map functions into a pipe call and then this makes the code tree shakable yeah what'd he say anyway so we have the framework tweet and then when we get the framework to eat we get its agency right and then for each agency we get the agency's recruits way are you saying that if we'd subscribe to this now we'll start seeing individual recruits in the console do you mean like something like this yeah I think so well let's run it and see for ourselves so yeah so we see the first backbone that tweet arrives and gets mapped to that backbone agency but now pay attention to this the agency gets mapped to an observable of recruits and not the actual recruits so that is what we're seeing load into the console I I did not expect that well I expected that this is because we're subscribing to an observable of observables yeah let's not confuse him okay oh because we have the recruits observable we can just subscribe to that inside of the first subscribe as I get the individual recruits okay so if we just do something like this yes exactly okay let's run it again and check the result so again we see the backbone gets mapped into recruits observe all right eventually and then watch this since we subscribe inside the subscribe we get each individual backbone recruit in the console log right and work here and when you subscribe inside a subscribe that is called flattening the observer wall flattening think about it like an array of arrays if you'd like to have one giant array out of all the values of the inner arrays you flatten it flatten it okay I got that but you need to be careful when you do these with observables oh why do we need to be careful well let's see what happens when the second tweet comes in that shouldn't be a problem we've already subscribed to the background recruits observable and login error when we subscribe to that we get the background recruits on the console log then the angular tweet comes in and that gets mapped to its agency and those recruits observe their its recruits observable and then we subscribe to that inside and then we see the angular recruits being logged to the console and it works yes just like I thought it would um Mike yes reactive teacher man yeah take a look oh where did those extra background developers come from the weren't they supposed to stop well duh we never fired the first agency yes if you remember that when camping the CEO hired the angular agency he then immediately fired the backbone agency of course he didn't have to do that he could have chosen not to fire the backbone agency and to get all recruits from both agencies and this is exactly what's happening in our code so if you get an observable out as a value from another observable you need to flatten it flatten it okay and when you flatten it you then need to make a decision correct right we need a flattening strategy a strategy of what to do with all those recruit subscriptions yes whenever you flatten you need a flattening strategy strategy okay so in this case our flattening strategy is to somehow stop getting back on developers yes we need to unsubscribe from that backbone developers oh I can do that that's easy okay so right first of all we need to store a subscription to the current recruits observable subscription yeah in the local variable right and then when a new recruits observable comes in we have to unsubscribe from the previous subscription before we subscribe to the new observable and that is the flutter little strategy [Music] okay that code is really confusing what is he done there well this code might look scary but if you think about it we're just unsubscribing from the previous recruits observable before we subscribe to the new recruits observer wall okay okay why don't we run it and maybe see them get killed okay so yeah again we see that backbone framework arrived and eventually gets mapped into that backbone recruits observable now this is our first recruits observable so we don't have a subscription stored so we step over their statement and just subscribe to the background recruits observable we store its subscription in the local variable great and now we start seeing backbone developers log in onto the console log all of a sudden relax it's just a story okay okay we see that angular framework arrived and once this gets mapped we now have two recruits observable to deal with and this is where our flattening strategy kicks in flattening strategy yeah so we enter into the it's time because we still have a previously saved subscription so we unsubscribe from the previous subscription and this is where we kill the backbone recruits observable yay what just be normal okay okay yeah and finally we we subscribe to the new angular recruits observable and store each subscription into the local verbal and stuff but nothing Sark okay should get that checked ok and now we start seeing angular developers being log to the console that is beautiful alright and then when we do this this is they switch strategy the switch strategy right yeah so do you get what we're saying up until this point yeah I think so but it's still kind of confusing okay so let's try to run through it okay okay so unsubscribing from the previous observable before subscribe me the new one is called the switch strategy yeah exactly yeah we can get rid of all of that scary code and just replace it with a single call to switch Raph yeah let's run it okay okay then you'll see how how it works okay great the backbone in recruits the background tweet arrives and it gets mapped to a recruits observable just like before haha but this time we store a subscription in the switch map function and then a Bess's all the individual backbone recruits to this subscribe method right and then when the new angular suite arrives we map that one through to an agency and then to its recruits observable and here comes the switch we're switching to the new subscription and seeing only the angular recruits to the subscribe method oh all that logic Erlich that's there is inside the switch malfunction is that some sort of magic no no no it's not magic dude it's just code yeah okay the switch map strategy does look like a magical thing which Maps agencies to individual recruits in the sequence but if we look under the hood we see that it just does these three things it Maps the agency to recruit observable it then subscribe to this recruits observable and this flattens the observable and then it applies the switch strategy unsubscribe from the previous recruits observable before subscribing to the new one and this is switch [Applause] hold on all this actually makes sense did I just learn switch man I believe you have thanks reactive teacher man now I understand how that might autocomplete component actually works oh it was a group effort but now my work here is done what's that so someone is struggling with the concat map operator reactive that was certainly interesting I will have to bring that up door and stand up tomorrow excuse me out now now back to work hold on no no no what you need to do there is trigger change detection change detection doesn't that run automatically here we go again hey did I ever tell you the story about the rabbi and the changes check out high res Vallejo and yeah this was Mike this was speech I was shy and this was sweeter side [Music]

Channel: ng-conf

Views: 36,603

Keywords:

Id: rUZ9CjcaCEw

Length: 21min 6sec (1266 seconds)

Published: Wed May 09 2018