1
00:00:00,780 --> 00:00:02,330
Okay, now that we have this thing up and

2
00:00:02,330 --> 00:00:04,420
running, let's take a couple of minutes

3
00:00:04,420 --> 00:00:06,150
and look at how we would deal with this

4
00:00:06,150 --> 00:00:10,090
situation before modules and what problems

5
00:00:10,090 --> 00:00:12,860
modules are actually trying to solve. So,

6
00:00:12,860 --> 00:00:15,335
if you come out to this Globomantics

7
00:00:15,335 --> 00:00:17,170
website that we have up and running and we

8
00:00:17,170 --> 00:00:19,404
go to the code back behind it, let's go

9
00:00:19,404 --> 00:00:24,710
into public, and then index.html. Now in

10
00:00:24,710 --> 00:00:27,120
here if we scroll way down towards the

11
00:00:27,120 --> 00:00:30,020
bottom where our JavaScript is, you're

12
00:00:30,020 --> 00:00:32,260
going to see, let's slide this over,

13
00:00:32,260 --> 00:00:36,110
you're going to see a lot of code. So

14
00:00:36,110 --> 00:00:41,365
we've got sessionTemplate that has a whole

15
00:00:41,365 --> 00:00:43,330
template for returning a session. You have

16
00:00:43,330 --> 00:00:45,330
this render function, you've got our data

17
00:00:45,330 --> 00:00:48,730
items right there. All of this code is

18
00:00:48,730 --> 00:00:52,800
sitting in this index.html, and its sole

19
00:00:52,800 --> 00:00:56,760
purpose is to populate these items right

20
00:00:56,760 --> 00:01:00,310
here, and that data is coming out of this

21
00:01:00,310 --> 00:01:03,340
sessions.json file. If we look in there,

22
00:01:03,340 --> 00:01:06,940
you'll see those three items. Okay, now we

23
00:01:06,940 --> 00:01:09,330
know for sure we don't want all of this

24
00:01:09,330 --> 00:01:14,480
code sitting in our index.html, and so

25
00:01:14,480 --> 00:01:16,410
typically what we would do is we'd come in

26
00:01:16,410 --> 00:01:19,300
here into JavaScript, our js folder,

27
00:01:19,300 --> 00:01:23,510
create a new file, and call it app.js.

28
00:01:23,510 --> 00:01:25,390
Then we come back over to index and we

29
00:01:25,390 --> 00:01:29,540
scroll up to this script tag right here to

30
00:01:29,540 --> 00:01:33,440
our getSessions, scroll all the way down

31
00:01:33,440 --> 00:01:40,150
to the getSessions, we'll cut that, clean

32
00:01:40,150 --> 00:01:43,020
it up just a little bit. This chunk of

33
00:01:43,020 --> 00:01:45,500
code right here is for the hamburger menu

34
00:01:45,500 --> 00:01:46,920
and we don't want to mess with that, so

35
00:01:46,920 --> 00:01:49,260
we'll just leave that there. We'll save

36
00:01:49,260 --> 00:01:52,800
that. And then in app.js, we'll drop all

37
00:01:52,800 --> 00:01:56,190
that code in. Save it, come back over to

38
00:01:56,190 --> 00:01:59,490
index.html, and we add a script tag,

39
00:01:59,490 --> 00:02:03,170
script src app.js, let's add the js in

40
00:02:03,170 --> 00:02:06,970
front of it. Now if we save that and go

41
00:02:06,970 --> 00:02:11,865
back over to our window, we refresh, and

42
00:02:11,865 --> 00:02:14,660
notice it still works. Now, just in case

43
00:02:14,660 --> 00:02:17,830
we go to inspect just to make sure it's

44
00:02:17,830 --> 00:02:20,500
working right, and now if we look down

45
00:02:20,500 --> 00:02:26,270
here, there's our script, app.js. If we go

46
00:02:26,270 --> 00:02:28,960
to Sources in js, you see now we have our

47
00:02:28,960 --> 00:02:33,080
app.js. So, that worked. But it still has

48
00:02:33,080 --> 00:02:36,640
a problem because everything's available

49
00:02:36,640 --> 00:02:40,120
still at the top level, and we can see

50
00:02:40,120 --> 00:02:44,570
that. If we come back over here and we

51
00:02:44,570 --> 00:02:50,210
scroll down to this script tag here. If I

