Using Feature Flags in Development

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 gotten into discord. So you can put some questions there and we'll to get them to you. But 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 are 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 looked up 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, do 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. I'm stoked to be here today. 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 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 on 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 all enjoy it, ask some good questions. We're here to help. But yeah, I'm 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 Days 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 days of Reactive Arts London. So that should be good. Loving all of the chat interaction. Right. Should we go? Should we do this? I think we should do this. Let's do this. All right. Let's do it.

Okay. 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 out at how feature flags can aid us with application delivery. We're going to be working with React on the front end, a 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 memory and eating up that lovely CPU. You can also use a note pad app for storing little credentials or just jotting down little details that we'll go over in the sessions after we cover our steps. Your IDE editor of choice, I'm going to be using VS Code. I'm feeling my most like pure, basic self today and that's my vibe.

We'll sign up for a quick launch Darkly trial account completely free, don't have to, no strings attached. 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? Okay, I'm seeing some nodding. Jason, nice. Yes. Summer. Cool. Okay. I think people generally know what feature flags are. Charles, Lucy. Nice. Alright, 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 get to deploy your code once with some potential routes 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 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, the idea here is that can almost look 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 what 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. Everyone ready in the chat? This is our projects. So, there'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 branch? 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, he 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 git commit, 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 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? No, just what you'll all walk away from here with too, 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 onto Discord 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 O5 Chill music. You can feel free to just 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 workshops so we can make sure we can get through all five steps.

So, I'll stop. Quick logistics question in the chat. Somebody asked if the recording will be shared afterwards. 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 3A you can take a pause. Jess is going to come back and explain a little bit more about what we're going to be covering 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. You know, I know about me I forget to like turn things off when you sign up for the LaunchDarkly trial, no credit card, there's no commitment afterwards or anything like that. So, if you end up not using it a couple 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'll 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 cost to you. So, after your verification, the best thing to do is, if you want to get your client site 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 LaunchDarkly 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 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 quite like, I'm just going to hit Command, I'm just gonna 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. So 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, I'm going to create a new project and that's going to spin up for me. Yep, 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 into test and I don't have to, if you see here Steph, you don't have to, um, 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 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 gonna 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 dialling with them. Got a one. I'm gonna take a one. Nice Jason, love that. Bjorn. Hey nice. Checkered flag. I think that's gonna be the theme we're gonna be racing ahead today. Alex. Aslan hey. Yes, Bjorn 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 gang? 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 first flag.

All right, now we obviously want to keep the vibes chill, but how about a little bit of pressure? Let's do a 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. Um, and if anybody's 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 gonna 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 very kindly joined me during their mornings. Really appreciate it. That's a copy right there. Oh yeah. How to set up the US flags in top toolbar.jsx Cool. We're getting into the fun stuff. All right, I'm gonna bring up some docs. This could 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, why, why am I looking this up every single time? And V's a funny one, right? Cause you have to name the environment variables a special way to pick them up. So we dropped some, a link in the read me to that in case you want to read up on it later. Cause it's a special kind of nuance.

So 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. Got it. So, okay. So, that, sorry, as part of step one, we'll be adding that. Apologies. So, yeah, step one, if you are initializing the SDK, and for that, you're going to 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. But then, yeah, step two will be when you actually create your flag. Or, if you want to skip to step two, 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, which branch we should have checked out? So, check out, you should first of all have step zero checked out. Right? Have I missed it? Main is step zero, sorry. Oh, sorry. Apologies. That was just getting set up. 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. So, as soon as you've finished the step, check out the next branch. Hm.

