Time Machine Status Update 2

This time on Time Machine Status Update I talk about my failed attempt at improving the performance of the $stringify serialization function and the effort to update the zoom debugger UI to work with the sqlite-based database scheme.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hi there uh i want to give another
00:02 : update on
00:03 : the time traveling debugger aka the time
00:07 : machine
00:08 : um so um since last week
00:12 : um so the top two tasks that i've been
00:16 : working on
00:17 : related to this project number one the
00:21 : performance performance
00:28 : of this stringify
00:31 : function which is the serialization
00:34 : function
00:36 : that i wrote in javascript
00:39 : uh to take an object and serialize it
00:42 : into a string
00:44 : before saving it to the database and
00:47 : then
00:48 : the second thing uh that was thing
00:51 : number one and the second thing was to
00:53 : uh
00:54 : sort of uh update the ui
01:01 : for the zoom debugger
01:07 : since i just got something
01:10 : working i i got a jolt of happy energy
01:13 : so
01:14 : that's why i decided to make this video
01:16 : right now
01:17 : um i'm gonna report on what i
01:21 : did for thing number one
01:24 : first so in order to
01:28 : um in order to optimize the
01:31 : performance uh this is a wrong window
01:36 : okay this is the right window so in
01:38 : order to optimize the performance
01:40 : of the the
01:47 : the stringify function which in the code
01:51 : it's dollar stringify so all of my
01:54 : functions and global variables that i
01:58 : have outputted in the runtime i prepend
02:01 : it with a dollar sign so that
02:02 : at userland the the
02:06 : programmer cannot make a variable name
02:09 : that conflicts
02:10 : with one of the runtime functions
02:13 : anyway this string of a function takes
02:15 : an object
02:17 : that is you know allocated
02:20 : to the program during runtime and
02:22 : converts it to a string
02:25 : and then with the output of this
02:27 : function the
02:28 : the string will be saved into the
02:30 : database uh going
02:32 : going through this prepared statement
02:36 : the problem was this stringify function
02:39 : was the top bottleneck
02:42 : in the execution of the program
02:45 : and when when this database logging is
02:48 : turned on so
02:50 : um so i sort of set my
02:54 : site on making this stringify function
02:56 : faster and the way
02:57 : that i decided to do it at least to try
03:00 : doing that
03:02 : is to write this
03:05 : function in c plus plus uh as a node.js
03:09 : add-on um i'm actually considering
03:13 : uh so i've never done that before but i
03:15 : learned
03:16 : how to do it uh last week
03:20 : the resulting code looks like this um
03:24 : uh the syntax highlighting looks really
03:26 : funky
03:27 : right now but um there's actually some
03:29 : good
03:30 : please excuse the noise um
03:34 : native add-on is this what it's called
03:38 : so yeah this this is called c plus plus
03:41 : add-on so the
03:42 : official node.js um website actually
03:46 : has a pretty good documentation about
03:48 : how to do this
03:50 : um and i found a couple of other
03:53 : resources
03:54 : other than this as well but i'm gonna
03:56 : refer to this one
03:57 : so for example if you wanted to build
04:01 : a module that just has a function
04:04 : you call it you get a string back then
04:08 : this is what you would write right in c
04:11 : plus plus you come back you set it up um
04:15 : you set it up in the setup you have your
04:19 : c plus file which mine is called
04:22 : stringify.cc
04:24 : [Music]
04:26 : um
04:28 : then you need to set up this binding
04:30 : that jib
04:31 : file and uh and then off
04:34 : you go um one thing though uh this
04:37 : way of writing an add-on is so-called c
04:40 : plus plus
04:41 : add-on is like not no longer the
04:44 : recommended way
04:46 : um this way in particular this this
04:49 : way of writing it references uh
04:53 : stuff objects or types that are defined
04:56 : in the va javascript engine
04:59 : as well as other low-level
05:03 : libraries such as lib uv which is one of
05:07 : the backbones of node.js
05:10 : they no longer recommend you doing doing
05:12 : it this way
05:13 : unless you have some
05:16 : actual need to access va stuff or
05:20 : uv stuff directly
05:23 : so instead of writing it this way dave
05:26 : the core team has designed something
05:29 : called the n
05:30 : api which i think stands for node api
05:34 : and they recommend you write the c
05:37 : plus add-in using this api instead
05:41 : which if you do it that way you will not
05:44 : reference
05:44 : any va types or lib uv types directly
05:49 : and instead you'll be using these
05:51 : wrapper functions
05:54 : all of which prefix with the name
05:57 : and api so that's what i did
06:00 : basically i rewrote this stringify
06:04 : function
06:05 : which is about i don't know
06:08 : maybe 30 lines of javascript and
06:12 : a little bit let's say 40 lines of
06:15 : javascript i really wrote this in c plus
06:17 : plus it ended up being a 185 line
06:21 : long c plus plus module
06:24 : um i will go through just a little bit
06:28 : of what
06:29 : is going on in this code but i'm also
06:32 : considering
06:33 : making a separate video just about how
06:36 : to make
06:37 : notejs c plus plus add-ons as well
06:41 : if you are into that please
06:45 : write me in the comments and then i will
06:47 : take note of your comment
06:50 : so first you initialize your module
06:53 : with the inet function which must have
06:56 : this
06:56 : signature and then inside the
06:59 : initialization you can do
07:00 : a few different things one of which is
07:03 : say i wanna
07:05 : i want the uh this one actually creates
07:09 : a function
07:10 : i want the default export to be this
07:12 : stringify function
07:13 : rather than a property so the way you
07:17 : actually use it
07:18 : is is like this
07:21 : currently my code is actually not using
07:24 : this native module add-on and i'll
07:27 : explain why
07:28 : later but this is how you use it you
07:31 : first
07:32 : require the bindings module and then you
07:35 : you ask for the stringify
07:39 : object within the bindings module
07:42 : and then you get whatever your thing
07:46 : returns back and in my case it was this
07:49 : stringify function which the actual
07:51 : definition
07:52 : is is this guy again i don't know why
07:56 : the syntax highlighting is
07:58 : a little weird right now but whatever
08:02 : this basically makes it so that the
08:03 : default export
08:05 : of the module is the stringify function
08:09 : and then this is my stringify function
08:11 : the entry point of every function
08:13 : that you write as a
08:16 : c plus plus add-on is always this
08:19 : environment
08:20 : variable and then this callback info
08:24 : variable
08:25 : with the callback info variable what you
08:27 : get from that
08:28 : is you can get information about the
08:32 : arguments that were passed to the
08:34 : function
08:35 : you don't get them as normal c plus
08:38 : parameters you have to go through this
08:39 : info object
08:41 : and say hey can i get the callback
08:44 : info and in particular you want to get
08:48 : the argument count rc
08:52 : and the art list of arguments from the
08:54 : callback info object
08:56 : this setting the count to a certain
09:00 : number
09:01 : will give this function an expectation
09:04 : of how many arguments
09:06 : there are and so it will only check up
09:08 : to that number
09:10 : and then it'll you set up this array
09:12 : it'll populate this array with each
09:14 : argument
09:15 : that were passed in and then so you you
09:18 : send in this
09:20 : pointer to the rxc and the pointer to
09:23 : the arcs this
09:24 : is a pointer because in c an array
09:28 : variable is in reality a pointer so
09:32 : even though that doesn't have that on it
09:34 : it's still actually a pointer
09:37 : i think the syntax highlighting looks
09:39 : weird because i did this
09:40 : defined thing but whatever okay
09:44 : um and then i have a little check
09:47 : to to to make sure you're passing in the
09:50 : right stuff
09:52 : and then i have this stringify value
09:55 : function which i wrote here
09:57 : which checks what type
10:00 : of the value is whether it's a string a
10:04 : number a boolean
10:06 : a null or an undefined an object
10:09 : or what and if it's an object
10:12 : it could be an array a little maybe a
10:14 : little known fact but an
10:16 : array in javascript is actually an
10:18 : object so
10:19 : when it says it's an object i then have
10:21 : to check whether it's an array or not
10:23 : um and in order to access these things
10:28 : i have to use a variety of
10:32 : napi nappy
10:35 : functions to do it luckily the
10:38 : documentation
10:39 : for it is actually pretty good i was
10:42 : actually kind of surprised at
10:45 : um and how good the documentation was
10:48 : in terms of the reference so so
10:52 : if you just go through this entire
10:54 : document
10:55 : to see what functions are available for
10:57 : working with stuff
10:58 : and there's sections like working with
11:00 : javascript values
11:02 : here are the types and the functions you
11:04 : need to work with javascript values
11:06 : and so forth it's all in this one
11:09 : gigantic page
11:11 : and that's the reference material that i
11:14 : use
11:14 : to figure out how to use these functions
11:16 : and which one functions i need to use
11:18 : for example
11:18 : in order to get a javascript string
11:22 : into a form that you can work with in c
11:24 : plus plus
11:25 : you need to use one of these functions
11:27 : to sort of convert a javascript
11:29 : string into a string a
11:32 : char chart array that you can work with
11:36 : in
11:36 : c and if you have a number
11:39 : you need to use this conversion function
11:41 : to convert it into
11:43 : a double or an end a number format of
11:46 : your choice etc
11:47 : now if it's an array or an object
11:50 : then what you need to do is
11:55 : is use these um
11:59 : here use a get property names function
12:02 : to get the this would be like
12:05 : object.keys
12:06 : here in javascript so
12:11 : nappy.getpropertynames is gets all the
12:13 : keys of the object
12:14 : and then this stores it into this array
12:17 : that you've allocated over here
12:21 : uh yeah it's not p value snappy value
12:25 : stands for any possible javascript value
12:29 : it could be a number it could be an
12:30 : array it could be in anything and then
12:32 : you do the get the array length from the
12:35 : string and then you loop through it and
12:36 : then you get
12:37 : the element and so forth you get the key
12:41 : oh the element happens to be a key and
12:43 : then
12:44 : you get the value is this the array one
12:47 : or the object one this is the object one
12:50 : so we got an element of the array which
12:53 : ends up being the key that we want of
12:56 : the object
12:57 : and then we turn that key into the
12:59 : string form so we can work with it in c
13:01 : plus plus and then we get the property
13:04 : which
13:05 : i think this means access the property
13:07 : within this object
13:08 : with that key and then
13:13 : and then we stringify the value
13:15 : recursively calling
13:18 : this stringify value function which can
13:21 : knows how to deal with the variety of
13:23 : types in javascript
13:25 : so anyway so i did this uh it took quite
13:28 : a bit of
13:28 : work and learning um and then after i
13:32 : done with this i
13:33 : compared the performance and this
13:36 : version was actually
13:38 : quite a bit slower than my javascript
13:40 : code my javascript version of the
13:42 : stringify
13:43 : function and
13:47 : and uh i had a couple of tries
13:50 : at trying to figure out why that was but
13:53 : so far i have not been successful i
13:56 : decided to
13:58 : switch my attention to the ui problem
14:02 : but but but having said that i do plan
14:05 : to come back to this problem
14:07 : and take a harder look at the
14:09 : performance of this thing because
14:11 : it is actually important okay
14:14 : so that was that was uh
14:18 : the thing number one the performance of
14:21 : string if i i haven't
14:22 : uh completed that to my satisfaction
14:26 : but hopefully i'm gonna come back to
14:28 : that and solve that problem
14:30 : i have a couple of ideas of how i would
14:33 : approach it
14:34 : uh on to the second thing which is
14:37 : update the ui
14:38 : zoom debugger so previously uh let me
14:41 : show you
14:42 : a little bit of the ui that i have right
14:44 : now
14:46 : okay so this is uh for those of you who
14:48 : haven't seen this ui before
14:50 : um a better demo of it
14:53 : i'm not gonna do a full demo of this ui
14:58 : but uh if you wanna see it you should go
15:00 : to
15:02 : github.com airport yh slash play lang
15:05 : i have a bunch of videos about this
15:09 : deep zoom debugger ui there's a five
15:11 : minute video
15:12 : as well as a 17 minute video where
15:16 : my colleague koichi and i have a
15:20 : little conversation about it
15:24 : so um so basically i'm gonna zoom in
15:27 : here
15:28 : and uh i'm able to zoom into the
15:33 : function calls that were called as a
15:35 : result of executing
15:37 : this program um and i just got
15:41 : and previously did none of this i broke
15:44 : this because i completely changed
15:46 : the data source uh previously the data
15:49 : source was
15:51 : coming from one file that
15:54 : entire file was loaded into memory and
15:57 : then
15:58 : uh given to this debugger and then this
16:02 : debugger would just
16:03 : go through the the file and and to grab
16:07 : the data that it needed in order to
16:09 : render this ui
16:10 : i've changed that to as i mentioned in
16:14 : the last
16:14 : status update uh instead of logging the
16:18 : history
16:19 : in one giant json r file
16:22 : now it logs to a sqlite database
16:27 : which looks like this it's got four
16:29 : tables now
16:30 : last time it had five tape three tables
16:33 : but i added one for the source code
16:35 : so the source code itself is stored in
16:37 : the database
16:38 : the reason i did that is so that in case
16:42 : after running this program you edited
16:45 : the source file
16:47 : now that's going to be inconsistent with
16:50 : this program now right so so by saving
16:52 : the source code
16:53 : in the database that problem does not
16:55 : occur
16:56 : anyway so i have
16:59 : a snapshot table which contains every
17:02 : snapshot of the state of the program at
17:04 : any point in the program
17:06 : there's a bunch of objects
17:09 : which are stored in json r format
17:13 : and there's a for every function call
17:16 : that is made
17:17 : during the program we also log a row in
17:20 : this function call table
17:22 : so this database now drives this ui
17:26 : this ui and
17:30 : the way that is happening is um
17:33 : i've written this node.js slash
17:36 : express server
17:40 : which is actually the code for it is
17:42 : very very small
17:44 : it's only 47 lines
17:47 : which is responsible for
17:51 : handling queries for the for data
17:54 : within this database so you can
17:57 : return function call objects based on a
18:00 : parent id
18:02 : a parent id would be like the previous
18:04 : stack
18:05 : in the stack frame where a function call
18:07 : is
18:08 : one frame in the stack frame you can
18:11 : fetch a bunch of snapshots based on a
18:14 : function called id so every single
18:15 : snapshot of the program has a function
18:17 : called id
18:18 : namely the current function we're
18:20 : executing under
18:22 : so given a function called id you can
18:24 : get
18:25 : a collection of snapshots and then we
18:28 : can get
18:29 : objects in memory at any given time
18:32 : so that's that's this
18:35 : object table so so given this rest based
18:38 : api
18:40 : um this zoom debugger actually
18:45 : fetches the data as it needs them
18:49 : um as it needs to render and it only
18:53 : fetches the bits that it needs for
18:55 : example if it's
18:56 : only rendering this then it actually
18:57 : doesn't need anything
18:59 : once we drill down now it actually
19:01 : fetches
19:02 : the snapshots that the main function
19:06 : has executed within it but but not the
19:10 : details
19:10 : within the nested function called yeah
19:13 : so it only had to fetch
19:14 : like line two three four five and eight
19:18 : for example as as well as if there's a
19:20 : variable with a value there
19:22 : like the answer was n for example it
19:25 : fetched that
19:27 : from uh from the object table and so
19:29 : forth
19:30 : and if we drill down more you can look
19:33 : at the requests here by the way
19:34 : once it drills down and then it's
19:37 : actually gonna fetch a whole bunch of
19:39 : more data
19:41 : uh one snapshot for every line that you
19:45 : see on the screen but also
19:47 : for the line for the pieces of the code
19:50 : that
19:51 : they have boxes around it that means
19:53 : that's a
19:54 : sub function call which can then be
19:56 : further drilled down into
19:58 : and if you drill down into that one and
20:01 : then it will fetch
20:02 : even more information from the database
20:05 : to show you what's going on in in that
20:08 : drill down
20:09 : so that's what's going on uh i just got
20:12 : this much working at this point and
20:15 : it's actually very very sluggish right
20:17 : now after the changes i made
20:20 : um so i'm definitely going to need to uh
20:23 : do some performance optimization on this
20:26 : ui
20:27 : i i can't tell you exactly what the
20:29 : thing that's making it slow right now
20:32 : um and obviously one of the things
20:34 : that's obviously slow is the
20:37 : large number of requests that are being
20:39 : made
20:40 : to feed this ui so one thing i could do
20:43 : is
20:44 : actually batch up the numerous
20:47 : uh requests into like
20:50 : batches like say 10 at a time or however
20:53 : many
20:54 : that came in within 100 milliseconds or
20:56 : something
20:57 : and batch them all up into a single
20:59 : request instead of
21:00 : having multiple requests and you can
21:03 : also see that not all
21:07 : but some of the variable value this
21:10 : uh display is already working now
21:14 : the code is very very gnarly right now
21:18 : but i somehow got this to work i will
21:21 : show you just a little bit of the code
21:23 : here
21:25 : okay so
21:31 : um
21:37 : first of all to render the lines
21:41 : we have something called the built
21:44 : child car map
21:47 : which is is basically given
21:50 : a um let's say we're at the top level
21:56 : we're gonna build a map of the child
22:00 : function calls that exist within the
22:03 : body of this function in this case we
22:05 : only have one
22:06 : child function called that's the play
22:08 : game function
22:09 : so what this does is actually loops
22:12 : through every single line that was
22:14 : executed within the this call of the
22:17 : main function
22:19 : and see whether any line has a child
22:22 : function call and this is gonna
22:25 : find that it does it it actually does
22:28 : that by parsing
22:30 : the original source code and see if the
22:32 : source code has
22:33 : a function called expression on it
22:37 : uh that's what this line does and if it
22:39 : does
22:40 : it's going to it's going to
22:44 : fetch the function call
22:47 : objects
22:50 : these objects from the database and the
22:52 : way it does that is
22:54 : by let's see
22:57 : i'm gonna so you can see these are all
23:00 : the function calls that were made
23:02 : and the first function call is the call
23:04 : to the main function right
23:06 : and every one of these function calls
23:08 : has an id
23:10 : so this guy is id one so if you
23:13 : if you fetch a function call you can
23:16 : actually
23:17 : ask hey give me all the function calls
23:20 : whose parent id is one
23:23 : and that means the
23:26 : the parent id is the previous function
23:29 : called your parent function call so
23:32 : if i find all the function calls whose
23:34 : parent id is
23:35 : one that tells me the sub
23:38 : function calls that occurred within the
23:40 : body of
23:42 : function call 1 which was main
23:45 : so so that just gives us this function
23:48 : call which was a call to the function
23:50 : play game and so forth and this guy has
23:53 : an id of two so if i ask hey within the
23:56 : function play game
23:57 : what are the function calls that were
23:59 : made within it i can call this api again
24:02 : but with
24:02 : parent id 2 this time we actually see
24:06 : a whole bunch of function calls because
24:08 : there was a loop
24:10 : and that's what happens if we drill into
24:13 : the play game function and so you can
24:16 : see all these boxes
24:18 : uh of them are function calls and then
24:21 : you can drill into them
24:22 : even more so let's say i drill into one
24:26 : of these
24:26 : function calls this is again sluggish
24:28 : i'm going to need to
24:31 : improve the performance here at some
24:33 : point
24:34 : probably very soon because i'm
24:37 : i get very impatient at sluggish
24:41 : performance
24:44 : like i cannot work like this
24:47 : okay there's finally
24:51 : so finally uh like we drill into this is
24:54 : winner function and then the variable
24:57 : value display on the side that's
24:59 : happening
25:00 : is also happening in a lazy manner as in
25:04 : as it's needing to display it it'll
25:06 : actually fetch it
25:07 : from the rest api and therefore from the
25:09 : database
25:11 : and that code is very very gnarly right
25:13 : now
25:16 : um
25:20 : yeah now i'll talk a little bit about it
25:23 : but it's so bad
25:24 : that i kind of oh let me show you my two
25:27 : caches
25:30 : probably i actually don't want to dig
25:32 : too deep into it so i'm just gonna
25:34 : talk about my two caches and then uh
25:37 : there will be the end of this
25:39 : because i don't want to make this video
25:41 : too long
25:42 : okay so i have two separate caches the
25:45 : function call
25:46 : cache and the object cache uh they
25:50 : actually look mostly alike
25:53 : i just made one of them made a copy and
25:55 : tweaked the other one
25:57 : this is a cache to store the function
25:59 : calls
26:02 : the function called objects that are
26:03 : returning from the database and then the
26:05 : object cache
26:06 : is to do the same thing for the object
26:09 : table
26:10 : basically you you use this get method to
26:13 : get
26:14 : the either the object or the function
26:16 : call
26:17 : and uh if it's already in the cache
26:20 : it'll return it to you but if it's not
26:21 : it'll actually
26:22 : just return null but it'll initiate the
26:26 : fetching for that object
26:28 : so this time you'll get no but when when
26:31 : the data comes
26:32 : from in from the database then the next
26:36 : time you call it
26:37 : you actually get that object the way
26:40 : this
26:40 : is set up to work is whenever one of
26:42 : these caches
26:44 : has completed fetching
26:47 : some data it will actually notify the
26:50 : renderer
26:51 : via this on data fetched function and
26:55 : so basically whenever a fetch has
26:58 : completed
27:00 : it'll notify the renderer the renderer
27:02 : will re-render the canvas
27:05 : again so so then so then even though the
27:08 : first time
27:08 : you were needing that information you
27:10 : just ignored it
27:12 : because you got a null value back when
27:14 : the data comes
27:16 : it it caused the same code to render it
27:19 : and the next time
27:20 : you get that object it's actually there
27:22 : and now you can render it
27:23 : so that's what happened with these
27:25 : values that's also what happened
27:27 : with the fetching of the child function
27:30 : calls
27:31 : um yeah so that's all i'll say about
27:33 : that um
27:35 : do more of these status updates um
27:39 : thanks for watching and uh i'll see you
27:41 : soon