WEBVTT 00:01.920 --> 00:06.120 We have reached a point in the course where we need to talk about code refactoring. 00:06.400 --> 00:13.280 Code refactoring is the process of restructuring the existing code without actually changing its behavior. 00:13.280 --> 00:18.200 Which means that after we have refactored the application, it should still look and work the same. 00:18.760 --> 00:24.640 The goal of this refactoring is to improve the readability of the code, making it more maintainable 00:24.640 --> 00:26.120 but also more efficient. 00:26.160 --> 00:30.520 It's a bit of like cleaning up the clutter, making everything a bit nicer. 00:31.000 --> 00:37.440 So after creating a few features, it is not a bad idea to ask the AI to look over the code and to see 00:37.440 --> 00:39.280 if it makes sense to improve it. 00:39.680 --> 00:45.840 This tends to work great, especially if you added some rules that describe a certain style for writing 00:45.840 --> 00:46.320 code. 00:46.360 --> 00:50.200 Or if you notice that there are some problems with the code that need to be fixed. 00:50.800 --> 00:55.840 I went ahead and created an additional rule which is called comments. 00:56.080 --> 01:01.800 And here, as part of the comments, I'm just giving the instruction that I like some parts of the code 01:01.800 --> 01:07.200 to be commented And explain what that particular part of the code does. 01:07.240 --> 01:12.400 I've looked over a few places and I didn't notice any comments, so I think it would be a good idea. 01:12.400 --> 01:18.960 This is for example, here a comment, but in other parts of the code where we're seeing, for example, 01:19.000 --> 01:21.520 here the components, there are no comments written. 01:21.520 --> 01:26.680 So I would expect that there will be some comments added after this. 01:27.200 --> 01:35.480 Now, for this particular task of analyzing the code, I would consider using a reasoning model in order 01:35.520 --> 01:36.880 to enable a reasoning model. 01:36.880 --> 01:43.680 Only to do is click here on the model that we're using and make sure that this thinking is enabled. 01:43.680 --> 01:47.360 If it's not enabled, we're not going to see that particular model. 01:47.360 --> 01:51.800 But if it is enabled, then we're going to get a thinking model. 01:52.000 --> 01:54.360 This is something that I've been using all along. 01:54.520 --> 01:59.720 I think as a thinking model generally performs much better, even if it is a bit slower. 01:59.720 --> 02:05.360 So just a hint, in case you haven't been using a thinking model or reasoning model, now is a good 02:05.360 --> 02:06.320 time to do so. 02:07.240 --> 02:07.840 All right. 02:07.880 --> 02:09.640 So I prepared here a simple prompt. 02:10.000 --> 02:11.000 It's very basic. 02:11.040 --> 02:12.800 It can get a bit bigger. 02:12.800 --> 02:19.480 But essentially it's requesting the AI to analyze the code base, identify any issues and keep everything 02:19.480 --> 02:20.560 working as it is. 02:20.760 --> 02:23.000 And it should follow some principles. 02:23.560 --> 02:27.800 And apart from this it's also referring here these rules. 02:28.080 --> 02:31.840 So I'm just interested to see how this is working. 02:32.600 --> 02:34.240 I'm going to see here somewhere in the logs. 02:34.240 --> 02:37.400 It has also identified here the comments rule. 02:38.280 --> 02:40.800 And it's going to take those into account as well. 02:41.000 --> 02:48.000 So this is just a way to ensure that this particular rule is also being considered for the refactoring. 02:49.240 --> 02:52.520 So we have some changes here that are being executed. 02:54.360 --> 02:57.720 And you can also see here comments popping up. 03:00.280 --> 03:02.000 And now we're going to see here at the end. 03:02.520 --> 03:07.200 The end to end tests are being executed to confirm that the application is working working properly. 03:07.760 --> 03:09.720 And we can see it's actually not working properly. 03:09.720 --> 03:11.210 There's a problem with application. 03:11.210 --> 03:12.410 Good that we have tests. 03:12.770 --> 03:18.970 And now the AI is looking at these results and it's going to say oh something has happened there. 03:19.130 --> 03:21.250 I need to go ahead and fix those issues. 03:21.890 --> 03:23.090 So oopsie. 03:24.370 --> 03:25.730 The tests are still failing. 03:26.970 --> 03:31.250 Probably needs another try to get this to work properly. 03:32.530 --> 03:40.050 So I think it's kind of like out of ideas because it's asking us to restart the development server to 03:40.090 --> 03:43.050 just to make sure that it's working properly. 03:43.810 --> 03:50.170 So we can go ahead and do that, of course, and also go ahead and close some of the tabs that we have 03:50.210 --> 03:50.770 here. 03:51.610 --> 03:54.850 Seems that doesn't know exactly what to do next. 03:54.890 --> 03:57.850 So this is the logs for the application. 03:57.850 --> 03:59.130 This is the server running. 03:59.130 --> 04:02.330 So this is the first application that we have on this specific port. 04:03.010 --> 04:06.650 So what the AI is asking us to do is to stop this application. 04:06.650 --> 04:12.570 If you want to stop this server we're going to press control C regardless of the operating system. 04:13.050 --> 04:21.530 And now what we'll need to do is run this command again to start it, which is npm run dev. 04:21.930 --> 04:23.730 So this is going to restart the server. 04:24.050 --> 04:26.210 I'm going to check if the port is still the same one. 04:26.210 --> 04:28.330 So 5173. 04:29.170 --> 04:31.170 We have here 5173. 04:32.570 --> 04:34.850 From what I can tell it's working properly. 04:35.730 --> 04:39.090 So I can go back and report. 04:40.450 --> 04:45.450 Now it's trying to figure out how to get the end to end test to run as well. 04:45.930 --> 04:52.410 So during such refactorings is not a big surprise that sometimes tests may fail either for a good reason 04:52.410 --> 04:55.050 or because the tests need to be updated as well. 04:55.450 --> 04:57.970 So now, luckily the tests are passing as well. 04:58.490 --> 05:03.650 We can also take a look here and see if the application is still working properly. 05:04.090 --> 05:10.490 After such a refactoring is not a bad idea to do a manual test just to ensure that everything is working 05:10.490 --> 05:10.890 well. 05:11.330 --> 05:14.050 So I'm gonna add all these changes that have been made. 05:14.050 --> 05:16.890 So you can see here a lot of files have been changed. 05:17.210 --> 05:20.010 You can also take a look and see exactly what has happened. 05:20.050 --> 05:23.290 So we have here, for example, the home page. 05:24.130 --> 05:27.450 There are a lot of changes here, so I'm going to accept them first. 05:28.210 --> 05:29.410 I'll accept all these changes. 05:29.410 --> 05:33.250 And we can also take a look here for example in Source Components. 05:33.770 --> 05:36.290 And what we're going to see here are comments. 05:36.290 --> 05:38.770 So this is exactly what we have requested here. 05:38.770 --> 05:41.370 In terms of comments I'm going to click here on Accept All. 05:41.930 --> 05:48.330 And these are the comments that are coming because of this particular rule that we have made here. 05:48.890 --> 05:51.210 So we're going to say okay we agree with these changes. 05:51.210 --> 05:52.050 They are fine with us. 05:52.050 --> 05:54.930 I just wanted to show you the process of doing this. 05:55.370 --> 06:00.850 It's probably also not a bad idea to do like one type of change at the time, especially if you know 06:00.850 --> 06:01.610 what you're doing. 06:01.850 --> 06:08.530 Otherwise, of course, you can also rely on the agent itself, using a powerful thinking model reasoning 06:08.530 --> 06:13.210 model to figure out what are the problems with the code base and to fix them. 06:14.010 --> 06:18.010 So yeah, this is code refactoring using cursor.