Okay. So, you're getting... Hey, Jason, I'm just looking at your error now. Plug it in... I just can't build a resolve entry. Let's react on... No luck. Okay, 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. You know, 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 in Node, maybe you'd need to update the version of Node. Or sometimes I've had some luck where you install the package directly, so install the React Dom instead of just running in NPM, and so just running in NPMI. Good call. Yeah, so right now I'm on Node 18.6. Jason, maybe you could just run a Node-18.3, okay. Yeah, mine installed okay without issue there. 15, okay. So not super Node version specific it looks like. I wonder if we can do a quick poll and see how folks are coming along on things just to see. 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. There's an apps feature. I'm not sure if I can do a poll actually. Okay. Can I get, 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. Okay, cool. So we've got Alexander Zilk one, Dylan's one, Charles just about at two, Slavoj Ross one, Christopher one, Josie just finished one, just about to start two. Okay, cool. So we're like a one, we're like a solid 1.5 at the moment. Okay. 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. And 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 can start to check out step three. You know, 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, you 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 okay, 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 timer, is that sound all right? As long as we don't put the Jeopardy music on, you know, I think we won't stress anybody out too much.

If we keep the low beats going, I think we'll be all right. I'll save it for the very end. This is like a quick... Yes, so we did try to put this 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 at 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 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 when you register the provider or later when you identify a user. So you can imagine a user starts as anonymous and then later becomes identified after they log in. So that user object takes things like a key, which is the user ID, 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.

Well, nice. Thank you. Welcome. Yeah, we're going to have some fun in step three with using that information to do some cool things. All right. So, 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're 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 off those features that we're going to be rolling out. 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 they're 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 completely...it's passed a couple of tests, but we're not at that sort of 100% stage, having the ability to be able to 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 it 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 that new view that we're going to roll out, a new sort of version of the UI for your application to adjust your dev team.

Peter, Alex, do you want to, have you got any kind of? Yeah, so the idea in this one of what we're trying to do is actually two parts. That's why it's step 3a and step 3b. The first one, what 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 3, because if you add this rule in step 2, there will be no new gallery because the new gallery is in step 3. So, make sure that you stash your changes, make sure you commit, move to step 3 when you're ready. And, the first one will just be enabling that gallery view for anybody who is part of that dev team. Within that dev team segment, what you're going to want to do is create a couple 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 like a couple of 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...or Jess is going to see three columns and I'm going to see four and we can give feedback about like how does it look and what we think about this in terms of the visual element. So, yeah, give that a try. Again, the easiest thing to do is just check out that branch, go through. We try 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 typically happens. 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...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 operational use cases and what you can get out of those sort of flagging stories. So let's get going. I'm just going to quickly throw this up here.

Okay. Jess, if you have a second, can you bring up the segment and launch darkly to show 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. Yeah. 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 it may say anonymous. You just you don't want you don't have to worry about actually them existing in that user list previously in order to add them to this segment. Now, 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, you may not see things. So just make sure you're here. 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 totally fine not to do that. What'll happen is when you add users, when you're going to use your eventual login screen, you're just going to use the name that you created, again, it's case sensitive. But you can ignore, but if it pops up and says, you can add this user, what that did is it just retrieved the default value from that main.jsx file that I had coded in there. So that is why I am on all your LaunchDarklys. 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 dropdown bar that'll 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 flag or now we're going to use the number value. So when you're creating flags, different options for the values that are going to get passed to your code. A lot of times people use Boolean as like just true or 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 variance in, we use, we can use a string. We can use a JSON object. We can also use a number. So just a, just a 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 a flag type. Okay. So in terms of like the new gallery, this is kind of what I'm working 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 throwing how many columns you've got in the chat is 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. We've got five. Nice one. Charles has got five. This is looking good. Oh gallery there. Ah, okay.

Cool. All right. So are you sort of like that step? Let's see, whereabouts are you. End of 3A. Cool. This sort of like image masonry step is that what you're, you're right Charles. You're getting the impression. I think that's kind of what I have for my section when I was getting through this book.

