VueRx - John Lindquist - VueConf US 2018

[Music] thank you for that warm welcome just one quick conference speaking tip never speak right after Sarah Dresner because you'll never be as funny or as polished as her presentations so that's rule number one of conference presentations other than that I'm John linka was that big ugly guy up on the screen over there that's me I am a founder of egghead IO and you know egghead subscribers out there all right sweet all right thank you for your support and for your love if you're not an egghead subscriber yet I'm not going to peer pressure you or you know guilt-trip you into subscription but all the cool kids are doing it and my kids are hungry so yeah my presentation is on view Rx and that has to do with combining view with the rxjs streaming library now rxjs isn't easy but that's okay because I'm not smart in fact I think I'm dumb enough just to get these dumb enough to get these concepts across to people who are new to rxjs and help them understand how it all works together now one of my favorite books is called badass making users awesome by Kathy Sierra this is actually a book we send to all of our new instructors it egghead not a kid as soon as they come on we send out a Mike kit and we send this book with them and we ask them to read it because it's a fantastic book you can find on Amazon or wherever and a concept she talks about in there is the concept of perceptual exposure which means that one of the best ways of learning is through experience by experiencing someone else do the thing so if you want to learn how to fly a plane that you sit in the cockpit with the pilot you watch what the pilot does how she acts or reacts to certain and you you take in the cause and effect of their decisions now your brain is this magical thing which can easily detect patterns so when you're watching that pilot to make those decisions you're picking up on things and learning those patterns but you don't even know that you're learning it it's just coming to you as an intuition and I think you can even make the argument that the idea of imposter syndrome can come from you feeling like you don't know why you know everything you know you spent so many years watching other people code and writing your own code and trial and error and all these things that you don't know why you know all of it because he didn't go to school for it you don't feel validated but let me let me assure you you are perfectly capable and competent programmers and you're all wonderful at your jobs so as are your co-workers all right so so I'm gonna dive right into the experience of this you can see on the screen here that for my slides I'll use quotes there slides I was already using rxjs to make this happen because I was listening on the window for keydown events and then plucking the key property off of him then if the key was the left arrow or the right arrow I created two streams off of those now if you hit left I map that to negative one to push it to the left or if you hit right I've mapped it to positive one to push it to the right and then I throttle the time you can see if I hold down the left key it's going at a certain pace instead of just zooming through hold down the right key instead of zooming through I started with zero and then I kept track of it by adding that I to the direction and that gave me a screaming index of the events map to those numbers and then my slides are simply combining the slides with that index and then pulling off that slide off of this the array of slides the observable that provided that array of slides now that is a lot to take in but let's dive more into the experience of doing it rather than spending so much time on the language there's a lot of language and giving a glossary to figure out rxjs the experience of seeing how things stream can really help you understand what's going on so I'm going to switch over to my little demo here all right so everyone's favorite activity is hitting the snooze button so cieariy scenario number one this is the snooze scenario now you can think of how you'd solve this in your current view projects or however however you're writing your code these days where a timer comes down the buttons activate when the timer is done you can click a button to start that timer again or once that's done you can hit a dismiss to and everything and deactivate everything no more timers no more button handlers it's it's all kind of going so I'm going to show this by switching over to my snooze start my little my little F there if you can you can even see that to the bottom of the screen I'm just switching branches here so all I have here is a template with some two buttons some title text and no code at all just just some basic styles so what I'll start with is a script tag and then I will export oops I will export not next for but I will export this is like a hard standing I'm too tall for this table export default and then I also need to import let's see from rxjs I need to import what's called observable and then what the since I've already installed and configured the view rx library this is going to add something called subscriptions so I'll bring that in subscriptions and this may look familiar because it's very similar to the data object you create a data function and then you return an object so from here I can create streams and then return streams to my template so I'm going to create an observable interval interval of one second I'm going to call this my count downstream and then return that and show it up in my h1 here so to do if I missed count down stream all right so what that's going to do right now is push values in every one second so you can think always be thinking I'm streaming so that means I'm pushing and pushing and pushing values in all right but I don't want it to go up I want it to go down so the way you'd make it go down is by telling it to the same way you'd use reduce an accumulator I'm going to take the time until the time to subtract one instead of adding one so now it'll go negative wonderful we actually want this to start with the number five so it's going to start at five and then work its way down and then because it's a timer or an alarm system we want to take wild time is greater than zero all right so this is going to go ahead and stop me and save there this is going to start at five and go down to one and then stop before gets to zero because zero is not greater than zero unless the new says otherwise I don't know all right so I spin it up a bit I'm because you don't want to watch five seconds of that every single time but because we're pushing values out those those five times through through the stream that's streaming down pushing the value down down down when we hit this part and we hit the take while now we're complete it is done and you can kind of move on to the next step so what I can do is concatenate another observable onto it so I can say observable of and this will be my alarm wake up and then how about a party emoji all right so one then wake up so now we have two buttons that do nothing but if i refresh that'll trigger the observer will start and now let's look up some buttons now the buttons use a system called or a property on your called Dom streams so Dom streams if I can tell this as a weird angle to type it and I'm gonna call this first Dom stream a snooze stream and then come up in into here and say the stream click and snooze alright so instead of that at sign we're writing V Stream as the directive in there to say that this is going to stream values in and I can push values in so right now with my stream as it is I can say repeat I can say just repeat here and save and this will trigger that until it to keep on going back to the beginning back to the beginning back to the beginning but I can also say repeat when and return an observable from this so I can say repeat when this dot snooze so now it gets to wake up and when I click on snooze it repeats snooze it repeats all right so at this point it is essentially handed over the stream to this other stream so we're connecting the pieces here we're letting the the values flow down through the stream so I want the dismiss button which is currently doing nothing to to cancel it to tell it to end so let's say do this until I hit the dismiss button so we'll set that up as well so dismiss you'll set up a Dom stream for every button that you're gonna there every value in a stream in so V stream click and let's call it dismiss so this matches this so we'll go ahead and say take until this dismiss all right so I can hit snooze and I can hit dismiss and now snooze the button doesn't work anymore I'm not sure if you can hear me but I'm clicking as loud as I possibly can on a trackpad so now we've actually hit once we hit dismiss this is complete and we can kind of move on to the next step after that and we can concatenate more things on to it so I can say can cat observable have a nice have a great have a wonderful day and how about a huggy face that's one of my favorites so five four three two one wake up and dismiss have a wonderful day the buttons don't work any more because you are awake now one thing to note here there there are some gotchas with streams you always have to be aware of because it's time-based the things are happening over time and you're kind of making a stream that represents the future if I just start smashing this the snooze button here you're telling it to repeat every single time you click on that and that's not what we want because it's kind of triggering that stream over again instead of sharing that first stream your trigger and over again so we can say share and this way it'll always share that first one and I can smash on that button but it's not going to do anything until I've reached that state where it's in wake up similarly with dismiss I can try and hit dismiss as much as possible but that doesn't work until I hit wake up alright so from here we created this entire countdown stream which walks step-by-step down you start with five you subtract a value you go until the zero you say wake up you make sure you're sharing that same stream you repeat when you click or or end when you dismiss and then you concatenate the message that you want to send at the end but there's also a lot of UI things you'd like to do with this and one of them is disabling the buttons if if we can't click on them why have them up there if they're not going to do anything and I'm gonna make another stream in here called disable and this is going to be the countdown stream I'm going to map to the value that comes through here because countdown is pushing out those values the ones and the messages and all that sort of stuff and if the value is not equal to wake up so I'll just copy that little copy and paste it's just like I'm working a stack overflow so now I have a disable stream that's going to be true as long as it doesn't say wake up so I can hand back this disabled and then pass in disabled to my buttons so I'll come up here say disabled and disable my buttons so you'll see they disabled almost right away so it's like it's like it's almost working perfectly and that's that's another little thing where this stream starts with it starts right away and it's and this subscribes after that initial value has already been pushed out so another thing you need to be aware of is if something's firing before you get a chance to hook into it you can do things like share replay and that'll make sure that anybody who who hooks into that stream later on gets those values that you may have missed so when I hit snooze now it disables right away it's News Now disables right away hit dismiss it's done the buttons are gone and the whole thing's shut down everything's complete so you can kind of think of how you'd solve this in other ways with reactive properties the way you'd have to set property set state keeping track of state in all those things and you can compare it to this idea of streaming down passing values down what does it change to how am I going to handle it how am I going to repeat what am I going to add to it at certain states and you can see that the benefit of working with something working with streams in this way next I'd like to switch over to the if at first you don't succeed example let's uh let's go ahead and click the load button make sure my server is running so I'll click load and I will load our Yoda so there's there's Yoda in his pretty little face now what happens if your server goes down or you go offline so how come that's not focusing focus and go down alright I will press up the button then alright so the server should be down now and if i refresh and hit load I'm gonna pop up this modal saying would you like to retry and I can smash on retry and it's and it's retrying and you can see those errors popping up in the log down there so I can bring my server back up and this time when I hit retry it load as the Yoda alright so this is going to be our let's see retry start this is gonna be the if at first you don't succeed scenario and you can think of how you would do this if you were to try and achieve the same thing through your own through the Pat whatever patterns you use now alright so first we have the load button and we kind of talked about that already is that we create Dom streams where you can stream the values in so so let's hook up that load button so the stream and click and we called that load and in case you're wondering the dollar sign is just a convention someone decided that stream should have $1 on in their name but you do not have to do that so I'm gonna say load and when that load event pushes through I'm going to switch over to a different observable so you click load and I'm going to switch over to something else now the cool thing is you can switch over to I'm going to switch over to an observable Ajax call and what I'm going to request is something from the server so I'll say HTTP / / localhost 3000 and Yoda is people / 0 and then off that Ajax call we just want to pluck the response all right so right now this is a stream setup that nobody is using yet that if I click that button then it'll give me back the the the Yoda data object so I'm going to go ahead and call this person and return person and now the temp and now when I put this in the template the template will subscribe to this value so let's just go ahead and put right let's put your person all right so I'm gonna click load is not defined where did I just type something let me my first yeah this thank you you win a extra beignet whoever said that it's on me all right so I'm gonna click the load button and you can see that data comes in its gonna render out that object as Jason and just display it in the page and that's because that event pushes into the switch map it says hey what do you want to do I could I could have passed in the event here and done something with that by sending it to the the Ajax call but right now I don't want to do anything with the event I just want to switch over and then we we loaded Yoda so from there let's have the service fail alright let's let's actually display Yoda real quick so I'm gonna say constant aim is person o'clock name you can kind of see the properties over here you could grab off this say Const image it's gonna be person clock image and then we'll map this - it's a image it's on the server so we'll map this to HTTP colon slash slash and then localhost 3000 and the image and then we can also do some alt text so person actually let's do name and then map the name - it's a image of you know that'll be fine image of name alright so we have these three streams and well the gotchas here is that if you hook three streams up to person they'll call that Ajax call three times so kind of like the other scenario you want to make sure that we share that and only only reuse that one initial stream and then we'll go ahead and return the name and image image and the alt and then we can go ahead and put in the dude put in the name we can delete that put in the image and put in the alt all right so now clicking a button just loads that data and pushes it into the template using its tiny bit of code here where we load push the event into the Ajax call and then grab some other streams off of that first stream a name and image it small text now here's where the nuclear explosion goes off and your server goes down and of course that's the greatest of your worries at that time is what am I gonna load Yoda and during this nuclear fallout so I'll hit refresh and click load and all you see is an uncaught error exception in the console oh no what am I going to do you can just say well just catch that error and instead of instead of just leaving the error uncut I'm gonna push through a different value I'm gonna say observable observe table of error so now on off of that person stream I'm going to create an error stream I'm gonna say error and this will be off the person stream and I'm gonna say if I get a value of error from that stream then push out an error so I'm just gonna value this if value is not quadruple equals that's two equal alright so error and error so this is just a true or false value coming through based on whether or not we get the text of error now I can use that my template and I have the beautify component library available to me so I'm just gonna use a modal from that so I'll say active error it's the person who wrote beautify here No thank you if you're listening or watching this later it's awesome beautify beautifies the one I'm using beautify is also awesome as are all things that rhyme with you alright so inside of this modal I will create a title and say you appear offline alright so now I'll click it'll fire up that modal at some very dark text it has some helpers in here I'll say has text white I think is the class name - there you go so you appear offline so we caught the error we triggered an error stream and that fired the modal to launch so now we can say button button who has a button will retry this and set up a retried Dom stream retry and retry all right so now to retry I'm just gonna say the person isn't just this dot load it's it can be either load or retry so I'll say observable merge this load or this dot retry if you ever thinking or you think observable merged that'll push either of those values through so either of those events will be handled by by those button clicks so now I can click load and you clear out the console I can hit retry and you'll see it's still pushing errors through that I'm I'm handling that error dialog is staying open and then I can NPM start and now when I click the button we have our wonderful Yoda back all right so another another good thing to know about this is you can instead of catching and retrying manually with buttons and with other user interactions you can retry programmatically if you use retry this is just going to continuously call retry as fast as it possibly can so we're not going to use that one we're going to use retry when and say error delay one second all right so we'll tear the server down and I'll hit load and you'll see it'll fire off every second it's trying to make that request again it's like come on you there yet are you there yet are you there yet and then as soon as I bring the server back up you can see it loaded Yoda into the page all right and all of that is by just merging together these two buttons the two events push through they switch over to an ajax call get the response if it fails we tell it you know what retry or handle it manually and it's just some basic properties off of that person stream all right time check so let's switch over to the last scenario here that I'd like to show off and this is the synching UI with content scenario where if I have tabs or whatever you want to call this is a tabs component when I click on that it loads in it loads in the person that I clicked on so just based on ID so if I switch over to my tabs start I just have an empty template here just tabs tabs controller a container whatever you want to call it and an h1 an image tag already set up and I have some data that has an active tab that has a V model coming from that tabs so whatever tab if it's zero one two three four it'll be that index zero one two three four bound to it so the first thing I want to do is populate those tabs how am I going to get data from my server into the tabs and to show all the people I want to show and the way I can do that is pretty simply create a people stream and say of zero Ajax and then HTTP click on localhost 3000 and the people pluck the response and then return the people now those people can put be put directly into the template so if I just drop it right here you'll see a giant array of people show up right right away because I didn't hook this up to a button telling it to load I just said you know what in the template subscribe to this push the values directly into the template right away so instead of just adding raw data to slate on the page instead let's go into our tab items and say v4 and I'm gonna say person of my people stream I can key this to person ID and then I can label this as person name it's saved there and now we have that data being pushed into and we have 180 Star Wars characters available to us to click on now because we're not going to use click events they're not buttons we're gonna be working off of a model provided us by the component instead of setting up our own Dom stream this time we're going to watch watch a property change and this works very similarly to how the watch works it hooks into that same API I'm gonna say watch as observable this is something that VXR provides for you and I'm gonna say watch that active tab and I'll call this the active tab stream and return active tab then drop active tab up in here active tab stream alright and you'll notice it doesn't show up immediately it doesn't show up right away but when I click it'll show the old value and the new value I click again old value new value and it will show me how that active tab is changing now because it doesn't show up immediately there is a configuration option and you'll never guess what it's called to make something show immediately it's called immediate and so now when i refresh it pushes out that new value of 0 so I want to pluck the new value off of this so new value and now that's 0 and when I go through here and click and click and click all the way down here it's returning that the active tab the number that I'm getting from that all right so now that can actually hook into that and load data based on that active tab so if I say person is active tab and switch map and I'm going to do that same of 0 Ajax call and this is going to call to HTTP local host 3,000 people and the ID is gonna come from up here because the tab is pushing the ID down so I can push or I can map or concatenate or append the the ID into that string for my Ajax call and I just want to make sure that I pluck the response and then I will have a person and my person can be put into here hit save and you'll see that this one was Yoda this one's Luke this one c-3po and on and on on so let's do the same thing where you can grab these properties off of the person I know I'm going to do a few streams off of this I'm going to share it right away I'll grab the name and that can be the person clock name I'll grab an image and that can be the person block image and I'm actually going to map this to because of the images on the server I'm going to map it to HTTP and local host 3000 and the image and then we can grab the alt text as well so this is name map the name to a string of image name alright so these three streams instead of person now we're going to have name we're gonna have image we're gonna have pulse and use name image and all inside of our template here name image and all right so now we have everything working together I'm clicking on these tabs and it's synching up the UI with the remote data content so it's making those requests the server you can see each of them being made as I click on them and loading in the appropriate person all right so you can kind of think of how you do that in your own way you can look at this streaming way of how these values get pushed down from these observables and you can you can see how these streams can provide these elegant solutions for these complex asynchronous problems especially when it comes to if I wanted to I could add in the catch and retry catch and retry behavior in here I could add in timers in here I could add in delays if things failed I could make it requests to other places there's a lot of great options here so for each of these demos if you want to take them take them home and play with play with them if you go to just rxjs I oh I was actually started with rxjs early enough to buy the dot io domain before anyone else did so I don't know if that's bragging rights or just a big nerd so each of these demos will be are available at rxjs IO and you can see you can see that the slides the the alarm system the retry behavior the tabs and another couple demos I put in here just for fun that I didn't have but I don't have time to get to is this is a are you still there scenario one where it detects if the user is still active on the page it checks for key presses and mouse moves and does a kind of a fake sign out if it detects that you're not there anymore and then finally the the demo that most everyone shows when they do an RX dance example is the search and search and return results I I don't know if this pages verify my online right now because this is trying to hit a remote server anyway if I was online I would return Yoda and anyone else's name started with yo and I can cancel that by by typing it by typing in while the request is going out I can cancel out go and requests and the surrounding text and things change as as the values inside of the input change and it's all built in to some some streams in here that that define those behaviors so thanks for watching hopefully that gave you the rxjs experience and you're able to see how it can and you can help you out with some complex scenarios that you that are actually fairly common if you feel so inclined come support us at a kadai Oh if you'd like to instruct make lessons with us come talk to me and other than that have a wonderful conference you [Music]

Channel: Vue Mastery

Views: 9,847

Keywords: vue, vuejs, vueconf, vueconfus, new orleans, vue mastery, john lindquist, vuerx

Id: _74d-NdeqOI

Length: 37min 32sec (2252 seconds)

Published: Fri Apr 20 2018