in this setup the way we do it here we
have we are coupling roll out and deploy
together so the only way for us to roll
out a feature is to make a change and
deploy it a benefit of that is that it
is very very simple
however there are two problems with
having this coupling this hard coupling
between deploy and robot
the first one is team synchronization
and this is something that only happens
once you have multiple teams working in
your product so let’s say that the while
you are doing this like you are change
you want to change the default sort
order there’s another team that is also
working on you know whatever and they
are like that’s a pretty there’s feature
is pretty big it does quite a bit of
things and they are in the middle of the
development process and they want to
they are going to be ready on next week
or like on Friday and they are like
bunch of stuff on master that they don’t
they aren’t ready to release yet but
your thing you you want to get that out
now but due to the fact that the only
way that you can roll features out is by
deploying means that their thing is
going to be rolled out if you deploy so
this means that since these are coupled
it means that you are very hard very
very tied to the other teams which means
that you are going to be in order to
roll whenever you want to roll things
out you have to talk to other teams
which might be okay if you have one
other team even though they might delay
you like it’s still not a lot of talking
but if you have like ten teams this this
coupling really quickly becomes
incredibly hard to deal with but that is
if you have team synchronization it
really happens only like once your team
grows bigger the other Pro
no always happens and that is double
risk so suppose both of these things our
risky deployment is risky lots of things
can go wrong in the deployment
especially if you have a few manual
steps in your deployment like it’s it’s
it’s not something that you want to do
Friday evening like just before leaving
for the weekend it’s there are things
that can go wrong now the same thing
same thing goes for rollout like you can
might be that you have a bug in your new
feature and it breaks for some users and
you basically want to keep tabs and
where this thing happened like you might
just have made there’s a lot of things
that you can hold a lot of mistakes that
you could have made so since both of
these things are risky you really don’t
want to have to do them at at the same
time so a huge benefit with feature
Flags is that we can decouple these two
so we can first hide our feature behind
a feature flag then deploy it and once
deployment is okay we can start rolling
the feature out all right so let’s
implement this using lean generically
lovely dog Luke you do and you lunge no
please Oh clicker here for start trial
ah start the tutorial brilliant let’s
create a feature flag we need a name for
this feature flag which is like the
further the name of the functionality we
are testing and rolling out so let’s
call the playlists default sort thing
it’s added that’s a long one
set up your application
no js’ is not right javascript is right
bla credit file call in next to the HTML
next I had the following head to the
head and what this is not 1994 we don’t
use script tags what’s the call
Elly client we want to use NPM and web
pack and stuff come on load all right
where is it where is it where is it
where is it there LD client Jess Thanks
all right NPM I L decline chest install
a let’s see code code code LD clients
and initialize this we want this on
component dead mount I suppose let’s do
that mmm yeah Ella client that is
probably what we’re getting from NPM
package copy pasting this one here blah
blah blah blah blah blah blah there and
this is the you sir I think that this
this has to be an object with a key so
we’re just kind of like user IDs like we
use this later in order to roll out to
use the specific user we’re gonna I
think we’re gonna touch a little bit on
that later but for now we just gonna
hard code this abc123 that’s their user
ID this is our client ID and and and and
with the early client to look at that
think we need to listen to the ready
event so let’s do that well the client
on ready we’re going to do this on
long dark be ready Darlie ready door
door click Dalai Lama coolly
ready and we probably need to bind this
because classes are horrible thing
it’s to clear that and there we go and
we also need to we can need that
accessible in the class mmm like think
this is how you do it
variation and then we grab the ID that
we created earlier what did we create
like it’s called this this is what it’s
called this pull the variation from that
for now I’m just gonna console.log this
out hi I got the variation see where
we’re at
yeah I got it we have no implemented
listening for events of playlist evolved
added in the production environment so I
think it you wants me to actually run
this and we have to start start start
these textures start just to talk just
out just start to start to start it’s
starting we’re waiting for it come on
come on come on boom ok everything broke
now the client is not defined mmm no
that’s because I have it’s our property
on the class oh come on come on this is
just a warning we don’t care about that
hi I got the variation on the find damn
it why is it done fine did did it work
in the thing though it worked anything
great you receive the rent from your
flag but why is it undefined I missed
your dashboard click let me find this
what does this look like liar the
targeting of starting off surf falls it
should serve false I figured that this
should be false let me actually try to
turn tardy on Oh turn on this is cool
leave an optional comment but the thing
is like launch directly told me that
they they won’t push for like they’re
not really competing with other feature
flagging systems their big competitor is
people trying to build their own feature
flagging systems which is what we built
at Spotify that took two years it was
this ludicrous and it was like a team
building it turns out that even though
feature flagging systems are very simple
in its essential it’s basically just a
little database and then you storing
things there and you’re able to get
things from the database but there’s a
lot of new ones to it
such as this one turns out that you want
to know when somebody has turned a
feature flag on and turn it off you kind
of want to see the history of things you
kind of want to know if a feature flag
is still being used from the code all
kinds of little things so it’s like a
very simple essential problem and it
just poof explodes by all the little
things that you want the system to do so
I turned it it on initially in initial a
little bit cause I felt like it up
turning it on okay see I’m gonna refresh
the react app see if we get something hi
I got a variation on if I dammit dammit
dammit dammit dammit feature flags must
be marked available to the client-side
SDK so your feature play settings page
ha ha ha ha ha ha ha
lalala make this flag available to the
client as decoy
there we go save settings found it fresh
hi I got the variation true oh that was
dog it makes a lot of sense that
that’s not the default I suppose because
you don’t this you far from all your
feature flags that’s something that you
want to make available to our clients
you also have a lot of problems that
Spotify where people like analyze the
the code and found feature flags that
weren’t supposed to find and stuff like
that like hints of features that would
roll out or maybe not roll out ever so
yeah mix-a-lot sensor that’s the default
but a bit of a tricky trick trap that’s
what I’m looking for either way once we
have this fly this flag I want to set
this to the state so do you like this
top set States and the feature flags and
we want to set that separate anything
and we want to like do this default sort
thing is added all right pull that here
and put it there now it should load the
the flags and I’m gonna check this in
the react app to check this out yes
defaults on yes that is true
all right now we have to use this so
first of all I want to if the feature
flags are not loaded yet I want to
display a loading dialog that’s like a
common thing that you run into when you
start implementing feature flags you
find out that hmm okay things that we’re
synchronous are no longer synchronous
there’s a configuration that needs to be
loaded before my app is loaded and
that’s fine that’s just a way we we need
to do like you can do a lot of cool
things with launch starter like
bootstrap these things into the app to
make the things load faster but for now
we’re gonna like keep them synchronous
nor talking is very very fast anyway and
like even it’s let’s say that you’re
loading your your songs synchronously
that’s probably gonna take longer anyway
stop boom
if this dot state a blurbs feature flags
if they they are not then we just we’re
gonna
return that all right sort order now
here mmm this is a bit tricky because no
longer reflects it’s an
oversimplification of reality because
sort order it’s kind of like now instead
of being a state it’s now something that
is inferred from partly the selected
sort order in the interface and also the
default sort order which might also have
been loaded or not yet so I’m gonna
change this thing to be selected and
sort order also the selected sort order
here now when it’s selected there is no
such thing as the selected sort or to be
null which is what we previously used
for natural sorting now I’m gonna write
natural here otherwise things will get
mad so so so so so this one alright mmm
this is a bit messy let’s let’s just
begin here
dot default sorting is added if that is
true then we’re gonna check if we have a
selected sort or if if you don’t have a
selected sort order now this becomes
weird select the sort or is what we
check first so if you have a selected
sort order then all is well we’re just
gonna do this I think we’re just gonna
do this I think we also need to make
sorter here a variable so if we have a
if there is a selected sort order if if
the user has clicked that and if that is
added then we’re gonna do its newer
otherwise we’re going to do do a sorter
being undefined I think that this
ternary expression honestly is a bit
hard to read I think that we it’s better
to just use an if statement so if
selects order is added then sorter an
assign sorter to be it’s newer else if
then we’re going to assign sorter to be
undefined this is a lot longer but I
think that just if statements are very
simple and easy to follow and sometimes
it’s just in my opinion better to just
expand koteas be very simple and very
clear all right however if we don’t have
a selected sort order then we’re gonna
fall back to the defaults
and the default depends on the feature
flag so if this dot feature feature flag
dot no sorry this what state dot feature
flags and then pull that default sorting
out there then we are going to use
sorter is going to be its newer
otherwise it’s going to be undefined
we’re determining the state depending on
the selected sort order which as we
talked about before like that it’s the
that was previously sort order which was
as too simplistic view of reality right
now we want to do the actual comparison
which store that we’re using so if the
sorter is on the front then we’re going
to be using bold or and if the sorter is
the is newer sorter then we’re going to
be we want to bold this one so let’s see
if this works probably doesn’t bring
unexpected token this what first of all
this should be let okay that was it cool
alright cool now I think that everything
is working as expected honestly so here
as you see now natural is no longer the
default so if i refresh we have time as
as default so and i can still change
them now let’s go back to launch
directly and go to the future flags and
[Music]
default rule here is now true but so the
the feature is is rolled out and let me
just roll it back out
who’s back in I saved a changes over
here and now let’s refresh and now we’re
back to natural sorting as a default so
notice now that if this application had
been deployed live I would be able to
roll the roll the feature out and in at
will so deployments and roll out have
now been decouple and this is good
because it allows us to handle the risks
of both of these separately it’s also
good because it it also allows the
product owner to do the roll out
separately from other teams because
these are no longer a couple like we are
no longer all tied into this this
deployment thing above all we can all
deploy into master and once we are ready
we can do the roll out like the exact
minute that we want and it actually also
reduces risk in another way it allows us
to if we have some error in our feature
we are able to roll it back in just a
few seconds rather than having to do a
complete redeployment or overlap of
Jesus I can talk today of deployment of
our app ok but we still have a problem
here a huge risk