Just going to jump on to Discord, 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. 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. Cause 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 use effect. And then we're going to 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 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 it's worse that 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 launched darkly with the new user. That's how we're going to pull the information to know that our users have the, have the capability of seeing our new image gallery. If we don't have that, then basically what happens is the, we, we launch Darkly has no way of passing that true value of the new gallery to our, to our users. So would that use effect is, is how we're gathering the information, sharing it with launch darkly, and then sending it back. So if you add that to your, the function, my app, in the app dot JSX, that should work as long as you import your function. But if you have any questions, obviously keep, 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've put it in the prereq. So something for Jess, Peter, and I to make sure we include next time. This requires a minimum node version of 14, 8, 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. Oh no, they're done. I'm just going to jump into the information resection as well. Just to kind of give, show a little 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 we're passing the new gallery. How we're passing the new gallery. So we've got that Elves return here.

And we're using our flags here in line 96. And 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 listing for state changes on stateful object or, you know, 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 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, oh, we might have a incoming code example here. Hey! Code example's up there. But yeah, if you want to see it again, it's on your screen now. I know that font size is probably a little bit janky on 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 if we had a full studio behind us. Jason, thinking something may be darkly side. I did wrong. 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 won't pick up your flag value. Yeah, I learned that the hard way a lot the other day. So much frustration because I forgot to check that box. Jason, go check in the flag itself. There's a settings tab. And make sure that that client side SDK is checked. So if you hit into the flag and you go into settings, you should see that it's checked here. Nice, okay.

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? No. Interesting, so I'm still passing an undefined. So quick question from Charles there about if user in the segment dev teams serve 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 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 too? What did he say as Peter disappeared? End of 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 do you happen to still have the portal up? Yeah, the, um, the LaunchDarkly portal yeah. Yes, yeah, thanks. So the way that we set the targeting rules for a segment, right, is what we do is we go to the floor. So right, we've got the segment here. And then we do is so let's say we were 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 SDKs using the client side ID. You can do it at creation time too. 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 where 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.

Here. So you're putting that over into LaunchDarkly. Now, your code is greatly simplified here. That helped with how to check for that membership in a segment. Yeah, I did the same, but I see. Yes, 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. Maybe just to double check to see if you have it turned on as well.

Alright, I'm going to peek ahead into the next step of the workshop. Okay, who's on that sort of table? On that sort of to do list step of the up right now. And we have a couple cool pieces left, but I want to make sure we don't leave anybody behind too so There's, there's some cool nuggets left in the last couple steps here. It's pretty exciting. He said in a monotone voice.

Let's do a quick, so let's, 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. I'm going to kick off with, I mean, I think I'm at, okay, we've got four from Alexander finished four starting step five Valeriy. Nice. Okay, 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. Maybe that's our next coding project design a soundboard. Is anyone on the chat designed a soundboard, which will be pretty simple, right? Just a bunch of buttons. Okay, so we've got some fours and fives going at the moment. Shall we chat 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 to step five and finishing off our final steps in the workshop. So, I'm going to keep the vibes going with the soundtrack so that everyone's finishing that step four, getting into step five, but just for a bit of background here. As you've kind of seen so far, we've got our SDK configuration and we've been importing LaunchDark as a little bit of a dependency. We've been referencing the use flags within our function. 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 the Notch Darkly SDK. And that SDK then initializes and it kind of connects to our sort of flagged delivery network. You've got a sort of like FDM style service, runs almost like a sort of AWS style service. And that receives our initial flag rule payload. Then the flags and rules are stored 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. We've got our sort of client side, flags that kind of are really useful for obviously kind of changing your views, changing like augmenting your user interfaces. We also put together server side. We also have a server side SDK's, that can be used to kind of flag sort of at this sort of more of the edge of your server. In server side flags, all uses 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 circuit breaker sort of mechanism or you need to be able to pivot to sort of like a more sort of safe mode, that's super useful for those sort of scenarios. Peter and Alex, have you got any sort of 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 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. It doesn't have to be user, right? It could be a system. You take requests to a new route like on a API or to another data source, which is super powerful. Listen, 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 the 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 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 and all you'll need to do is add your LaunchDarkly SDK key to the Docker Compose.yaml file. This is a 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 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.

