Getting Started with Feature Flags - #1 LaunchDarkly Feature Flags

Key Takeaways

good Wednesday morning Beecher flags kind of allows us to beta-test parts of our system it's a technique where we hide parts of our system behind a feature flag and this allows us to roll out to a subset of our users in a gradual manner I am mvj and you are watching function [Music] [Music] this extra Wednesday episode of fun fun function is brought to you by launch directly which is a product that we're going to use when implementing feature flags in this video if you like what you see please do check them out and give them some love for supporting the show alright let's get started the first thing that we're going to do is to create a completely new app and app without feature flags that's the first thing that we're going to do right it's done let's see D into this thing and see if it works and p.m. start oh it's over here you know yeah yes it works excellent let's close that and close exit the development server as the name I used here implies we're going to create a playlist and by what a P by that is basically as an interface that at first used lists a bunch of hard-coded songs let's go alright let's open up app Jas let's get rid of this stuff here and instead just like a list of of of songs here like just Li and then title and one more title to add one title to title three lesser problem I only need to close this list that's it alright let me close this terminal and instead use the integrated terminal in Visual Studio code and let's do anything start to have a look at what our interface looks like after my my edits whoo that's a gorgeous in their face I'm a born designer all right so we want to change this to have some actual hard coded data so let's do in the constructor we're going to assign this state should be like some songs gonna code in some songs I'm actually not gonna code in some songs I've prepared this before I can you know kind of paste in some songs I wrote before so these are some songs that we added to this imaginary playlist here you see that some of them are already in the end of November and some of them are added at the start of December and we want to list them out so this dot state of song stops map and for each zone we are going to have an ally and we're going to display them like that whatever to do check this out this is not allowed before super that's correct I need to call the super before oh cool in doing anything else in classes because classes are annoying unexpected use of name now that's true what would name even be it's supposed to be somewhat named otherwise things would be weird magical all right cool we are now listing their songs next up I want to add some sorting right so I want to think about a problem that I had while I was working at Spotify we had I was not alone and working on the playlist that by any means but a playlist works its way it's it's a list of songs like it's kind of like the the the mental model for it is a mixtape if if you're that all of you remember mixtapes but the general idea is that you add songs and you can rearrange the list and like the list has a specific specific order and when you add something to a playlist just say add and then it will end up at the bottom however for some playlist this works fine if you like or if you're creating a playlist for like a gym or like some nice playlist to send to someone you care about that makes sense but if it's a playlist that is your dumping ground for new and interesting music that you want to want to listen to then it makes a ton more sense to just have the playlist always sorted by recently added and what that is what we're going to add here we're going to add some sorting to it let's just say sort order here and we're going to call a by default it's it's not going to have a sort order it's good that's going to be you know it's gonna be the natural order that that it's coming from the database our hard-coded array alright so what we're going to do is that we're going to before mapping we're going to sort using a sort of function and initially the sorter function is just going to be undefined so if you pass in undefined to sort it's not going to do any sorting okay prove it to you look only one strong stream a river it's not sorted we're going to get to this but before I do I want to do allow we have to fix a little caveat here because the sort function sorts in place this is because the creators of this function in JavaScript are our satan himself so we need to do a slice first this is a very nice way of just making a quick shallow copy of an array so this way we get a new like copy of this array and then we sort that and then we map it so that even though that this sort in place that won't matter because it's a copy all right so the sort order however however mmmmmm if the sort order equals equals equals with say added then we are going to assign sorter to be a function that compares added let's see how we do this I made some some handy notes on how to do this while I was rehearsing this so that you don't think that I'm pulling this out of my brain but or something like that so what we're gonna do is we're gonna do the parse data parse data parse a not added and we're going to compare that to date parse be added you think that this is just gonna parse them out as as a number like a UNIX timestamp or something but this makes them comparable oh I think that will work except that now we are reassigning sorter so let's make it into left instead sort order is not if I know that's true if this dot state dots were Tory that's what we're going for all right cool but nothing is ever signing itself to sort order we need to create some kind of button that does that so let's do that let's create a condom here not is called natural sorting and we are going to create one that is called time sorting on the worse than naming and we're going to do one click here and don't you assign thingamabobs here and you see a function and just going to do like this start set stapes and set that state to sort so order sort order I'm the best typist and we're not set it to add it awesome that might work time sorting I clicked it but nothing is happening let me pull up the inspector see if something happens this is just a warning that we don't care about this these purposes like to check out react here see what the sort order state is so react we can actually expect the state here which is really handy in the react Chrome extension it so it's successfully signing sort order added but nothing is happening when I click it what if I just inverse this year like yeah okay so this sorting is actually working I just flipped the thingy the other way and everything worked so this now is can actually do this as a constant for fun sort by like Const is newer cool you know what we could actually just change this to be a ternary expression to be honest so that we get a can do this as a Const let me rewrite this so the sorter if this state dot sort order is added then the it's gonna be is newer that is the sorter otherwise it's going to be undefined I think that this looks cooler I can remove this right okay this this could actually be one light you're wasting really valuable video time on this now yeah I know but refactoring just feels really good stop it stop it now fine right so this is a bit confusing because we can't see which one we clicked so let's let's add some some styling to it so yes I also wanted to so at it that I can reverse the order so sort order no and let's also add some style style equals the font weights know if the mmmmmm it's that this dot state dot sort order equals no then this should be bold otherwise it should be normal normal normal that work now that is bold let me steal that copy paste it - this thing and then if the sort order is added then it should also be bold so now this works Wow I have created sauteing can ask a question why aren't the div tags inside of the UL tag artistic freedom this is valid HTML oh well it's it's actually not valid at all [Music] there we go ah hi it looks worse all right so we have this app it can do a bunch of things it can can do sorting that's actually the only thing that can do but use your imagination and think of this like we have this app in production it's it's out there it's used by users and stuff it's slide and we discover or we postulate we think that maybe that this time sorting is actually a better default right now natural sort or area is the default but we should probably make recently added the default maybe hmm let's try it we won't try that and the way your app is set up now the way we do it is to just go in the code here and say sort order added and now natural natural sorting is no longer the default it's it's time it's time sorting that is it's the default now and we push that we deploy it that is how you deploy an app without feature flags simple enough