Dream of the Time Machine

In this video I will explain the motivation behind my work on the time traveling debugger, the prior art surrounding this idea, and give a status update on the project.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello everyone in this video I want to
00:02 : talk about my dream of the time machine
00:05 : so I'm gonna start with a famous Brett
00:10 : Victor talk it was called inventing on
00:14 : principle it is one of the most
00:20 : inspiring Tech Talks ever and a skip to
00:27 : this part where he shows off a a feature
00:32 : of this sort of hypothetical programming
00:36 : environment which he demoed live in
00:39 : front of an audience
00:43 : I'm going to bounce off the turtle and
00:47 : pause the game so I lost the game and
00:49 : now there's the slider up here which
00:52 : lets me rewind through time
00:59 : and now I could rewind to back before I
01:01 : made the jump and change the code make
01:05 : them less bouncy and now when I move it
01:07 : forwards gonna simulate forward using
01:09 : the same input controls the same
01:10 : keyboard commands that record us before
01:11 : but the new code amazing that but wait
01:19 : there's more
01:22 : this is not good enough I need to be
01:28 : able to see changes immediately I need
01:30 : to be able to see immediately whether or
01:32 : not my bounciness is correct
01:35 : none of this stuff and if you have a
01:39 : process of time and you want to see
01:41 : changes immediately
01:42 : you have to map time to space so here's
01:46 : what I'm gonna do it bounced off my
01:48 : turtle pause the game and now hit this
01:51 : button here which shows my guys trail
01:55 : so now I can see where he's been and
01:58 : when I rewind this trail in front of him
02:02 : is where he's going to be this is his
02:05 : future and when I changed the code I
02:08 : change his future so I can find exactly
02:14 : the value I need so when I hit play he
02:17 : slips right in there so that there is
02:23 : one one of the most inspiring moments in
02:29 : programming that I have ever experienced
02:32 : so that that is kind of a genesis of
02:36 : what what I mean
02:38 : by the time machine a programming
02:42 : environment where the debugger can
02:44 : actually go back in time to show you
02:47 : what happens or to show you how the
02:52 : state of the program got this way
02:55 : because usually when you have a problem
02:58 : in your program there's a bug it's
03:02 : usually attributed to some root cause
03:05 : that happened upstream of where you see
03:10 : the defect ok another really inspiring
03:14 : thing that exhibited this time-traveling
03:19 : this is a tool online created by Philip
03:23 : gwah
03:25 : it's called Python tutor and what python
03:28 : tutor allows you to do is this is
03:31 : actually an demo of it it it's very much
03:36 : similar to a regular debugger and that
03:38 : you can step through the code line by
03:41 : line however it has the additional
03:45 : feature of being able to step backwards
03:48 : as well unlike most debugger that you're
03:53 : you're used to using and and also it's
03:57 : got this very very nice visualization of
04:00 : the stack frame as well as the objects
04:04 : in the heap which is which is vastly
04:08 : better than
04:09 : what you'd get in actual
04:12 : industry-standard debuggers this is what
04:16 : I use when I was teaching a coding
04:20 : bootcamp it's what I used in class often
04:24 : to to walkthrough algorithmic exercises
04:29 : and it's also what I have my students
04:32 : use when they're debugging their own
04:34 : code another source of inspiration is
04:39 : the redux tools so the redux tools is
04:42 : usually redux is usually paired with the
04:46 : react run and framework although angular
04:49 : and UJS have their own version of state
04:54 : management tool that works very
04:57 : similarly to redux and also they also
05:00 : have a debugging tool or developer tool
05:04 : similar to redux so when I say redux
05:09 : it can really be generalized to all of
05:11 : those okay so in in the Redux paradigm
05:15 : there's this there's this store concept
05:21 : which contains the stay in it so the
05:24 : store with it's got some state in it and
05:28 : the store is sort of in charge of
05:31 : managing the state of the application
05:32 : your application consists of the store
05:36 : and a view which is like you may also
05:44 : think of that as the UI and the UI is
05:49 : simply derived from the current state of
05:52 : the application like so and whenever the
05:55 : user or some other event happen to
05:59 : interact with the UI those even those
06:03 : events trigger something called actions
06:09 : or you might call them events and the
06:15 : actions and events the trigger updates
06:22 : updates to the state that's within the
06:26 : store but that's okay because whenever a
06:29 : an update is issued to the store what
06:34 : happens is that the changes to the state
06:38 : will be notified to the UI through this
06:41 : SUBSCRIBE mechanism as in the UI aka the
06:46 : view is always listening for changes to
06:49 : the state so if changes are coming in
06:52 : via one of these actions or events then
06:54 : the UI will be automatically notified of
06:57 : the change and if the UI will update
06:59 : accordingly now one additional benefit
07:03 : or feature of this architecture is that
07:07 : you can actually track every historical
07:11 : state that has ever happened through the
07:16 : store in this architecture and you are
07:19 : sort of and if you manage all of your
07:21 : application state in this way within the
07:24 : store there's sort of like a central
07:26 : location where all state changes has to
07:29 : happen the store so all of the all
07:34 : changes have to happen this way
07:36 : and because of that there's a insane
07:39 : thing you can do with that which is you
07:42 : can basically capture every single
07:44 : historical state so let's say this is
07:47 : timeline and the application started at
07:50 : state 0 well the next time an action is
07:54 : called a one happened it's gonna trigger
07:57 : a state change to get us from the new
08:00 : state let's call that s1 and so forth so
08:05 : you're gonna get another action the
08:07 : action might be like a the user click
08:09 : the button such as this button on the
08:12 : click tictactoeboard
08:14 : and so forth to derive the new states is
08:18 : you can actually either keep track of
08:20 : the individual actions or keep track of
08:23 : all the possible historical states and
08:26 : that would enable you to walk backwards
08:29 : through time if you simply to say you
08:33 : know what I have
08:34 : this cursor let's call it state car sir
08:38 : SC short for state cursor I can just
08:40 : move the cursor backwards and then the
08:43 : UI is is rendering the previous state of
08:46 : the application the entire app can go
08:49 : back in time and I can actually show
08:51 : that to you actually working within the
08:55 : redux tools so let's say so every that
08:59 : that was an action by the way that just
09:00 : occurred here and this panel here on the
09:04 : right is a display of individual action
09:08 : and I believe that's also a no this this
09:13 : is the list of actions so every time I
09:15 : click I add another action in this case
09:19 : each action this action is called a move
09:23 : because a player made a move so this is
09:26 : the move action and this panel here is
09:30 : the detail of what this action entailed
09:33 : and it says it made this difference to
09:37 : this overall state you can look at the
09:38 : overall state the overall state of the
09:41 : program so this is the s inside of the
09:44 : store is an object that contains a
09:47 : current player aboard a game status the
09:50 : number of moves there are left the
09:53 : scores if you open up the board you can
09:56 : see the the data structure
09:58 : representation of the board in here and
10:01 : the difference is the difference that
10:04 : was sort of invoked by this move action
10:07 : as a result of this move action it
10:09 : caused this change to the overall state
10:12 : namely that the current player has
10:14 : switched from X to oh and the number of
10:19 : moves left decreased by 1 and also the
10:23 : index 2 of the board has changed because
10:26 : of this architecture of because you
10:30 : you're writing your app in this
10:32 : architecture and all of the updates have
10:34 : to go through this one single point the
10:37 : store and we are able to capture all the
10:41 : actions that might cause mutations to
10:46 : the application
10:47 : and intercept all that and we can enable
10:51 : this time-traveling machinery just just
10:56 : switch to a previous state of the
10:59 : application and we can walk backwards in
11:01 : time to observe the application at a
11:05 : previous state in time and that's
11:09 : extremely powerful and it's extremely
11:11 : gratifying to see this functionality
11:14 : being used in the mainstream because
11:17 : there's actually many companies that are
11:19 : using the redux tools to build their
11:22 : application using you redux or for
11:24 : angular MGR X and for view GS I don't
11:28 : remember what their state management
11:30 : tool is called of these companies are
11:32 : actually using something like this that
11:36 : has trim time-travelling capability now
11:38 : everything is not like roses because
11:42 : there's limitations with the redux
11:45 : framework as well but I'm not gonna get
11:47 : into that here now the idea of
11:49 : time-traveling debuggers is actually not
11:52 : Neil because I when I was a Java
11:54 : developer about 10 years ago I actually
11:56 : have learned of a time traveling
11:59 : debugger however because it cost money
12:03 : to buy this tool I never ended up having
12:07 : an opportunity to use it so it's
12:09 : actually something that's been around
12:11 : for a while just it's not quite made it
12:16 : into mainstream yet and then from the
12:21 : University Carnegie Mellon came a
12:25 : something a prototype or or a proof of
12:28 : concept called a wide line if you go do
12:31 : a wire line page they have this video
12:33 : which demonstrates how Y line works and
12:38 : basically in this environment in which
12:41 : they implemented y line this is called
12:43 : Ellis they program these balls to move
12:47 : and which could potentially collide with
12:50 : each other and you're writing a program
12:52 : in these block block based programming
12:56 : language I believe that's what Alice is
12:58 : is similar to scratch if you're
13:01 : if are you familiar with scratch at all
13:03 : and the way you can debug your program
13:06 : is by asking these why questions
13:09 : starting with clicking on the Y button
13:11 : and you can either ask it hey why didn't
13:15 : the program do this and then you can
13:17 : select a subject so in this case this
13:21 : student is asking why didn't the pack
13:26 : which I think that short for pac-man
13:28 : why didn't pac-man move forward by three
13:31 : when I tried to ask him to do that or
13:35 : why did something happen which I wasn't
13:38 : expecting it to do um so basically the
13:43 : researcher namely amy cope i think is
13:47 : the principal developer CO and myers or
13:52 : responsible for this tool they they
13:57 : basically tailored the debugging
13:59 : experience to the way a programmer would
14:05 : be thinking when they're trying to
14:07 : perform a debugging task because when
14:10 : when something doesn't work right the
14:13 : first thing the programmer is gonna do
14:14 : is ask why did it do that or why didn't
14:18 : it do that and they're trying really
14:20 : hard by engineering some sophisticated
14:24 : algorithm to help them answer the
14:26 : question that that is invariably going
14:30 : to pop into their heads when something
14:32 : doesn't work okay
14:34 : these are the sort of prior art that
14:38 : have motivated me to work on this
14:40 : concept
14:41 : so let us post mortem debugging this
14:44 : feature of being able to walk backwards
14:46 : in time why does this make debugging
14:49 : easy
14:49 : whenever debugging is hard it is because
14:52 : you cannot see what you need to be able
14:55 : to see and time traveling lets you do
14:58 : that it allows you to see what happens
15:00 : and you don't have to use probes such as
15:03 : console dot log or print statements or
15:05 : you use the debugger to just to look at
15:09 : certain values at certain times of your
15:11 : of the process of your program
15:14 : when you're using a debugger there's no
15:17 : guessing wrong with where to place the
15:20 : brick point there's no I said one time
15:24 : that uh setting a breakpoint it's kind
15:27 : of like playing The Price is Right
15:29 : you're trying to get as close as
15:31 : possible without going over but once you
15:34 : go over you kind of have to start over
15:36 : again and that's that's a big pain in
15:38 : the butt actually there's a number for
15:41 : that I omit it but just you don't have
15:43 : to you don't have to test your program
15:46 : like a black box you don't have to like
15:50 : oftentimes in in the most powerful
15:53 : debugging techniques which actually have
15:57 : documented in debug school this is
16:01 : actually a series of videos that I have
16:03 : made to to teach developers more about
16:08 : debugging and two of the most powerful
16:11 : techniques for debugging are test case
16:15 : simplification and the book sandwich and
16:18 : these are black box testing techniques
16:21 : they're testing the program as if it
16:24 : were a black box because it's so
16:26 : mysterious that you kind of have to do
16:29 : it like that but that kind of work is
16:32 : actually quite time-consuming and
16:35 : tedious and when you have post-mortem
16:39 : debugging you don't have to do those
16:41 : things because you can actually go back
16:43 : in time and figure out exactly what the
16:46 : program did at every single step and and
16:51 : last but not least you can if you have
16:53 : saved every single point in time in in
16:57 : the process of this program you can
16:59 : actually actually create visualizations
17:03 : that plot certain aspects of your
17:06 : program over time
17:08 : as a visual as a graph or something like
17:12 : that some kind of like heat map or
17:14 : whatever what not you can actually do
17:17 : those plots over time similar to code
17:20 : coverage tools actually that's what code
17:22 : coverage tools are it's a plot of
17:26 : which which of your lines got executed
17:30 : or not and in some cases could coverage
17:32 : tools can even do heat maps as in which
17:35 : lines out hot spots ticket executed a
17:38 : lot versus other lines that didn't get
17:40 : executed so much so you can actually do
17:42 : visualizations over time and that can
17:45 : actually be very powerful and it's
17:47 : that's an undeveloped part of our
17:51 : Arsenal as programmers so I hope that I
17:56 : convince you that post-mortem debugging
17:59 : can make debugging easier but why is
18:03 : important to make debugging easier well
18:05 : for one it will give learners a better
18:09 : chance at this point in time there's
18:13 : probably more than any point in history
18:17 : people trying to get into the software
18:20 : development field but learning to
18:23 : program is really hard and the hardest
18:25 : thing about it is debugging
18:28 : so if debugging were made easier then we
18:31 : give all of these learners a better
18:32 : chance but I believe there's more than
18:36 : that we can actually making debugging
18:39 : easier I believe can actually help
18:40 : reduce technical debt why think about
18:45 : all the cases in which you you have a
18:51 : piece of code that you have inherited in
18:55 : some cases but in some cases it was code
18:58 : that you wrote and that code got
19:01 : complicated and it's a pain to work with
19:05 : and you're hate dealing with that code
19:07 : because it's so complicated how did it
19:10 : get so complicated well the way it got
19:13 : so complicated is because even though at
19:16 : various points probably you realized
19:20 : that a redesign of that code was a good
19:25 : idea but you did not do it and instead
19:28 : of redesigning the code in some way to
19:31 : improve the architecture of the code you
19:33 : decided to work around the problem
19:35 : instead by sort of adding to it
19:41 : adding on top of it rather than changing
19:44 : its guts and why did you decide to do
19:47 : that it's because debugging is hard
19:50 : debugging is hard and under time
19:53 : pressure you don't want to take the risk
19:55 : of breaking that core piece of software
19:58 : by making changes to it or perhaps risky
20:03 : changes to it because because you're
20:05 : under time pressure and it's easier to
20:08 : leave that thing as is and instead at on
20:11 : top of it to do the new feature that you
20:13 : want to do and that's because debugging
20:16 : is hard so I believe that if debugging
20:19 : were actually made easy it can actually
20:21 : help all developers reduce the amount of
20:25 : technical debt that they accumulate over
20:28 : time but also I believe it'll help them
20:31 : work towards reducing their technical
20:34 : debt I've been working on a
20:37 : proof-of-concept of my own to try to
20:39 : implement this idea I've made three
20:43 : videos so far which I have put up here
20:47 : in the play Lang project on github which
20:50 : has documented the work I've done so far
20:53 : this and now I'm gonna give another
20:56 : status update on that first of all
21:00 : previously I had implemented this
21:03 : concept in in the fun programming
21:07 : language it's which is a toy programming
21:10 : language that I've been making however
21:13 : I've since decided to separate it out
21:17 : separate out this effort into a separate
21:20 : repository which I'm calling the play
21:22 : programming language and the main reason
21:25 : is that there's there's a this feature
21:29 : dealing with testing for pure code that
21:35 : exists in the fun programming language
21:37 : which I sort of didn't want to have to
21:40 : deal with the complexity of building
21:42 : that feature at the same time as working
21:45 : on the time-traveling debugger so
21:47 : currently I want to focus my time on
21:49 : working on the time-travelling debugger
21:52 : and I want to do that alone so I wanted
21:55 : a simpler code base to work with so
21:57 : basically what I did was made a copy of
22:01 : the fun programming language and just
22:03 : stripped out the features that I didn't
22:05 : want in here so the main purpose of this
22:08 : repo is for me to experiment with this
22:11 : time-traveling debugger idea and as I
22:14 : said I made three videos about that and
22:17 : this is gonna be status update number
22:20 : four okay so this is an example program
22:25 : oh by the way another thing I did is to
22:29 : make this work in the browser a previous
22:31 : time I had this working in node rias but
22:35 : I want it to work in the browser because
22:37 : I desperately wanted something visual
22:41 : because I think people will be able to
22:45 : connect to it more and it's also more
22:47 : fun like even my kids would be able to
22:49 : connect to it more if I build games for
22:52 : example so the first thing I started
22:56 : with was interacting with the Dom and
23:00 : the next thing I would probably do is
23:03 : have a connectivity with html5 canvas so
23:07 : that we can build canvas based games but
23:09 : at the moment I have built some
23:12 : connectivity with the Dom and let me
23:14 : just demo this this environment to you
23:17 : so I have a code that builds a visual of
23:22 : a chess board and that code is here this
23:26 : is chess board that play written in the
23:29 : play language as you can see the play
23:31 : language it looks should look very
23:33 : familiar to most developers it's sort of
23:37 : like a cross between Python and Ruby and
23:41 : JavaScript I'm using this chess font
23:44 : which you can use certain letters to
23:50 : render certain chess pieces so I think
23:54 : this is the blacks back row for example
23:56 : so lowercase T actually means this rook
24:00 : on the white background and capital J
24:03 : means this Knight
24:06 : a black background for example when you
24:08 : actually load this code and run this
24:11 : program you gonna get this timeline
24:14 : which is this scrub bar that you see
24:17 : here and now here you get three panes
24:20 : pane number one is the code a pane
24:24 : number two is the stack and pane number
24:28 : three is the heap the objects that are
24:31 : in the heap there's a lot of stuff in
24:34 : the heap at the moment and it's because
24:37 : I have implemented the virtual Diamond
24:39 : concept within this environment and the
24:43 : virtual Dom is represented using a
24:45 : combination of arrays and objects I'm
24:49 : not 100% sure that I'm going to keep
24:52 : this virtual Dom implementation so that
24:54 : might be in flux but anyway so we were
24:59 : gonna actually scrap all the way to the
25:01 : beginning I'm gonna walk through this
25:04 : code line by line right so let's do that
25:07 : so a pen to body and at this point we
25:10 : should have a table in the document body
25:13 : even though it's empty so I can use the
25:16 : real dev tools to see that and yeah
25:20 : there's the table okay and let's keep
25:25 : stepping so now we're gonna create a row
25:27 : element learning and pen that to the
25:29 : table we can't see it because the row
25:31 : element is empty here we're stepping
25:36 : through we've got nested for loop going
25:41 : from i from 0 to 7 anyway I'll just step
25:46 : through so it's doing some if statements
25:49 : but that's not hitting that's not
25:52 : hitting but this one is hitting so this
25:55 : one you can if you're wondering what
25:56 : it's doing you can like what the
25:59 : variables have it's easy because you can
26:01 : see the variables values in the frame
26:04 : right here black black back row is this
26:09 : string which contains certain characters
26:12 : that cross bond to chess pieces and J is
26:16 : 0 so index 0 of that is going
26:19 : the lowercase letter T which well that's
26:22 : what character got so that makes a lot
26:24 : of sense and we're down here and we're
26:29 : setting text of the set text we can step
26:32 : backwards by the way if I haven't
26:35 : mentioned that already so we append the
26:38 : cell to the row and then once we set the
26:40 : text to this character key we get this
26:44 : rook rendered the event handling part
26:48 : I'm still working on there's a this sort
26:52 : of a blocker I need to make closures
26:54 : work in this language it's there's a
26:58 : curious reason why it doesn't work now
27:01 : but I'm not gonna explain it this time
27:04 : maybe save that for next time okay
27:07 : so so and then if we step through it
27:12 : will render the next piece and the next
27:13 : piece and so forth and you can jump jump
27:17 : within the various places in this
27:20 : timeline because you have the ability to
27:25 : time travel and that's the reason and by
27:29 : the way just to explain briefly perhaps
27:33 : in a hand waving way what the objects in
27:37 : here represent well the ID number one so
27:42 : each object in the heap in the system
27:44 : has a numerical ID and the object with
27:49 : ID of one is actually a virtual Dom
27:52 : representation of the body and then this
27:55 : is saying well the body and then the
27:58 : body has children which references
28:01 : another object in the heap so element
28:04 : eight is this array which has empty
28:07 : string not the ID two and ID five what's
28:12 : an ID - an ID five you have to look up
28:14 : this heap for that again by jumping
28:17 : jumping to these IDs so - that's just a
28:20 : script tag not interesting ID 5 ID 5 is
28:25 : the table element and so forth so this
28:27 : virtual Dom gets synchronized with the
28:30 : real Dom
28:32 : every step as you jump back and forth
28:36 : within timeline every time you jump
28:38 : you'll zoom to a different version of
28:42 : the virtual Dom at that point in time in
28:45 : the execution of the program and then
28:48 : the debugger will take that virtual Dom
28:50 : and sort of synchronize it with the real
28:53 : time so that you can see it on the page
28:55 : so so that's where I'm at with this
28:58 : prototype there's more work to be done
29:01 : it because the very next thing is to get
29:07 : even handlers working because it without
29:09 : even handlers you can't really build
29:11 : anything interesting I can't click on
29:13 : this and get it to do interesting stuff
29:15 : I can't even build a game for example
29:17 : set so that's what I'm going to be
29:19 : working on next and I think I'm gonna
29:22 : stop the status update here I hope you
29:26 : enjoyed me sharing that with you