Transcription
I think we should. So if you want to interact, by the way, feel free to put some messages into the Zoom chat here. And we have all I don't mean to sound overconfident here, but we've all I think gone into Discord. So you can put some questions there and we'll be able to get them to you. Without further ado, this is kind of what we're going to be covering off today. We're going to have about an hour and a half or so. We're going to be getting started with some initial steps. We're going to be putting down a repo. We're going to be setting up our accounts, getting everything going. We're going to talk about flag targeting. I'm going to look at server side flags, the different sort of feature flag uses. Obviously, it's being launched out there with kind of flag nerds. So we're going to talk to you about all the different ways that these can be useful. But before we do that, let's meet the two brilliant people that I'm joined with on this call. I've got the pleasure of being joined. By Alex Hardman. Alex, you want to tell everyone about yourself? Everyone, Alex Hardman, I'm a technical marketing engineer with LaunchDarkly. And for a lot of years I worked in engineering at big companies like Liberty Mutual and Capital One. And when I wanted to spend more time teaching people how to build it with cool tools, I came over to LaunchDarkly to do technical marketing. So stoked to be here today. Like working on this workshop with Jess and Peter was a blast. And so I'm really excited to work you guys through it. Nice. Cheers, Alex. This is going to be really good. And I've seen kind of how I've worked on a couple of projects with Alex so far. And he's just really helped me just level up my engineering skills. So I'm sure he's going to be able to guide us through some excellent challenges today. And Peter is also in the call. Peter, do you want to introduce yourself to everyone? Yeah. Hey, everybody. I'm Peter McCarron. I am coming up on month one at LaunchDarkly. I am also a senior technical marketing engineer. So Alex's counterpart. Yeah, I actually spent the past five years over at HashiCorp. So some of you folks may be familiar with that. So I'm a little bit more familiar with the infrastructure world and starting to learn the application world a little bit more, which has been really fun and fantastic. And, yeah, this workshop was a blast to work on. Jess and Alex were incredibly helpful in trying to get this all together. So we're hoping that you'll enjoy it. Ask some good questions. We're here to help. But, yeah, really looking forward to it. Nice. And I will quickly tell you about myself. I'm Jess. Hi. I'm a developer advocate with LaunchDarkly. I love learning about technology. I love trying to make things, trying to break them, usually on purpose, hopefully. And when I'm not doing that, I'm quite passionate about DevOps. I've gotten really into DevOps since I've joined LaunchDarkly. And so I recently worked on DevOps Saves London and that was a blast. So if you were there, give us a little heads up in the chat and hopefully we'll be able to see you in person at the or virtually at the next kind of the actual kind of conference. Says of Reactive Arts London. That should be good. Loving all of the chat interaction. Right. Shall we go? Should we do this? I think we should do this. Let's do this. Let's do it. OK, so what we'll cover in this session. So in this workshop, we're going to take a quick look at a JavaScript project. We're going to be exploring feature flags and we're going to be looking at how feature flags can aid us with application delivery. It's not stuck. I'm going to be working with React on the front end node on the server side. Once that's up and running, we're going to look at how we can use flags to drive changes in the way that we alter how our application functions and roll out new features and functionality. I'm getting through this bit rather fast. I'm quite keen for us to get stuck in. So what you're going to need is you're going to need your browser of choice. Assume that's Chrome. If you also hate memory and like eating up that lovely CPU. You can also use a notepad app for just storing little credentials or just just jotting down like little details that will go over in the sessions after we kind of cover off our steps. Your IDE editor of choice. I'm going to be using BS code because I'm just feeling I'm feeling pretty like I'm feeling my most like. Pure basic self today. And that's that's my vibe. We'll sign up for a quick launch darkly trial account completely free. Don't have to. No strings attached. And a second stream will obviously be super handy for following along. So you can keep us jamming on the side of your window. Does anyone know what a feature flag is? Have you joined today? And you're just like, what are you talking about? OK, I'm seeing some nodding. Jason. Nice. Yes. Summer. Cool. OK. I think people generally know what feature flags are. Charles, Lucy. Nice. All right. So flags. We like to look at flags as almost like control points within your code that enable you to decouple the process of deploying your code from releasing it. It means that you get to deploy your code once with some built some potential roots built into your code and then you get to orchestrate releases in the ways that make the most sense for you and your team, your business, whatever you're wanting to execute with those sort of releases. But in the most kind of basic sense, that can look like an if else statement when we kind of get down into the structure of our code that can go on my image here. But the idea here is that that can almost look like a like an if else statement in your code. But the impact of that can be that we can turn certain features on for our developers and not impact the overall functionality of our end users are seeing. Our end users can just have their regular sort of application view. And when we're ready for those changes to be shipped into our final product, we can do that all within production using the power of feature flags. So I'm going to share a quick repo with you in the chat. And I'm going to hand over to Alex and Peter, and we're going to start going on to the first couple steps. We're going to pull down our code from our repository and we're going to open that up in our editor of choice. We're going to get going with the first couple steps. So let me bring up GitHub because I don't want to ruin. I'm trying not to shatter the illusion and bring down this presentation, but I might have to, unfortunately. All right. Everybody in the chat. This is our projects. So. It's going to be a little bit of mechanics to this. We're going to start off on. Are we going to be starting off on the project on step zero, is that right, Peter? Yeah. And so what you're going to want to do is you're going to want to clone this repo. And then you're going to want to run an NPM install just to get all our necessary dependencies in there. Thanks to Alex, you made sure that all the dependencies you will need throughout all the different branches are going to be available to you right at the beginning. And so what you're going to want to do is when you are ready, once you've signed up for your account or you have your LaunchDarkly account ready and you've gathered your client side SDK key, you're going to want to save that into an environment variable. But what you're also going to want to do is go to step one branch. And the idea is that as you're progressing throughout this workshop, what you should be doing is running a git commit. Alex put a nice little handy kind of guide in there. We're just going to store everything locally. You're not going to actually push anything to the repo. So you just commit it locally. And then you're going to check out to the next branch once you've completed it. Throughout the whole thing, if you have questions, feel free to ping us in the chat. If we need to, we can jump into a breakout room, take a look at your code and see what's going on. But really what you just want to remember is that as you're going through each step, make sure you git commit. And then you check out the next branch in order to move to the next step. The reason we have to do it this way is that there are certain kind of enhancements that we made throughout the application. And if you try to go to the next step without going and checking out the next branch, there's probably some code missing. And so it might get problematic for you trying to do the next step when a lot of the files may not exist yet. Alex, did you want to add anything there? No, just the I mean, what you'll all walk away from here with two is you'll have all these branches that Peter made for these different steps. And when you add and commit to your local, you're going to have those to go back to afterwards. So you can explore the app at different phases if you want to play around. I'm just going to jump on to this call to make sure that all of our friends over there have got the right links. And then in a moment, I'm just going to put back up. Someone said the vibes are immaculate. I just really appreciated that. So I'm going to put back on some of our chill music. You can feel free to just like back down the volume if you're not really into it. And I've got just a little timer up here that we'll use to just keep us honest and keep us on time for the workshop so we can make sure we can get through all five states steps. So quick logistics question in the chat. Somebody asked if the recording will be shared afterwards. Yeah, we'll reach out to a couple of the Git Nation team to find out when this is currently being recorded. So also for this first part, we're going to do your job is going to be to get through steps zero through step two. When you get to step three, you can take a pause. Just going to come back and explain a little bit more about what we're going to be covering in those ones. It's a little bit of a different use case. The real piece here is just to get you up and running and get your first flag turned on. And sometimes folks are a little cautious about signing up for trials and what have you. I know about me. I forget to turn things off when you sign up for the launch Darkly trial. No credit card. There's no commitment afterwards or anything like that. So if you end up not using it a couple of weeks, then you don't have to worry about it and it's gone. I think when you're doing the trial. So there's a question in the chat when you're doing the trial. If you can do a pro trial, I think that's just fine. Again, you don't have to sign up for it. You don't have to give a credit card that will just give you the most capabilities right out of the gate. I can't remember exactly what the differences are between starter and pro. But again, no costume. So after your verification, the best thing to do is if you want to you want to get your client side SDK key for your project. So usually I'll pause my screen for a quick second and just show you what that looks like. If anyone's on this step and you've already signed up for a launch Darkly account, just hit command K and that should bring up your spotlight search. And then you can start typing in copy and that will bring up your options for copying up your credentials for that for your project and environment. So I'm just going to reshare now. So say if I'm in this project here, this little demo project I like. I'm just going to hit command. I'm just going to make sure I'm on the window. Hit command K. Copy the SDK key for the environment. And you want the client side ID. And that's the next step that you do after you've got that trial account going. And then we're up to using that as an environment variable. I'll put that in the chat. Stephanie, just in case you didn't hear that. Yep. So when you sign up, you'll go straight into I think you'll go straight into a project. So if you click feature flags, you can create a new project. And that's going to spin up for me. Yeah. Pro tip from Peter, use your test environment, not your production environment, because as we all know, production has guardrails for very good reasons. So I'm in that now. I'm just going to go to test. And I don't have to if you see here, Steph, you don't have to. Yeah, exactly. After you sign up, you get your project so you don't actually have to create a flag right now. You'll just be right here. You'll be clicking on the flags section, but you don't have any flags. And then if you hit that command K, you end up here, copy the SDK key for your environment, toggle down the flight slider ID and you've got that. And that's your environment variable for your first section. Now, in a moment, I'm going to get going with a bit of a timer just to kind of keep us honest. How's everyone doing? Do you want to put some let us know in the chat? Yeah, feel free to call out if anybody's stuck on anything. That's why we're here to make sure we can help unstuck you. So if you are, let's say if you're at like sort of step one, can you give us a flag, like a little flag in the chat? It can be a flag of your choice. It could be a flag from where you are currently dialing. Got one going to take a one. Nice, Jason. Love that. Hey, nice checkered flag. I think that's going to be the theme. We're going to be racing ahead today. Alex. Aslan. Hey. Yes, you're on the pirate flag. Loving that. Love it. All right. Should I keep us honest now? I think if we're all getting into step one, should we do five more minutes going? What do you say? I think five more minutes should probably be good. Hopefully everybody's moving on to step two now and starting to build their build their first flag. All right. Now, we obviously want to keep the vibes chill, but how about a little bit of pressure? Timer. I'm just about to set one up now. So you'll see that in the top left of your screen if you are on the screen share. Timer. And if anybody is struggling, maybe just throw a hand raise up in there or throw something in the Discord chat or the Zoom chat, or you can just DM me or Peter. I'm going to leave that up as a bit of a hint of where we're going. Hey Dylan, we've got a US flag. Nice. What time is it where you are? Because Peter and Alex have very kindly joined me during their mornings. Really appreciate it. That's a coffee right there. Oh, yeah. How to set up the US flags in top toolbar.jsx. Cool. We're getting into the fun stuff. I'm going to bring up some docs. Let's help you out, Stephanie. One of the things that you can remember is that usually with React, when we're wanting to do a function within our files, we need to import that function first from somewhere. So we added an SDK. We probably need to import that function in order to make sure that it works. I relate to that, Jason. When I was prepping for this session, I kept getting the I know environment variables. I use them all the time. Why am I looking this up every single time? And it's a funny one, right? Because you have to name the environment variables a special way to pick them up. So we dropped some a link in the readme to that case. You want to read up on it later because it's a special kind of nuance thing. There was a question about using the async with the LD provider. And if I'm not mistaken, that is already included for you in the main.jsx. As part of step one, you'll be adding that. Apologies. You'll need to alter your main.jsx file with the async provider. We did add links to the doc, but we'll drop the block of code in the Zoom chat here in a second once we get to the one minute mark. You can do that too. Just save your local commit for where you are. Step two will have it already set up for you. Bjorn, on which branch we should have checked out? So check out, you should first have step zero checked out. Right? Main is step zero. Sorry. Step one was just initializing the SDK, which will be altering your main.jsx file. And then when you check out step two, that will have that async provider already in there for you. And then you're just adding your flag in order to enable our toolbar. Nice. As soon as you finish the step, check out the next branch. OK, so you're getting... Jason, I'm just looking at your error now. No luck. OK, let me just try that as well. I'm going to try that same step, Jason. I'm just going to delete my node modules. There's always that chance we could be hitting that moment where something's not working right for more than one of us. I'm hoping that's not the case. Oh, nice, Charles, you are there. Nice. Yeah, either a node, maybe you need to update the version of node or sometimes I've had some luck where you update or you install the package directly. So install the React DOM instead of just running an NPM and instead of just running an NPMI. Good call. Yeah, so right now I'm on node 18.6. Jason, maybe you could just run a node-18.3. OK. Yeah, mine installed OK without issue there. 16.5, 15. OK, so not super node version specific, it looks like. I wonder if we could do a quick poll and see how folks are coming along on things just to see. I know your timer ran out of time there, Jess, but I want to check and see how folks are doing. Great, let's do that. Let me bring up a quick poll. Is there an apps feature? Not sure if I can do a poll actually. Can I get a say in the chat, put which number step you're in just really quickly and we'll just get a bit of a gauge of where everyone is. Just throw in the number of steps you're in. So if you're like in step one, two. OK, cool. So we've got Alexander's one, Dylan's one, Charles just about at two, Slavros one, Antoine one, Xaver one. Josie just finished one, just about to start two. OK, cool. So we're like a one or like a solid one point five at the moment. OK, so let's should we try to team? How do we feel about like trying to get to step two within like by like 40 like yeah, 40 minutes past the hour. That's a bit too far. Also, the beauty of this workshop, just hats off to Alex on this one and Peter for just putting together this this great structure. But if you are if if you're chilling on the step two group, you can check out branch. You could start to check out step three. This workshop is designed so that you can you can run it on hard mode if you want to. If you're like a true like 100 percent completionist, have to get every side quest done, you can go straight for that hard mode. Yeah. And just to reiterate again for folks on step one, if you are having some some challenges with it and you want a hint, you can peer ahead to the repo for step two or you can just commit your local changes that you're doing right now. Check out step two and get your flag up and running. The only thing you'll just need to make sure you've done is that you've saved that SDK key in that environment variable that we that we told you to earlier. So if you've done that and you're hitting a wall in step one, something just doesn't seem to be working for you. And you just want to try getting a flag going. Feel free to check out the step two. You can always go back to your local commits on branch one. I feel like we're doing we're doing OK, but I'm just wondering whether or not should we introduce another bit of a timer on the screen. Let's have some drama again. Let's do it. Let's see if wherever you're at, you can get to the next step within that next five minutes. I'm going to quickly get up another time. As long as we don't put the Jeopardy music on, you know, we don't stress anybody out too much. We're not giving up. We keep the low beats going. Like, I think we'll be all right. I'll say that for the very end. Yes. So we did try to put this in the in the steps. But in case you missed it, when you're creating your flags for steps, basically two through four, you are going to have to make sure you check the box that says that you're using the client side SDK. If you don't check that, it won't pick up your flag values. So make sure that when you're creating those flags, there's a little checkbox in LaunchDarkly that when you create the flag down the bottom, it asks you about the mobile SDK and also client side. So just make sure that you go and check that. And if you happen to forget, that's fine. What is the the user object that's passed into async with LD provider used for? I'm not sure if that's covered in the README. Sorry if it is, but I'm just wondering, looking at the code here. Great question. So the user allows you to and you'll actually see this later in when we get into targeting a user. The user object that you can use either at when you register the provider or later when you identify a user. So you can imagine a user starts as anonymous and then later it becomes identified after they log in. So that user object takes things like a key, which is the user ID that look the unique identifier for the user. And it can also take a set of custom attributes, which is where it gets super powered, because you can use any data that you know about a user, geography, browser, anything like that to help target users and roll out features in a really granular, powerful way. Wow, nice. Thank you. Yeah, we're going to have some fun in step three with using that information to do some cool things. All right. OK, how are we doing, everyone? Is everyone on step? We're looking at like step three right now. I think by now we've everyone sort of roughly I think we've roughly. We've created a flag. Hopefully, if everybody's created a flag, you should be able to see a nice little menu bar at the top of your image gallery. So when you flip that on and off, you should see that on there. If you don't let us know. Cool. I'll quickly step through the kind of next bit of content that we're going to talk about, about targeting and about how we're going to toggle on and on those on and off, rather, those features that we're going to be. We're going to be rolling out in our in our next phase. So as you've kind of seen here, when we talked about what flags can do, flags are really useful for sort of feature entitlement. And it's really useful in that sort of scenario where, say, if you're working on a particular feature and it's potentially not fully ready, it's not it's not completely it's past a couple of tests. But when we're not at that sort of 100 percent stage, having the ability to be able to turn it, turn that feature on for just your dev team so they can kind of see that initial functionality, test that in your production environment without impacting any of your end users is super powerful. So that's kind of what we're going to have a look at right now. We're going to have a look at creating a small segment of users and those users are going to be your dev team. And we're going to have a look at stepping into enabling those that new view that we're going to roll out a new sort of you up version of the UI for your application to just your dev team. Peter, Alex, you want to, if you've got any kind of. So the idea in this one of what we're trying to do is is actually two parts. That's why it's step three A and step three B. The first one we're just going to do is create a universal rule where essentially we are going to target the members of our dev team to see our new image gallery. Right. So that's why you want to make sure you check out step three, because if you add this rule and step two, there will be no new gallery because the new gallery is in step three. So make sure that you stash your changes, make sure you commit, move to step three when you're ready. And the first one will just be enabling that gallery view for anybody who is going to who is part of that dev team. Within that dev team segment, what you're going to want to do is create a couple of users. So you could use our names. You could use your own name. You could use whoever you want. Create like three users, because the next thing we're going to do is show variations of that new gallery depending on the user. This is really powerful if you're trying to do like A B testing. So like, for instance, if I want to have a couple different people see different values and give me feedback on what the new layout looks like. You know, maybe because in this one we're going to try some different columns. So we want maybe Jess is going to see three columns and I'm going to see four and we can get feedback about like how does it look and what do we think about this in terms of the visual elements. So, yeah, give that a try. Again, the easiest thing to do is just check out that branch. Go through. We tried to add some comments in the code to give you some help. A couple of things that I'll say just right at the top. Make sure you import your functions. Also, make sure that your flags are turned on. Because one of the things that we run into sometimes is that you create the flag, you go through and then nothing changes. And it's because we just didn't turn on the value of the flag yet. And that that only happens. So and then ping us with any questions that you have. Excellent. Right. I'm going to get a timer up and I'm going to just jump into Discord to see how everyone's doing over there. And we're going to see how we can get and see how we go with the next couple of steps. And then we're going to talk about flagging the server side for more sort of like operational use cases and what you can get out of those sort of flagging slides. So let's get going. It's going to quickly throw this up here. Just. Hey, guys, if you have a second, can you bring up the segment and launch darkly to show like when you can add a new user? Yeah, of course. Let's do that now. Okay, so for adding for creating a segment. I'm going to create my dev team segment here. I'm going to just keep that as a standard segment and then I can add in my users. I'm going to just put in Jess, Alex and Peter in the team here. So you can either just hit enter or you can you can there's a little add button for the user when you type in the name, so it doesn't have to appear on that list beforehand. That's what I just wanted to let people know. Like it should say no users or may say anonymous. You just you don't want you don't have to worry about actually like them existing in that user list previously in order to add them to this segment. So the one thing I'll say is that it's going to be case sensitive when you do that. So if you type in Peter with lowercase p and you sign in as your user may not see things. So just make sure you're you're you're using that. Yeah, I'll call out one of the things that came in the chat. Basically, if you're using the step three file value, I used myself as a default user. You do not have to add me as a user to your dev team. That is that is totally fine not to do that. What will happen is when you add users it when you're going to use your eventual login screen, it's you're just going to use the name that you created against case sensitive, but you can ignore if it pops up and says you can add this user. Does that what that did is it just retrieved the default value from that main dot JSX file that I had coded in there. So that is why I am on all your launch. Please. This was coming from the discord, but I'll let people know here when we say create a boolean flag what we're talking about is the flag variation. So when you create a flag down at the bottom of your selection menu is going to have a drop down bar that will give you different types. So for the image gallery, we're just doing a boolean flag where we say true or false, but later for like the columns flag what we're going to do is we're going to actually add what's called a multivariate flagger. Now we're going to use the number value. So when you're creating flags, different options for the values that are going to pass to your code. A lot of times people use boolean as like just true false to enable different code blocks, which is what we're doing for this image gallery. But when we want to edit it later with different values or pass different variants and we use, we can use a string. We can use a JSON object. We can also use number. So just a just quick shout out there because I know there may be some questions about how do you create a boolean flag and really what it is is just the flag type. Okay, so in terms of like the new gallery, this is kind of what I'm rocking with at the moment. How does this look in terms of what you've got on your screens? Are you with me? How many columns have you got in front of you? Just throw in how many columns you've got in the chat as like a little like just like three, five, two, one. Whereabouts are you in terms of the number of columns you've got on your screen with the images? Got five. Nice one. Charles has got five. This is looking good. Oh, gallery there. Ah, OK, cool. All right. So are you sort of like a step. See whereabouts are you? And a 3A. Cool. This sort of like image masonry step. Is that what you're, you're right Charles. You get the impression. I think that's kind of what I had in my section when I was getting through this book. Just going to jump onto Discord and see how we're doing over there. Hey Peter, do you think you could grab Alexander's question about the use effect in app.jsx? Yes, sorry. No, I'm sorry. No, I was just, or I was grabbing somebody from Discord or we can switch up either way. Absolutely. Thanks for the heads up there. Yeah. So what we're doing is we're using use effect, which is the hooks method for being able to gather information. Let me pull up what that looks like for folks just so people don't get stuck because this one is a little bit is a little bit different. I totally understand why some folks may be thinking like I haven't used this before. But basically what we're doing, if you remember, we talked about that key previously that we were passing in with the async function. We're going to grab that key now when we make a change to the username and update that key depending on it. So I'm going to drop in a block of code here that you're going to want to put in your my app function in the app.jsx. So let's go ahead and add this. And so essentially what we're trying to do is we are using React State to be able to tell us when there's a change to the username field. When there's a change to the username field, we're going to call this function that we call LD client, which is the use LD client feature. So make sure you import that first, just like you have to import use flags up at the top of the file. And what this is doing is we're telling React that whenever you detect a change, once it exists, that's why we have that if function in there. When you detect the change to username, we want to run this LD function, which will then update launch darkly with the new user. That's how we're going to pull the information to know that our users have the capability of seeing our new image gallery. If we don't have that, then basically what happens is the use we launch darkly has no way of passing that true value of the new gallery to our users. So that use effect is how we're gathering the information, sharing it with launch darkly and then sending it back. So if you add that to your function, my app in the app.jsx, that should work as long as you import your function. But if you have any questions, obviously, keep poking at us. We're here to help. A quick quick thing that just came up from Discord that I didn't realize this before, we could have put it in the prereq. So something for just Peter and I to make sure we include next time. This requires a minimum node version of 14, 14, 18 or greater. So if you don't have that, you will want to if you're running into issues or errors, that's going to be why. So we'll make sure we update that for the next time. Nice. Thanks so much, Dylan, for spotting that. That's brilliant. That's great. I'll never done. I'm just going to jump into the information resection as well, just to kind of like give a look at the sort of imports that we've got going on in this section that stumped me. And if we go down here. How are passing the new gallery? So you've got the else return here. If you already explained it, Peter, sorry, you can cut me off. But just what Peter was putting in the chat here about use effect. And for those of you that aren't familiar with, we dropped a link to explain it in there. But effectively, use effect is listening for state changes on stateful object or things that are in the state store. And so to Peter's point, we listen to. So when you use use effect, you want to tell it the array of things that it's going to listen for changes on, in this case, username. And the last piece that that Peter put in there was you also only want to set that you only want to identify the user when you actually have a username. So by default, it's going to be empty or null. Right. And you don't want that. So you'll do an if block. We might have a incoming code example here. Hey, examples up there. But yeah, if you if you want to see it again, it's on me on your screen now. I know that font size is probably a little bit janky and everyone's screens. Let me know if that's not working for anyone. Nice one, Dylan, you just advanced to level one. This is where we'd have some animations going. We had a full studio behind us. Jason thinking something maybe darkly side. I did wrong. Oh, one of the other things to check is in your flag. Did you check that box for the client side SDK? If you don't do that, it will not it won't pick up your flag value. Yeah, I I learned that the hard way a lot the other day. So much frustration because I forgot to check that box. Jason, go go check. Go check in the flag itself. There's a settings tab and make sure that that client side SDK is is checked. So if you head into the flag and you go into settings, you should see that's checked here. Nice. OK. Are you currently in the test environment? Test environment should be fine. Jason, are you seeing any other errors when in your log other than undefined for the user? Interesting, so I'm still passing an undefined. So quick question from Charles there about if user in the segment dev team served true. So you don't actually. So this is a really cool part about LaunchDarkly is you don't have to put any of that conditional logic. So the the SDK does that evaluation for you. And so what it's going to do is send that user data in and determine or pull that user data into the SDK to determine whether they're in the correct segment or whether they match for this feature. Peter, can you grab Charles for that breakout room to. He says as Peter disappeared. Into the night. Alexander, so the way to check if it works with a segment is just or actually I'm happy to share again. Do you happen to still have the portal up? Yeah. The. The LaunchDarkly portal. Yeah. Yes. Yeah. Thanks. So. And so the way that we set the targeting rules for a segment is what we do is we go to the. So, right. We've got the segment here. And then we do is. So let's say we're to create a flag. And so, yeah, right. Yeah. This is like new gallery or something. Oh, yeah. Perfect. We'll just call a new flag. And then. So, right. Remember to set the SDK is using the client side ID. You can do it at creation time to. OK. Super helpful comment. And then. So now this is target users who match these rules. So this is how you're going to target users in a segment. And so let's see. So if you'll note the place where Jess is now with that blue highlight is perfect. Right. User is in segment. And this will allow the SDK to do that evaluation for you. So you don't have any like traditionally we've had to write that logic into our apps. We're like, oh, does the user have this role or that role or do they have this preference? No. Here. So you're putting that over into LaunchDarkly. Now your code is greatly simplified here. Does that help with how to check for that membership in a segment? Yeah, I did the same, but I see. Yes. So Alexander, one other thing to check is right now you can see that on Jess's screen. See how the flag is off. So what happens is when it's off, it doesn't matter who is targeted. It's always it's always going to serve the off variation. So to do this, to do the segment check, we have to turn the flag on, review and save. And this is a thing we kind of bumped into as we were building the demo and then testing it. We also stumbled across this. All right, I'm going to peek ahead into the next step of the workshop. All right. OK. Who's on that sort of to do list step of the. I'm thinking right now. We have a couple of cool pieces left, but I want to make sure we don't leave anybody behind, too. So. There's a there's some cool nuggets left in the last couple of steps here. It's pretty exciting. He said in a monotone voice. Let's do a quick. So let's see how we're all doing. Everyone can just put your step, which step you're in in the workshop in the chat. Let's see. I'm going to kick off with I mean, I think I'm at. OK, we've got four from Alexander finished for starting step five. Bell area. Nice. OK, brilliant. We've got some people going in there. I think I'm at four at the moment. This is where I wish I had a soundboard to go. Oh, we do need that for next. Yeah, we do. And that's our next coding project. Design a soundboard. Is anyone on the chat designed a soundboard? It's pretty simple, right? Just a bunch of buttons. OK, so we've got some fours and fives going at the moment. So we talk about server side flags. How are we feeling? I can give you a quick preview and then we can kind of. Talk about. What we can use server side flags for. Let me just kind of run through some of this, this work here and then maybe we can just spend the rest of the time getting through step five and finishing off our kind of final steps in the workshop. So I'm going to keep the I'm going to keep the vibes going with the with the soundtrack so that everyone's finishing that step four, getting into step five. But just for a bit of background here. You've kind of seen. So far, we've got our SDK configuration and we've been importing launch that goes a little bit of a. As a dependency. We've been referencing the use flags within our function. And this is kind of how our flags evaluating in JSX. The sort of lifecycle of a flag roughly is our application starts up and it calls in which darkly SDK and that SDK then initialises and it kind of connects to a sort of flagged through network. You've got a sort of like FDM style service runs. Like almost like a sort of AWS style service and that receives our initial flag will payload the flags and rules are stout. They're stored in cache and they're stored in your in memory caching. And then finally, the flag sort of updates and you get that updated for you or a user. And that's kind of what that looks like in terms of those firing connections. Now, as you might have seen so far, if you've peaked ahead at step five, we do actually have two different types of flags and our sort of client side types of kind of are really useful for obviously kind of changing your views, change like augmenting your user interfaces. We also put together server side SDKs that can be used to kind of flag at the sort of more at the edge of your server. In server side flags, all users and rules in the current environment are evaluated. So it's kind of less like that sort of client side device specific situation. And server side flags are super useful for. So if you want to install a like a circuit breaker sort of mechanism or you need to be able to pivot to sort of like a more sort of safe mode, they're super useful for those sort of scenarios. Peter and Alex, have you got any sort of like server side nuggets you want to drop to the group right now? Yeah, you know, so like one of the things we talk a lot about is that when you're switching between APIs, you're switching, you know, a lot of folks, depending on what you work on and where you may need to migrate between databases from time to time. And so those are often, at least in my experience, those have tended to be really painful. But on the server side, you can take and make those things configurable so that you can just like you were doing targeting on the front end, you could target where API requests are routed to based on user information or user and doesn't have to be user right via system. And so you could take requests to a new route, like on a API or to another data source, which is super powerful. So to get a sense of this, we're going to finally, I think if you're around step five, you're going to be getting familiar with these sort of server side flags. So we've got sort of, as we're kind of coming to the end of our session, we've got sort of a three level levels of complexity that you can kind of take this step on, you can take on with this step. So you can just create the flag. If you've got Docker installed, we kind of recommend you go for this one if you're kind of stuck for time. All you need to do is add your launch docker SDK key to the Docker Compose YAML file. This is the most kind of straightforward option. We're using Docker to do a lot of the heavy lifting, but we've also kind of provided you with a bit of a template here. If you don't really want to use Docker and you want to go a little bit more sort of unguided. And then finally, I mean, you've also got the option to build your own database if you don't really want to go with that Postgres route. This is a bit more of a sort of like choose your own adventure part of the journey. As we're coming to the end, I just wanted to just do a quick final check to see if are we all at step five now. How are we feeling? If we're all at step five, just feel free to just send me like a quick or send Peter, Alex or I like just a quick DM or message. You can just do that using the to function and kind of scroll down and select one of our names. If you're stuck on a particular section or if you want to kind of go into a bit more detail around one particular step, we can pause there. We can jump out into a break breakout room and we can kind of focus on anything that you really wanted to have a look at. You kind of thought was interesting or troubling. Yes. Just so everybody knows for step three, I'm working with Jason in a breakout room. If anybody wants to raise their hand and join us, if you're having some issues, we can definitely do that as well. Jason, I'll be re-adding you to that breakout room. But give me a second. But, yeah, feel free to pull a hand up and I'm happy to add you to that room if you're having trouble with step three. Is the vibe music on? Or is it still here? Oh, it might have been me. Let me back up. I was digging it. Let's bring that back in. Has anyone got any requests when we're getting into the final part? If anyone on step five has got like a request for a particular song? DJ Jazzy Jess, I think that has to be my name going forward now. How have I not thought of that before? I think we've heard this one. I'm just going to see. Let's do Bass Night. Oh, wait a minute. There we go. All right, we're getting into the final stretch now. We're getting to the final leg. I feel like most people are going to be on that step five section. So we're going to jump into Discord, see how we're going. Maybe we should do one final time for a countdown. Yeah, probably. Then just give us a chance to check in with everyone. I'm going to tell you guys about a little kind of a fun demo I did recently using server side flags. I dropped a link to it in the in the chat. And don't let it distract you right now. But it's just for fun. I made an emoji splainer bot. And so you send it an emoji and it tells you back. Version one of the service tells you what the name of the emoji is. And lots of people have questions about like a lot of people don't know the names of certain emojis. And the other the second version of the service, which I eventually like through the demo kind of bring everybody into explains how to use an emoji or how to use each of the emoji. And now it does. It only has a catalog of about 4000. And let's say there's probably 2000 that are actually good explanations. There's some fun Easter eggs in there. But I think one of the interesting things is a lot of times people see feature flags and they think about they think about front end. And what's really cool about this example was I made a website out of it and I made it so as a bot you could text with as well. Oh, nice. Yeah. And clearly I'm not in your phone. So where those feature flags live way on the back end. So based on information about what your phone number was, right. I put folks into different segments with that. Or when you're in the browser, I didn't buy different devices like I deliberately didn't. Let's say I opted for Mac devices. You know, I was I was a little exclusive about it. I just I was picking up people at the demo. I only allowed people with IE 11 to use it. Things like that. Nice little version control going on there. OK, we're coming into the final few minutes. Thank you so much for everyone for like chilling with us. It's been a really good session. We hope you've had a lot of fun to like. I hope you've had a bit of fun with flags. And you've kind of gotten your feet wet with launch darkly kind of played around with a couple of the function, the functionality and kind of seen how it could work in your environment. Peter, how you doing? Are you on the call right now? I'm good. I'm right here. I'm just setting up if we're going to do a big reveal of what this should all look like at the end. You could do the final curtain, I think. Let me set it up so nobody has to see how many ungodly amount of tabs I have open. And hopefully my my screen share likes to work for me today. But we will we will see what happens. Should be. I mean, why are you getting started? I wonder what I'll think so much. I really appreciate that. Yeah, I can. I can do it right now. I at least go through the initial steps and then I'll do the server side last. If you want me to share. Yes, that's good. OK, I'll kill my share. And I don't know. I just wanted to get myself into a bit of logistical nightmare. So if anyone's got loads of tabs open, how many tabs you've got open in the chat? And as a thank you for staying with us towards the end, I'm going to see if we can try and get you some sort of swag. Let's find out how this works. See if I end up losing my job in the process. It's going to be a fun little test of my employment contract. OK. Are people seeing my screen here? Should see a bunch of flags. Cool. So walking through this, this, this whole step. So if you want to see what this all looks like at the end, when you first initialized your application, you should have seen something like this, just a whole bunch of images out and about. And the first flag, if you remember, we did was we wanted to add a toolbar. So what I did is I created this toolbar flag and essentially the default values that it's serving to false. And so we needed to update our code to be able to change that. When we turn our flag on here, we're doing it in test. So I don't have to leave comments or anything or any approvals. Now we have this LaunchDarkly toolbar enabled and this is going to enable a lot of the functionality. A couple of things. We'll have a menu bar up here as well as a log in that we're going to need to do. So that was just step one. Again, simple truth balls. We had no toolbar and now we have a toolbar. Easy to test our code. The next one that we want to do is we want to check this idea of this new gallery. And essentially what we want and ignore the underscore here on mine. It's supposed to be camel case. I was not used to doing it that way, but I fixed it. But basically, this new gallery had its targeting role in it. And what we wanted to do is we wanted to say we only wanted our dev team segment to be able to see everything. So otherwise we should be returning false. So you'll notice that nothing has actually changed on this when I enabled the flag. And that was by design. We want that to happen. So what I got to do instead is I need to log in as a user who has the targeting rules enabled. And Peter was part of my dev team. And so now we see this new image gallery, but maybe we're not crazy about it. Maybe we have other dev team folks that want to see something different. And what we can do is we can actually do different targeting rules. So when we created that columns flag, so we will go back over here. I know I'm kind of flying through this, but I just want to make sure I'm showing it and feel free to interrupt me. Alex suggested there's any questions that we want to try to answer. So we have this multiple we call a multivariate flag. And so multivariate flag is returning a series of numbers depending on the user. So we have a default of two. We have Peter who obviously we saw like those three. We have four for Alex, five for Cody. And then our default rule is to serve two. So if you're saying, well, wait a minute, you logged in as Peter. Why are you not seeing three columns? Because that's what you should be seeing. The reason is because I haven't actually turned this flag on yet. So the default values and serving two columns in the new gallery. So when I turn this on and I review and I save this again, we don't need to comment because we're in our test environment. You now see I have my three flags enabled. And so what we're doing is that we're changing a dynamic value of the number of columns based on the user. So this is really helpful for when we're doing multiple designers or multiple folks who are testing different things. So if I log in as Alex, Alex now sees four columns so we can decide which one we like best. We can vote on it and then we can enable that. We can enable the next app or roll it out to everybody or do a percentage rollout to some of our users. The next one that we did is we wanted to have this to do list enabled. So right now our menu doesn't do anything. If we click on the menu button here, nothing happens. That is by design because what we need to do is we need to create this to do list flag to enable a new component in our code. So one of the great things about React that we all know is I can pass in new components as different pieces and I can use flags to control when that when that component gets passed to my main application. And so now you'll notice that I actually have this to do list that shows up on the nav bar on the side here and I open this up. And then if I click the to do list, something's broken again. So all we did is we just created the pathway to this new component. But one of the great things about LaunchDarkly is that it's not just for front end development. We can do back end development, too, because maybe we have the design for this component ready, but we didn't want to actually turn it on yet. And so if somebody clicked on it, they said, oh, like I don't actually want to have them go here. This is no goes on just yet because things aren't working. So we can actually enable it to have if it returns an error. And so the next thing we need to do is we need to go create the we need to go create the the server. So give me a second just to do the doctor compose up. I will pause, take a breath there, see if anybody has any questions. I don't know if anything came through on the chat just while I'm setting this up. We didn't have. Oh, sorry. Go ahead. Oh, we didn't have any questions. We were joking about Alex having the most number of tabs on the screen. He's got 43 going. I know that's ridiculous, isn't it? It's amazing. All right. I just got a lot of growth for me because that number used to be a lot bigger. So I've worked hard on closing tabs down. OK, give me one second just to go into my doctor, compose and make sure that this will not fail for us. OK. Here. OK, cool. I will go back to our screen share again. Sorry for that delay with no no cool beats. All right. So what we did is that I am in that file. I created a doctor compose file file. So for those of you who are familiar, Dr. Compose is great. If you're trying to test out just a couple of containerized applications, essentially what the file that's in there, if you want to give this a shot yourself, there's a commented out environment variable where you need to add your server side SDK key in order for this to work. Basically, it's pre-coded where the flags values are already in there. If you want to build it yourself, you can use the template that we have in there. A couple of things that you will have to do is you have to initiate the you'll have to initiate the server side client. So you'll have to have a list in for Dolan Starkly. There's some documentation on how to do that. And then the other thing that you'll have to do is just make sure that you create a Postgres database that you're hooked up to and it's pointing towards local host. And so essentially what I have is this API flag. And what I'm doing is I have it just it's just a true false flag. The reason this is great from a server perspective is this allows me to turn on the API when I want to be able to use it. So we've done our testing. We feel really good about it. We want to enable it for everybody. We can review and save the changes. Now, fingers crossed, when we go to this to do page, we now have the launch Starkly to do page and I can keep track of my daily tasks. We have our React advanced workshop. And we can add our to do. And now you see we have it to our to do list. And now that we've completed our React workshop, we can check it off our list. So that's the way it works. And again, we can turn on the flag for the API on the server as opposed to just the front end side. So that's why this is a full stack tool. You don't need to use it just for front end. But thank you all for bearing with me. I kind of flew through that. I hope you all give this a shot. The repo obviously is live for you to try this. And if you want to try building your own node server and doing it that way, we gave you a nice little script to create a Postgres database. So you don't have to go and do that. Nice. Thanks so much for joining us, everyone. Really appreciate it. I hope you take this. Just jump on. There you go. Back, back with the gang. Yeah, I hope you love in the party emoji, Alexander. Here's Jason. Really appreciate you joining in. MVP of the chat right there. Thanks so much for joining us, everyone. We're going to see you next week for when React advanced actually kicks off. I think this is like in our sort of taste of workshop series. But I think that's all from us. Right. Right. Right. That's that's that's all. That's all. Thanks so much for joining us and see you. Have a great rest of your days. Thank you for the questions. Thank you. Bye. Nice work, folks.