So, this is a bit more of the sort of like choose your own adventure part of the 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 or Alex or I like just a quick DM or message. You can just do that using the two 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 breakout room or we can kind of focus on anything that you really wanted to have a look at, you kind of thought was particularly interesting or troubling.

Yeah, so just so everybody knows, for step 3a, 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 3a.

All right. Hey, everybody. He is the vibe music gone. Or is it still here. Let me back up. As I was. I was digging it. Let's bring that back in. Does 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. And DJ jazzy Jess I think that has to be my name going forward now. How about that before. It was heard this one's we just want 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. We're going to jump into discord see how we get. See how we're going. Maybe we should do one final timer for countdown. Yeah, probably. Then just give us a chance to check in with everyone. Yeah, I'm going to tell you guys about a little look 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. And then 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 4,000. And let's say there's probably 2,000 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! 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 a little exclusive about it. Just because I was picking up people at the demo. I only allowed people with IE11 to use it. Things like that. Nice little version control going on there.

We're coming into the final few minutes. Thank you so much for everyone chilling with us. It's been a really good session. I hope you've had a lot of fun. I hope you've had a bit of fun with flags. You've gotten your feedback launched. You've played around with a bit of the functionality. And seen how it could work in your environment.

Peter, how are you doing? Are you on the call right now? I'm good. I'm right here. I'm just setting up. We're going to do a big reveal of what this should all look like at the end. We can 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. Hopefully, my screen share likes to work for me today. But we will see what happens. Shafi, why are you getting started? Thanks so much, Cyril. I really appreciate it. I can do it right now. I can at least go through the initial steps and then I'll do the server-side last, if you want me to share. Yeah, sounds good. I'll cull my share. I just wanted to get myself into a bit of a logistical nightmare. If anyone's got loads of tabs open, put 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. This will be a fun little test of my employment contract.

Okay. Are people seeing my screen here? Should see a bunch of flags. Cool. So, walking through 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, kind of 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 value is 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 login that we're going to need to do. So, that was just step one. Again, simple true, false, we had no toolbar, and now we have a toolbar, easy to test our code.

The next one that we wanted to do is we wanted 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 rule 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've 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 flying through this but I just want to make sure I'm showing it and feel free to interrupt me Alex to suggest if there's any questions that we want to try to answer.

So we had this, what 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 that are 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 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 needed to do is we needed 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 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 uh-oh, 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 had 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 uh-oh, like I don't actually want to have them go here, this is a no-go zone 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 server. So give me a second just to do the Darkroom post up. I will pause, take a breath there, see if anybody has any questions. I don't know if anything came through in the chat just while I'm setting this up. We didn't have, oh sorry. Go ahead. Oh, we didn't have any flagged questions. We were joking about Alex having the most number of tabs over on the screen. He's got 43 going. 43? I know that's ridiculous, isn't it? That's amazing. All right, I just gotta grab. This is a lot of growth for me because that number used to be a lot bigger. So I've worked hard on closing tabs down. Okay, give me one second just to go into my Docker compose and make sure that this will not fail for us. Okay. Here. Okay, cool. And we'll go back to our screen share again. Sorry for the delay with no cool beats.

All right. So what we did is that I am in that file. I created a Docker compose file. So for those of you who are familiar, Docker 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 will have to initiate the client. You'll have to initiate that server side client. So you'll have to have a listen 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. It's pointing towards localhost.

And so essentially what I have is this API flag. And what I'm doing is I have a 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. 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 Dolan 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 this all 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, like, 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 while 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 to build your own Node server and doing it that way, we gave you a nice little batch script to create a Postgres database so you don't have to go and do that. Nice. Thanks so much for joining us, everyone. We really appreciate it. I hope you take this... I'll just jump on. There you go, back with the gang. Yeah, I hope you... Loving the party emoji, Alexander, his, 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 taster workshop series. But I think that's all from us, right? Right gang, right team? That's, that's it. Cool. That's it. That's all. That's all, folks. Thanks so much for joining us, and see ya. Have a great rest of your days. Thank you all for the questions. Thank you. Thank you, folks. Bye.