Real World Leaky Abstractions 1: Kubernetes, ng, and React

In this chat Huiqi and I give some concrete examples of leaky abstractions. In particular, we give examples in Kubernetes/Docker, Angular, and React in which the abstraction failed to hide the details of the implementation.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : let's talk about some concrete examples
00:04 : of leaky abstractions right oh yeah i
00:06 : can't work with
00:07 : a small list as well yeah yeah we talked
00:11 : about
00:11 : an example which was tcp tcp
00:14 : we talked about that example but i feel
00:16 : like that's not
00:18 : something that web developers nowadays
00:22 : like deal with on a day-to-day basis so
00:26 : i feel like we should give some concrete
00:28 : examples that
00:30 : more developers can relate to
00:33 : you know in their day-to-day job
00:36 : yeah i guess before going through the
00:38 : list i'm thinking uh about the example
00:41 : that i
00:41 : encountered yesterday which is yesterday
00:44 : i was trying to
00:45 : deploy a application
00:49 : uh to kubernetes so kubernetes like the
00:53 : idea is you just have those
00:54 : declaration files uh which
00:58 : are like yamo and then you just run some
01:01 : command line and you should just
01:02 : work so i have a declaration file i ran
01:05 : the command line
01:06 : and then so that's a like a nes js
01:09 : application it's like a very simple
01:11 : server so
01:12 : when you run it you will see like the
01:14 : log things
01:16 : the server is initiated successfully or
01:18 : whatever so i saw the log
01:21 : in my deployed application i saw all the
01:24 : logs it's exactly
01:25 : the same but when i pinned the server it
01:27 : just doesn't do anything
01:29 : it's like timeout so i feel like that's
01:32 : just an example of abstraction
01:34 : because i mean they make it looks really
01:36 : simple because it's like oh you just
01:38 : have the declaration files
01:40 : and then everything should just work but
01:42 : i don't think i know what's exactly
01:44 : happening under the hood i think it's
01:47 : pretty complicated
01:49 : but the thing is now there's this bug
01:52 : which is it looks
01:53 : everything looks okay i see all the logs
01:55 : but i can't figure out why
01:58 : when i paint it it doesn't do anything
02:00 : so now
02:01 : in order to debug it i have to
02:05 : somehow figure out what is happening
02:07 : under the
02:08 : one thing about what you said is uh
02:11 : and i think this is the case with all of
02:13 : these examples
02:14 : you hit the leaky abstraction when you
02:17 : have a problem
02:18 : that you're not able to solve right
02:22 : what does a there's a bug or there's a
02:25 : there's an issue what's going on i
02:28 : looked at
02:29 : all of the inputs and outputs of the
02:31 : systems
02:33 : and i don't get anything useful back
02:37 : i can't solve it with simply the
02:41 : inputs and outputs that are available in
02:44 : my system
02:45 : right and because of that the only way
02:48 : to solve the problem
02:49 : is to dig into the internals of the
02:52 : system itself
02:53 : right but then but then the the system
02:56 : has promised me that this is going to be
02:58 : simple
02:59 : i'm supposed to only need to know how to
03:02 : work the system
03:03 : not i'm not supposed to have to know
03:05 : about the internals but
03:06 : that that contract sort of has been
03:09 : broken
03:10 : this is a example of a
03:13 : production bug right and as you know
03:16 : production bugs are especially hard to
03:19 : fix
03:20 : a lot of companies make it difficult to
03:23 : they sort of lock down on the
03:24 : permissions uh
03:26 : in terms of accessing them in your
03:28 : company they
03:29 : do it maybe more than more than like a
03:33 : startup would
03:34 : right yes um the only specific people
03:37 : are allowed to access the server and
03:40 : even when you
03:40 : access it you only have limited access
03:43 : to the server that is correct um in
03:46 : smaller companies
03:47 : i think they do less of that but it's
03:50 : still a problem because
03:52 : that is different from your local
03:53 : environment there's a
03:55 : lot of things that you're just not able
03:57 : to do would you
03:58 : call that an abstraction well i think
04:01 : kubernetes
04:02 : is an abstraction yeah kubernetes is
04:04 : definitely an abstraction and docker
04:08 : kubernetes and docker their promise
04:12 : is that all of the production
04:15 : problems that you face will make it go
04:18 : away but clearly it didn't work this
04:20 : time
04:21 : yeah they did that's what i was saying
04:24 : um and with
04:25 : ci like if you do continuous integration
04:29 : and you run tests on push and stuff like
04:32 : that that's another case where that kind
04:34 : of thing
04:34 : can happen like your test broke why
04:38 : well i have less visibility over what
04:40 : happens in ci
04:42 : then then i do my logo well that
04:44 : happened to me too my tests
04:46 : run locally but just not right in the
04:49 : sea
04:50 : yeah i don't know if i would call that
04:53 : exactly
04:54 : a leaky abstraction because it's not
04:57 : necessarily somebody's trying to make it
05:00 : all easy
05:01 : for you you're just setting it up to run
05:04 : on a different computer
05:06 : now there are products and frameworks
05:09 : that gives you ci capability
05:12 : and those things might try to make it
05:15 : user friendly for you and
05:16 : thereby covering up some of the details
05:19 : so i can see that
05:20 : make it harder to diagnose maybe let's
05:23 : go
05:24 : through the list so the first one is use
05:27 : framework okay just using a framework
05:31 : and
05:32 : can you be more specific about maybe
05:34 : like a case where you had a bug
05:36 : like yeah for example when you use
05:38 : angular uh
05:39 : say when the html doesn't update
05:42 : and you don't know what's going on why
05:45 : it doesn't update because
05:47 : according to the docs let's say if you
05:49 : change
05:50 : this whatever it should update the html
05:54 : but when it doesn't you don't know
05:56 : what's going on
05:57 : because you don't know how angular
06:00 : has the mechanism to update the html
06:03 : under the hood
06:04 : yeah and now you're gonna read a lot of
06:08 : articles about change detection and
06:11 : and the internals of angular and all
06:14 : that stuff
06:15 : yeah angular expose some of the stuff
06:18 : like oh you can change the change
06:20 : detection whatever
06:21 : mode to whatever but that's not
06:25 : everything i think anything like well
06:27 : yeah
06:28 : a lot of cases those are the opposite
06:30 : problem which is
06:32 : it's updating too much it's like
06:35 : updating
06:36 : 500 times when i do this simple thing
06:40 : and you're like what what's going on and
06:42 : that's
06:43 : i haven't ever found a good way to
06:47 : explain some some of the cases when when
06:51 : when the weirdness happens i imagine a
06:55 : developer who's on the angular team who
06:58 : understand the internals they can
07:00 : probably diagnose that
07:02 : and come up with a good explanation but
07:04 : i couldn't
07:06 : right so that that's an example of a
07:08 : leaky abstraction
07:09 : so i don't know what is a good way to
07:11 : solve it let's defer that
07:13 : let's just complain and not so try to
07:16 : solve any problems for now
07:18 : so since you mentioned angular i'm gonna
07:21 : mention
07:21 : uh react so react has
07:24 : this special key prop
07:27 : that uh once once in a while you
07:30 : encounter
07:31 : like if you if you do like uh use
07:34 : use an array of objects to generate
07:39 : an array of elements for example
07:42 : usually you use array.map
07:46 : to loop through the array and generate
07:48 : an array of elements
07:50 : whether it's an array of option elements
07:52 : or an array of list item elements
07:55 : that kind of thing it'll usually give
07:57 : you a warning
07:58 : that hey you should probably provide the
08:00 : key prop
08:01 : right i remember that yeah yeah you'll
08:05 : remember that
08:05 : yeah you haven't done react in a while
08:07 : but you've done it but i still remember
08:09 : yeah yes they remember the summary is
08:13 : react wants you to give it a hint
08:17 : in order to make its rendering more
08:19 : efficient
08:21 : because the default behavior without you
08:25 : giving the hint
08:27 : uh causes a sort of sub optimal
08:30 : workload i guess in terms of what
08:33 : react has to do and in order to
08:36 : understand that
08:37 : you actually have have to understand how
08:40 : react works
08:41 : internally react has this
08:46 : virtual dom mechanism where
08:49 : every time it renders
08:52 : a page or a sub page it generates
08:56 : a virtual version of the dom
08:59 : um that that's that's just like the dom
09:03 : except it's not the real one it's just
09:05 : some data structures
09:06 : some arrays and objects nested
09:09 : like a dom would but it's not the real
09:12 : dumb but you just generate
09:13 : a whole representation of the dom
09:16 : and then the next time it renders it
09:19 : does that again
09:20 : so now you have two whole virtual
09:24 : representations of the dom and then
09:25 : there's a diff process
09:28 : that finds the differences between
09:31 : the two dom trees uh which i actually
09:35 : i'm kind of fascinated by that
09:37 : by that uh as you know because i talk
09:40 : about
09:40 : diff algorithms a lot right yeah um
09:44 : uh because it has to do with tracking
09:46 : time and
09:47 : stuff like that and i love that stuff
09:49 : but anyway the problem is when you have
09:51 : an
09:51 : array of elements of the same type
09:57 : if one of them gets deleted like you
10:00 : have
10:00 : you have let's say you have 10 option
10:03 : element
10:04 : and if the user did something and you
10:07 : deleted one of the option elements
10:09 : from the middle then what would happen
10:12 : is as react is doing the diff
10:16 : it'll say oh the first option still
10:20 : is the same as last time the second
10:22 : still the same as last time
10:23 : third still the same four still the same
10:26 : fifth one
10:27 : is not the same as last time because
10:30 : because the one that used to be the
10:33 : fifth one has been deleted now the fifth
10:35 : one is actually the sixth one
10:36 : last time right so but but it won't
10:40 : know that it's been deleted so it would
10:42 : say hey
10:43 : the fifth one doesn't look like the
10:45 : fifth one last time
10:47 : i'm i'm gonna refine all the props from
10:50 : the new version of the props for the
10:53 : fifth element
10:54 : i'm gonna move them over does that make
10:57 : sense
10:58 : yeah and then the sixth one is again
11:01 : different from the last time so i'll do
11:02 : a copy
11:03 : and then the seventh one i'll have to do
11:05 : a copy again so all of these ones
11:07 : you have to do a copy all the ones after
11:10 : the one that you removed
11:12 : whereas if it had a key then
11:15 : it'll be actually able to say oh this
11:17 : one's key
11:19 : is actually different from the one last
11:21 : time
11:23 : and then now i know that it's actually
11:25 : been removed
11:26 : so i'm not i'm not going to do the copy
11:28 : but i instead i'm going to move on
11:31 : okay so basically without the key you
11:34 : react is not able to discover there's a
11:38 : deletion
11:39 : yeah that's more or less it but but in
11:42 : interpretation
11:43 : it still works still incorrect in a
11:45 : sense
11:46 : that the fifth option element has
11:49 : changed now
11:50 : and then the sixth element has changed
11:51 : now a lot of option elements
11:53 : has changed now versus you if you
11:56 : interpret it
11:57 : as a deletion there's just one deletion
12:00 : uh less work to do
12:01 : and you react is trying to give you the
12:04 : illusion
12:04 : that things are easy right things are
12:07 : easy like
12:08 : you don't have to worry about uh how it
12:11 : works
12:12 : but at some point you do have to worry
12:14 : about it so that's a
12:15 : leaky abstraction however i do like how
12:18 : react deals with this as in they don't
12:21 : try
12:23 : very hard to close it off for you they
12:25 : give you good explanation
12:27 : about how this works well i guess my
12:30 : understanding of this example
12:32 : is if you want to use their abstraction
12:35 : without interfering
12:36 : say adding the key prop they're gonna
12:39 : give you a solution but
12:40 : it might not be the most optimal but
12:42 : they're still gonna solve the problem
12:44 : for you
12:45 : somehow but in order to optimize it
12:48 : you have to do some sort of uh
12:52 : close the gap yourself by providing a
12:54 : key
12:55 : so the default behavior is just like in
12:58 : sql if you do select start
13:00 : i mean that's very simple but it's not
13:02 : the most
13:03 : optimized so if you want to opt you have
13:05 : to
13:06 : do something yourself basically or
13:09 : provide a
13:09 : solution yeah performance is something
13:12 : we do
13:13 : later but the problem is when something
13:17 : is too slow to be practical then it is a
13:20 : problem
13:21 : you do have to worry about it but we say
13:24 : usually don't worry about it
13:26 : at the beginning when you're just trying
13:28 : to get it to work