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
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
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