Seeing Code As Fractals

I show Huiqi an interesting performance bug and the interesting way I visualized the execution of the code to understand the problem.

Transcript

The following transcript was automatically generated by an algorithm.

00:02 : i'm probably not going to show you the
00:03 : bug
00:05 : it takes too long to reproduce because
00:08 : it is a very
00:09 : bad performance bug so it's going to be
00:12 : slow
00:13 : but i can show you in the context of
00:15 : this the variables panel at one point
00:18 : this was not a scroll panel and when i
00:20 : added a scroll panel for this
00:23 : variables panel
00:25 : it made the whole thing extremely slow
00:28 : like just the start up of the app was
00:30 : very very slow
00:32 : um i wanted to do mike daniel levy's
00:35 : random sample bass technique but but i
00:40 : there wasn't a
00:41 : ready way to do it because that way
00:44 : requires this control c
00:46 : to exit out of the app
00:48 : but that doesn't work now because i have
00:51 : taken over the keyboard
00:55 : so i could maybe do some tweaking to get
00:59 : that to work but um
01:01 : i decided to go a different route so
01:04 : um so what i did was i after i recreated
01:07 : the history file like this history file
01:11 : remember i had this c code
01:13 : dot pi
01:15 : that will print a timeline of the entire
01:17 : program
01:19 : uh yes
01:21 : i did it for the fibonacci right
01:24 : so yeah so so basically i i did that and
01:27 : i spit it out into a text file
01:30 : okay so so i i did i did this
01:33 : c code script to generate the timeline
01:36 : and the timeline looks like this
01:39 : um so this this is the module loader
01:42 : python module loader so i can search for
01:45 : render all which is my render function
01:48 : for example
01:50 : and and now i can see okay on on step
01:54 : 63930
01:57 : we started the render all function
02:00 : right and it's going through these
02:02 : things
02:03 : um
02:04 : and then i compared like what is the
02:06 : timeline like with the scroll
02:10 : widget on versus without the scroll
02:12 : widget on which is this one
02:15 : so
02:16 : uh the first thing i found was that
02:20 : the one
02:21 : the history file without this and this
02:23 : was just starting up the app and letting
02:26 : it render that's all i did
02:28 : with with both of these
02:31 : so the one without scroll bar
02:34 : has like just under
02:36 : 500k
02:38 : lines of python code executed the one
02:42 : with a scroll bar has
02:45 : uh
02:46 : 2 million
02:48 : that's 2 million uh which is about four
02:51 : times as much
02:54 : um so
02:55 : i said okay why is that um i tried
02:58 : looking through it but this is a lot of
03:00 : lines to look through
03:02 : i i tried diffing them i just used the
03:05 : div command on the command line
03:08 : and um
03:09 : two things that help
03:12 : when you're looking through this amount
03:13 : of data you shrink the font size
03:17 : by a lot
03:20 : and then and then you can use this
03:22 : scroll bar here
03:23 : and one thing i saw was these
03:26 : amazingly deep
03:28 : nesting these
03:30 : oh okay these great coastlines i call
03:34 : them
03:36 : like these are amazing coastlines and i
03:38 : saw this in the dip like if you look at
03:40 : the coastlines they like the codes are
03:43 : like same sets of code it does that mean
03:45 : it seems like a recursion or something
03:47 : yes yes exactly
03:50 : yeah that's a good your spider sense is
03:53 : tingling that's good yeah so yeah you
03:55 : can you can kind of sense this is
03:57 : recursion because the line of code is
04:00 : kind of repeating over and over same
04:03 : lines of code repeating
04:05 : yes that's definitely a sign that this
04:07 : is recursion so this is the diff and
04:09 : this is
04:11 : uh so this should represent something
04:14 : that exists
04:15 : in the scroll version that does not
04:18 : exist in the non-scroll version right so
04:20 : i go back to
04:22 : the scroll version
04:24 : like an overview of
04:26 : where these things are going and at some
04:28 : point the coastlines get kind of out of
04:31 : hand like here
04:33 : yeah
04:34 : like here yeah it's it's really out of
04:36 : hand it's like wow i mean that's a lot
04:38 : of levels of nesting over here
04:41 : this almost looks like a graph which is
04:43 : uh very cool right when you think like
04:46 : it's a visual
04:48 : representation of the code execution
04:52 : yeah um which i i
04:55 : this could be a very important concept
04:58 : because
05:00 : i feel that a lot of the work to try to
05:03 : improve programming itself
05:06 : are done to make the code
05:09 : look better
05:11 : because the code is what we see
05:13 : what we don't see is this right
05:16 : so i'm wondering if
05:18 : people see pictures like this one or
05:22 : maybe there are other rep visual
05:24 : representations too but but i think this
05:26 : is a good one to focus on
05:29 : by itself um
05:30 : if people see pictures like this
05:33 : as as a
05:35 : regular day-to-day occurrence you know
05:39 : um
05:40 : how would they treat the code and how
05:42 : would they think about
05:44 : how to improve their tools etc
05:48 : i think that's a very interesting
05:50 : thought to dig into even people less
05:54 : likely to write recursion because once
05:56 : you write a recursion it's going to
05:58 : somehow look like this
06:01 : well the thing is should it make you
06:05 : should it make you avoid recursion
06:07 : though
06:08 : when when you hit against an obstacle
06:11 : you always have the choice of
06:14 : understanding it better so that you can
06:17 : control it
06:18 : or avoiding it
06:20 : that's right and
06:22 : what i would like to get people to do is
06:25 : actually to understanding it better and
06:27 : being able to control it that's true so
06:30 : i i i have written some recursive code
06:34 : that have
06:34 : gone wrong very wrong right
06:38 : so i could choose to uh okay maybe i
06:40 : should stop writing recur
06:42 : recursive code or actually try to solve
06:45 : this problem in that's true
06:48 : i just copied the code here
06:51 : and i searched my source code to see
06:54 : which line it was in my source code and
06:56 : it was this line
06:59 : okay
07:01 : oh oh by the way this is the s string
07:03 : which you helped me with uh
07:06 : and and the s string is actually a
07:09 : like a fundamental building block in
07:11 : this ui framework now
07:14 : it's been extremely helpful but it has
07:17 : also brought me this problem so
07:19 : so there is that
07:21 : but actually we we kind of argued about
07:23 : where to whether to do this in a
07:25 : recursive way and and i argue that we
07:28 : should do it a recursive way so
07:31 : so i modified it to do that
07:34 : now oh it's because land is calling land
07:37 : it's itself
07:40 : yeah lane is calling
07:41 : [Music]
07:43 : but but it's calling it on the children
07:45 : though right yeah okay so so a a an s
07:49 : string group
07:51 : can have children which a child can
07:54 : in turn be another estrogen group right
07:58 : well so how deep this will recurse would
08:01 : would it uh depend on how many children
08:04 : how many levels of children yeah yeah
08:07 : exactly so this actually shows to me
08:10 : that
08:12 : the the the
08:13 : nesting in the data structure is very
08:16 : deep
08:16 : all right
08:17 : and uh and i actually just took this
08:20 : line number because because this line
08:23 : number is actually a marker for one
08:26 : point in time in my program you can pass
08:28 : in this step number into the debugger
08:31 : and the debugger will jump there
08:34 : right and then when i did that
08:36 : i looked at the data structure like in
08:38 : terms of that tree and i saw that oh
08:40 : yeah it has children and they open up
08:42 : the children and that
08:44 : child has more children and then it
08:46 : keeps going down
08:47 : very far uh this is like this structure
08:50 : here
08:52 : so so then the question is like well why
08:55 : is it nested so deep does it have to be
08:58 : and i
09:00 : after i looked through that data
09:03 : more closely i realized no it did not
09:05 : have to be nested so deep um and the way
09:09 : to fix it was to do just a little bit of
09:12 : optimization i paired with you on this
09:14 : function actually this get item function
09:17 : do you remember this
09:19 : yeah vaguely remember really yeah it is
09:23 : like i i have a
09:24 : this get item is to support like i have
09:27 : a string like this
09:30 : okay
09:33 : maybe it has some color oh it's like a
09:36 : slice yeah it's for this i want to get
09:38 : from
09:41 : that right
09:42 : i want to get like a slice but but the
09:45 : problem is this string it could be a
09:48 : combination it could be like
09:56 : it could be that and i might slice
09:58 : across the hollow and the world right
10:02 : so this this loop is handling that logic
10:06 : okay um but it used to have just
10:09 : grab the results in chunks and at the
10:11 : end it just returns a group that has the
10:13 : results
10:14 : and what i realized that it wraps it in
10:16 : another group even if the result only
10:19 : has one element in it
10:22 : so that was completely unnecessary and i
10:24 : could if so at first i was like uh if it
10:27 : just has one element in it just return
10:29 : that element and instead of wrapping it
10:32 : in another group and once i did that
10:35 : it made the performance much much better
10:38 : well why this will cause the recursion
10:42 : it causes a recursion in that it
10:44 : increased the level of nesting
10:47 : uh it it's like in in this hollow world
10:49 : like we have a
10:51 : hollow
10:53 : and then world but but but
10:56 : they are different they are coming from
10:58 : different strings right right
11:02 : um but in many cases i don't go across
11:06 : the two different strings like if i if
11:09 : if the slice is just e-l-l
11:12 : i gotta
11:13 : it's gonna end up with
11:15 : just one result in here and then what i
11:18 : end up doing is wrapping that in another
11:21 : group
11:22 : okay
11:23 : so well let's call it like that so i end
11:26 : up double wrapping it i just have this
11:29 : procedure that
11:31 : does that a lot of times so so what ends
11:34 : up happening is that gets unnecessarily
11:37 : re-wrapped many many times
11:40 : okay i see even if i did just this
11:44 : is one
11:46 : then just return results at zero
11:50 : just by doing that
11:52 : i i was able to make make the rendering
11:55 : basically as fast as the no scroll
11:57 : version
11:59 : okay i see
12:01 : but then there's another optimization
12:02 : that i did later which improved even the
12:05 : no no scroll version
12:08 : because even the nose grow version had
12:11 : some pretty big coastlines even though
12:13 : they were not quite as big
12:15 : and that was i i if if i add two strings
12:18 : together if i find that they're the same
12:22 : have the same styles then i
12:25 : merge them into the same string group
12:28 : okay i see i i do some a little sort of
12:31 : under the cover smarts
12:33 : to to merge them so i reduce the
12:36 : nesting and and that made it much much
12:39 : faster
12:40 : i guess i'll show you if i do the same
12:43 : thing to the version with nosegrow
12:49 : you get these coastlines that are not
12:51 : quite as big as the first one right okay
12:54 : it's not quite as out of control and
12:57 : after the fix was put in place
13:00 : the two fixes
13:03 : oh that's it's much more calm yeah yes
13:06 : yeah it's much more calm
13:09 : and uh
13:11 : there's no crazy coastlines anymore
13:13 : after the fix
13:14 : that is true it's like if you want to
13:17 : make use like less
13:19 : logic or like special cases then the
13:22 : performance is much worse
13:24 : but if you just like optimize
13:27 : just by putting in like early return of
13:30 : the special
13:31 : case then
13:33 : you but but the code doesn't look as
13:35 : neat as before because you have this
13:38 : special treatment of certain things
13:41 : yeah that is true uh
13:44 : you don't want to do that up front
13:47 : premature optimization is the root of
13:50 : all evil like we inherited that saying
13:54 : that's because
13:56 : if you
13:57 : in order to optimize for certain things
14:00 : you have to do these one-off cases like
14:02 : this one
14:04 : i i ended up writing a reduced statement
14:07 : that is still pretty generic and short
14:11 : and that and this reduced statement
14:13 : handled that case if the results has one
14:16 : thing in it it'll just return the one
14:18 : thing
14:20 : instead of doing any of the reduced
14:23 : stuff
14:24 : so so
14:26 : the code is still okay but but yeah one
14:28 : thing i get from this is that
14:31 : why why do we try to make the code clean
14:35 : make the code easy to read etc you're
14:38 : trying to put out a high level of work
14:40 : you want to do good work
14:42 : and this is what you see
14:44 : right this is this is all you see when
14:46 : you're programming
14:48 : oh there's also the ui if you're a ui
14:51 : programmer there's you also see the ui
14:53 : and you want to make that look good as
14:55 : well so you you want to make the things
14:58 : you see the good
15:01 : uh
15:02 : but this is not what you see
15:06 : that's true
15:07 : so what what i'm proposing is if this is
15:10 : what you see then you would want to make
15:13 : this look good as well
15:16 : that is true yeah
15:18 : yeah
15:19 : it's it's not in it's not enough to make
15:22 : this code look good
15:24 : but also make this look good because if
15:26 : the recursion goes crazy that's not good
15:31 : i think this is a really interesting way
15:33 : of debugging for like the future of
15:36 : debugging this is kind of what i have in
15:39 : mind where people would look at these
15:42 : coastlines
15:43 : or or even other different
15:46 : visual representation of code that i
15:49 : haven't thought of but
15:50 : but i think this is definitely an
15:52 : important one here but how can you have
15:55 : this much data like
15:57 : showing
15:58 : this much data to people
16:00 : so that people can get what they want
16:03 : out of this
16:04 : we are looking at a lot of data and i'm
16:06 : doing it i'm already doing it
16:09 : okay
16:10 : i i'm just having to scroll through it
16:13 : right
16:14 : yeah that's true
16:16 : and and if the if the if the scrolling
16:19 : through my swiping gesture is too slow
16:23 : then i'm just dragging this scroll bar
16:26 : to make it go faster
16:28 : and but but
16:30 : to answer your question more directly
16:32 : yes i am
16:34 : thinking about
16:36 : how to
16:38 : make it more convenient to see the big
16:40 : picture
16:42 : when there's so much of it
16:44 : one thing
16:45 : too is this reminds me of
16:48 : fractals you know that the posts are
16:51 : behind me yeah yeah fractals
16:55 : this very much reminds me of fractals
16:58 : and i think that is super cool and i was
17:01 : thinking about when i use rsjs
17:06 : because
17:07 : rsjs
17:08 : help us
17:10 : getting your code cleaner because your
17:12 : code is like oh you can have a mental
17:14 : picture of what is going on so that you
17:16 : don't have to mutate stuff again again
17:20 : but
17:21 : i feel like i don't know what exactly
17:23 : happened when i write this rsjs stuff
17:26 : maybe
17:27 : if there something is processing like a
17:29 : thousand times but i
17:31 : have no visibility to it
17:34 : maybe if we print like this
17:37 : in like rsjs codes then you see some
17:39 : crazy stuff but you just have no
17:41 : visibility yeah yeah that's the cause of
17:44 : abstraction and it's not just rxjs that
17:47 : does this
17:48 : any any framework that claims that you
17:51 : can get a lot done
17:53 : by writing just a few lines of code
17:56 : but if you are able to see this picture
17:59 : of what it did
18:00 : as a result of typing those few lines of
18:03 : code
18:04 : like is that still a good picture well
18:07 : we don't know because we don't have this
18:09 : picture
18:11 : yeah
18:12 : but what if we did would that change
18:14 : things right well sometimes it doesn't
18:17 : matter because if you don't have to
18:20 : process a lot of data yeah then one
18:22 : right you don't yeah yeah yeah it makes
18:25 : if your but if your few lines of code is
18:27 : reading in like a novel or a huge data
18:30 : set
18:31 : from
18:32 : the customer data of t-mobile or
18:34 : something
18:37 : and then you you'll see a picture that
18:41 : might get crazy
18:42 : but if it's just like a little
18:45 : student homework problem that's sorting
18:47 : some lists or something like that