1
00:00:02,220 --> 00:00:04,059
Now which problems do we have

2
00:00:04,059 --> 00:00:06,590
in this demo project?

3
00:00:06,590 --> 00:00:10,380
The biggest problem can be seen here in the blog.js file

4
00:00:10,380 --> 00:00:11,920
in the routes folder.

5
00:00:11,920 --> 00:00:15,830
This is a huge code file with lots of code in there,

6
00:00:15,830 --> 00:00:17,860
and the code that we have in there,

7
00:00:17,860 --> 00:00:20,830
does pretty different things.

8
00:00:20,830 --> 00:00:24,430
We got routes that are dealing with user authentication,

9
00:00:24,430 --> 00:00:27,450
and we got routes that deal with blog posts.

10
00:00:27,450 --> 00:00:31,290
And these are two tasks which are not directly related.

11
00:00:31,290 --> 00:00:33,180
Of course, you have to be authenticated

12
00:00:33,180 --> 00:00:34,620
to create blog posts,

13
00:00:34,620 --> 00:00:36,880
but that's the only connection.

14
00:00:36,880 --> 00:00:40,123
Other than that, these are totally different tasks.

15
00:00:41,950 --> 00:00:44,670
Now, of course, this file is still

16
00:00:44,670 --> 00:00:47,720
relatively easy to digest and manage,

17
00:00:47,720 --> 00:00:50,520
but if you come back to this website

18
00:00:50,520 --> 00:00:52,970
after three or four weeks,

19
00:00:52,970 --> 00:00:54,510
it will take a couple of minutes

20
00:00:54,510 --> 00:00:56,810
until you understand this file again.

21
00:00:56,810 --> 00:00:59,340
And if you're looking for a specific route,

22
00:00:59,340 --> 00:01:03,130
let's say the post route for editing posts,

23
00:01:03,130 --> 00:01:06,200
you have to search a bit until you find it.

24
00:01:06,200 --> 00:01:08,550
It's all not horrible, don't get me wrong,

25
00:01:08,550 --> 00:01:11,730
but these are still things that can add up

26
00:01:11,730 --> 00:01:13,920
the bigger your website gets.

27
00:01:13,920 --> 00:01:15,770
And if you're working in a team,

28
00:01:15,770 --> 00:01:18,920
or if you're taking pauses whilst working on a project,

29
00:01:18,920 --> 00:01:23,223
it can get pretty hard to manage such code basis over time.

30
00:01:25,080 --> 00:01:26,820
Now, in the views,

31
00:01:26,820 --> 00:01:30,740
we actually already are using a feature called Includes,

32
00:01:30,740 --> 00:01:34,630
to extract certain common HTML snippets,

33
00:01:34,630 --> 00:01:37,380
and reuse them in different views.

34
00:01:37,380 --> 00:01:38,690
Like the post-form,

35
00:01:38,690 --> 00:01:41,720
which I'm using in both the admin view here,

36
00:01:41,720 --> 00:01:43,250
I'm including it here.

37
00:01:43,250 --> 00:01:47,920
And in a single post view, I'm including it here as well.

38
00:01:47,920 --> 00:01:52,430
So there, we already are splitting up our bigger code files

39
00:01:52,430 --> 00:01:56,600
into smaller ones, to make these code files more manageable,

40
00:01:56,600 --> 00:02:00,830
and of course, to avoid unnecessary copy and pasting.

41
00:02:00,830 --> 00:02:03,600
If we have the same code for the same form

42
00:02:03,600 --> 00:02:05,010
in multiple views,

43
00:02:05,010 --> 00:02:09,560
extracting it into such a include, simply saves us time.

44
00:02:09,560 --> 00:02:12,190
If I ever want to edit this form now,

45
00:02:12,190 --> 00:02:14,080
I only have to do it in one place

46
00:02:14,080 --> 00:02:16,243
instead of two or more places.

47
00:02:17,100 --> 00:02:18,660
So here in the templates,

48
00:02:18,660 --> 00:02:21,250
we are already using some Includes.

49
00:02:21,250 --> 00:02:23,731
And of course, you might be able to find more

50
00:02:23,731 --> 00:02:26,090
extractable snippets in there.

51
00:02:26,090 --> 00:02:28,380
I didn't want to overdo it here,

52
00:02:28,380 --> 00:02:32,110
to still make it fairly easy to understand this project