52
00:02:50,210 --> 00:02:56,380
just say console.log data.listItems, which

53
00:02:56,380 --> 00:03:00,410
is where we're storing all of that session

54
00:03:00,410 --> 00:03:02,940
information when we get it back from our

55
00:03:02,940 --> 00:03:06,080
sessions.json file, we still have access

56
00:03:06,080 --> 00:03:08,830
to this data object even though it's not

57
00:03:08,830 --> 00:03:11,870
in index.html. Check this out. I'll keep

58
00:03:11,870 --> 00:03:14,247
my console open, I'll refresh my page, and

59
00:03:14,247 --> 00:03:18,530
look, I have this empty array. And the

60
00:03:18,530 --> 00:03:20,180
reason it's empty is because it gets

61
00:03:20,180 --> 00:03:21,930
loaded here in a minute. So, actually, if

62
00:03:21,930 --> 00:03:28,910
we just wrap this in a setTimeout and just

63
00:03:28,910 --> 00:03:31,350
wait a second before I run that

64
00:03:31,350 --> 00:03:37,450
console.log and I refresh, now you'll see,

65
00:03:37,450 --> 00:03:42,110
look, there's all my stuff. So that's not

66
00:03:42,110 --> 00:03:45,120
a really good idea. I don't want to expose

67
00:03:45,120 --> 00:03:47,690
all of my JavaScript up to the parent

68
00:03:47,690 --> 00:03:51,100
level, so it's not good enough just to

69
00:03:51,100 --> 00:03:53,280
pull everything out into a separate

70
00:03:53,280 --> 00:03:57,010
JavaScript file. So what we would do then,

71
00:03:57,010 --> 00:03:59,780
is we'd come into our app.js and we'd wrap

72
00:03:59,780 --> 00:04:03,109
this in what we call an IIFE. And now an

73
00:04:03,109 --> 00:04:06,550
IFFE is an immediately invoked function

74
00:04:06,550 --> 00:04:13,080
expression. And what it looks like is

75
00:04:13,080 --> 00:04:20,240
that. And so we say this is a function, we

76
00:04:20,240 --> 00:04:27,790
take all of our code, and we drop it

77
00:04:27,790 --> 00:04:32,200
inside. And now what's going to happen is

78
00:04:32,200 --> 00:04:35,070
when app.js gets called, it's going to run

79
00:04:35,070 --> 00:04:37,240
this code and it's not going to share

80
00:04:37,240 --> 00:04:40,320
anything outside of its scope. So if I

81
00:04:40,320 --> 00:04:43,280
save that, come back over here and

82
00:04:43,280 --> 00:04:46,820
refresh, now you see it still worked, but

83
00:04:46,820 --> 00:04:48,580
notice it blew up because data is not

84
00:04:48,580 --> 00:04:54,240
defined. So that's good. We're protecting

85
00:04:54,240 --> 00:04:58,130
things from the global scope and we're

86
00:04:58,130 --> 00:05:00,737
hiding things from index.html. So

87
00:05:00,737 --> 00:05:03,990
index.html is all nice and clean, but you

88
00:05:03,990 --> 00:05:08,360
you have this weird, funky IIFE grossness,

89
00:05:08,360 --> 00:05:11,490
and it's not really easy to surface things

90
00:05:11,490 --> 00:05:13,280
back up to the global scope that we can

91
00:05:13,280 --> 00:05:18,490
share back with index.html, and we want a

92
00:05:18,490 --> 00:05:21,110
way to clean that up and make that nice,

93
00:05:21,110 --> 00:05:23,100
and that's where modules come in and

94
00:05:23,100 --> 00:05:25,260
that's where modules will make our lives a

95
00:05:25,260 --> 00:05:27,910
lot easier. And so what we're going to do

96
00:05:27,910 --> 00:05:29,440
over the course of the rest of this course

97
00:05:29,440 --> 00:05:32,070
is we're going to talk about how modules

98
00:05:32,070 --> 00:05:34,070
are going to give us the ability to take

99
00:05:34,070 --> 00:05:38,140
this code and partition it out somewhere

100
00:05:38,140 --> 00:05:41,340
and share pieces of it back and forth

101
00:05:41,340 --> 00:05:43,510
across either other modules or back up

102
00:05:43,510 --> 00:05:49,000
into our index and make our code a lot cleaner and easier to follow.