53
00:02:32,110 --> 00:02:33,593
and this approach.

54
00:02:34,490 --> 00:02:36,770
But we are splitting our code here.

55
00:02:36,770 --> 00:02:39,333
We're not splitting it in the routes file.

56
00:02:40,170 --> 00:02:43,660
And the app.js file also grew quite a bit.

57
00:02:43,660 --> 00:02:46,670
It's not that large, it's still okay,

58
00:02:46,670 --> 00:02:49,960
but we're doing very different things in there as well.

59
00:02:49,960 --> 00:02:53,870
And the more custom middleware we add and so on,

60
00:02:53,870 --> 00:02:57,510
the more difficult it will get to keep that file

61
00:02:57,510 --> 00:02:59,330
maintainable as well.

62
00:02:59,330 --> 00:03:03,930
And these are things we want to fix as a developer.

63
00:03:03,930 --> 00:03:06,500
We wanna keep our code maintainable

64
00:03:06,500 --> 00:03:09,210
and not work with large code files

65
00:03:09,210 --> 00:03:10,993
as we're doing it at the moment.

66
00:03:12,130 --> 00:03:14,010
Instead, as a developer,

67
00:03:14,010 --> 00:03:15,660
no matter if you're a web developer,

68
00:03:15,660 --> 00:03:18,190
or any other kind of developer,

69
00:03:18,190 --> 00:03:22,120
it's typically a good idea to split your large code files

70
00:03:22,120 --> 00:03:24,790
into smaller code files.

71
00:03:24,790 --> 00:03:27,040
And of course, don't split them randomly

72
00:03:27,040 --> 00:03:29,240
by just taking a bunch of lines

73
00:03:29,240 --> 00:03:31,340
and putting that into a separate file.

74
00:03:31,340 --> 00:03:34,740
But instead split your code files by logic.

75
00:03:34,740 --> 00:03:35,573
For example,

76
00:03:35,573 --> 00:03:39,080
we could break up this blog.js routes file here,

77
00:03:39,080 --> 00:03:42,310
by splitting it into two routes files,

78
00:03:42,310 --> 00:03:45,320
one for the authentication related routes,

79
00:03:45,320 --> 00:03:48,640
and one for the post related routes.

80
00:03:48,640 --> 00:03:51,820
We then might be able to extract more logic

81
00:03:51,820 --> 00:03:54,719
from these files, but we'll get there step-by-step

82
00:03:54,719 --> 00:03:56,433
throughout this section.

83
00:03:57,510 --> 00:04:01,550
Now, the process I'm describing here is called refactoring.

84
00:04:01,550 --> 00:04:03,320
We have a certain code base,

85
00:04:03,320 --> 00:04:07,480
and now we're going to rewrite this code a little bit.

86
00:04:07,480 --> 00:04:09,330
We're going to move code around.

87
00:04:09,330 --> 00:04:13,070
We're going to split code files into smaller code files.

88
00:04:13,070 --> 00:04:16,170
And to a lot of newcomer developers,

89
00:04:16,170 --> 00:04:19,519
this refactoring process looks very scary,

90
00:04:19,519 --> 00:04:21,779
because you're moving around a lot of code.

91
00:04:21,779 --> 00:04:24,410
And I know from my other course is that,

92
00:04:24,410 --> 00:04:26,740
a lot of students don't like this.

93
00:04:26,740 --> 00:04:28,510
Well, as it turns out,

94
00:04:28,510 --> 00:04:31,070
if you're serious about becoming a developer,

95
00:04:31,070 --> 00:04:33,680
you need to know how to refactor,

96
00:04:33,680 --> 00:04:36,190
because you'll do it all the time. Believe me.

97
00:04:36,190 --> 00:04:38,250
You're going to do it in existing projects

98
00:04:38,250 --> 00:04:39,600
you're dropped into,

99
00:04:39,600 --> 00:04:42,750
but you're also going to do it on your own projects,

100
00:04:42,750 --> 00:04:46,600
because it's very common that you just start writing code.

101
00:04:46,600 --> 00:04:48,220
Then your code files grow,

102
00:04:48,220 --> 00:04:51,650
and to keep them maintainable again, you then split them up.

103
00:04:51,650 --> 00:04:53,750
So it's a super important process.

104
00:04:53,750 --> 00:04:55,040
And in this course section,

105
00:04:55,040 --> 00:04:56,940
we're going to go through it together.