1
00:00:00,025 --> 00:00:06,849
[SOUND] Hello I'm Craig and
I'm a developer.

2
00:00:06,849 --> 00:00:10,731
In this workshop we're gonna explore
the extremely popular design pattern,

3
00:00:10,731 --> 00:00:11,870
Observer.

4
00:00:11,870 --> 00:00:13,985
We'll explore what makes the pattern so
popular and

5
00:00:13,985 --> 00:00:18,410
we'll also walk through the why,
the how, and the when you should use it.

6
00:00:18,410 --> 00:00:19,220
First though,

7
00:00:19,220 --> 00:00:22,210
just want to remind you that there
are speed controls on the video player.

8
00:00:22,210 --> 00:00:25,740
Make use of those to speed me up or
slow me down to your tastes.

9
00:00:25,740 --> 00:00:28,330
Always remember to check
the teacher's notes on each video.

10
00:00:28,330 --> 00:00:30,080
I've drop some prerequisites on this one.

11
00:00:30,080 --> 00:00:30,750
So take a moment and

12
00:00:30,750 --> 00:00:33,700
make sure that we're on the same
page before we get started here.

13
00:00:33,700 --> 00:00:37,910
And finally, don't forget to hit up
the community to discuss these ideas more.

14
00:00:37,910 --> 00:00:41,460
I'm excited to take the time to walk
through the Observer pattern with you.

15
00:00:41,460 --> 00:00:43,985
It's a very powerful and
commonly used pattern.

16
00:00:43,985 --> 00:00:47,440
It's ability to make code more
extensible is what makes it so popular.

17
00:00:47,440 --> 00:00:49,970
So you'll see it used all
over the place as a solution.

18
00:00:49,970 --> 00:00:52,905
Now, I guarantee that you've
interacted with this pattern already.

19
00:00:52,905 --> 00:00:54,310
It' everywhere.

20
00:00:54,310 --> 00:00:56,910
I mean, you're literally
seeing it at play right now.

21
00:00:56,910 --> 00:00:58,870
See the timeline on this video?

22
00:00:58,870 --> 00:01:02,440
The toolbar is observing
where you are in this video.

23
00:01:02,440 --> 00:01:05,160
As you progress through this video,
it changes, right?

24
00:01:05,160 --> 00:01:09,150
It updates both the number of seconds as
well as the rendering of the progress bar.

25
00:01:10,480 --> 00:01:14,670
So in the video example, the video
itself represents the master object, or

26
00:01:14,670 --> 00:01:17,060
subject as it's often referred to.

27
00:01:17,060 --> 00:01:20,040
It's the one portion of the one-to-many.

28
00:01:20,040 --> 00:01:24,420
The many side of things, the dependent
objects or observers as they're usually

29
00:01:24,420 --> 00:01:28,710
called, those are the number of seconds
displayed and the progress bar.

30
00:01:28,710 --> 00:01:31,000
So the subject changes its state and

31
00:01:31,000 --> 00:01:34,009
its observers are notified and
update themselves accordingly.

32
00:01:35,190 --> 00:01:37,720
So with that in mind,
you can probably think

33
00:01:37,720 --> 00:01:41,300
of a couple other examples where you can
interact with this pattern at work today.

34
00:01:41,300 --> 00:01:44,430
Now, for instance,
I was just using a spreadsheet.

35
00:01:44,430 --> 00:01:47,900
When I updated the cell with my percentage
complete on a project that I'm working on,

36
00:01:47,900 --> 00:01:48,870
the graph changed.

37
00:01:48,870 --> 00:01:52,060
And so did several other fields
that were observing that value.

38
00:01:52,060 --> 00:01:55,305
Those other objects were notified
by the changes I made in my cells.

39
00:01:55,305 --> 00:01:59,830
Now the Observer pattern is at play
in the compound design pattern MVC.

40
00:01:59,830 --> 00:02:04,490
The V in MVC, or view layer,
makes heavy use of this pattern.

41
00:02:04,490 --> 00:02:06,770
The view observes the model.

42
00:02:06,770 --> 00:02:09,450
Changes to the model will notify the view.

43
00:02:09,450 --> 00:02:12,730
Now UI libraries like the ones that
you've interacted with, like JavaFX or

44
00:02:12,730 --> 00:02:17,500
Android apps, rely heavily on this pattern
to display the current state of the model.

45
00:02:17,500 --> 00:02:21,505
Now, this pattern is often referred
to as Pub/Sub which is short for

46
00:02:21,505 --> 00:02:23,070
Publish/Subscribe.

47
00:02:23,070 --> 00:02:24,870
Now this might help things stick.

48
00:02:24,870 --> 00:02:28,440
A newspaper is published and delivered
to all of it's subscribers, right?

49
00:02:28,440 --> 00:02:29,610
And that makes sense.

50
00:02:29,610 --> 00:02:31,790
You get the paper because
you have a subscription, and

51
00:02:31,790 --> 00:02:34,390
it only comes when a new
issue is published.

52
00:02:34,390 --> 00:02:36,760
All right, all right, enough analogies.

53
00:02:36,760 --> 00:02:38,760
So let's go take a quick
look at the UML so

54
00:02:38,760 --> 00:02:40,450
you can see the suggested implementation.

55
00:02:41,710 --> 00:02:44,480
So if we do a quick search for
the Observer pattern,

56
00:02:44,480 --> 00:02:49,150
we'll see here that the first
result here is from Wikipedia.

57
00:02:49,150 --> 00:02:50,400
So let's click this.

58
00:02:50,400 --> 00:02:51,280
Let's scroll down to the UML.

59
00:02:51,280 --> 00:02:52,800
I'm going to go ahead
I'm going to click this.

60
00:02:52,800 --> 00:02:55,100
It's gonna open it up and
I'm gonna zoom in on it.

61
00:02:55,100 --> 00:02:57,610
So we can take a more detailed look here.

62
00:02:57,610 --> 00:03:00,540
Okay, so we see that there's
an Observer interface, and

63
00:03:00,540 --> 00:03:03,160
it has a method called notify.

64
00:03:03,160 --> 00:03:06,090
There's several concrete
implementations here, right?

65
00:03:06,090 --> 00:03:11,990
So Concrete A and B, and they also
implement, have a method called notify.

66
00:03:11,990 --> 00:03:15,270
So there's a little diamond
here on a class called subject,

67
00:03:15,270 --> 00:03:19,020
and what that means is there's
an aggregation of these observers here and

68
00:03:19,020 --> 00:03:20,990
they're being stored in
this observer collection.

69
00:03:20,990 --> 00:03:24,270
And they get added by calling
a thing called registerObserver, and

70
00:03:24,270 --> 00:03:26,470
you pass in the observer or
unregister to remove it.

71
00:03:26,470 --> 00:03:29,790
And then there is a method
called notifyObservers, and

72
00:03:29,790 --> 00:03:31,060
this is the pseudo code here.

73
00:03:31,060 --> 00:03:34,490
Basically it says for each one of
these observers, loop through and

74
00:03:34,490 --> 00:03:36,200
call the notify method.

75
00:03:36,200 --> 00:03:39,010
So basically what this is
saying is that any object that

76
00:03:39,010 --> 00:03:42,340
implements the observer
interface can be notified.

77
00:03:43,430 --> 00:03:46,890
So, now don't worry, you'll get your
head wrapped around it here in a bit.

78
00:03:46,890 --> 00:03:50,380
Just remember that this is a suggestion
of how to implement the pattern.

79
00:03:50,380 --> 00:03:52,950
There are numerous ways of
achieving this pattern in code and

80
00:03:52,950 --> 00:03:56,120
we'll hit them up
separately here in a bit.

81
00:03:56,120 --> 00:03:58,560
Now these names aren't required,
but they are common.

82
00:03:58,560 --> 00:04:00,675
So you can start to recognize
them when you see them.

83
00:04:00,675 --> 00:04:05,350
While we're here, why don't we go get the
starter files for application installed?

84
00:04:05,350 --> 00:04:07,370
So in the teacher's notes
there's a link to a rebo.

85
00:04:07,370 --> 00:04:09,640
I went ahead and
copied that and pasted it.

86
00:04:09,640 --> 00:04:11,430
Here we are on GitHub.

87
00:04:11,430 --> 00:04:17,100
I'm gonna choose clone or download,
I'm gonna grab the URL here for SSH, and

88
00:04:17,100 --> 00:04:23,450
I'm gonna pop over to my InteliJ,
which you'll see is running 2016.2.1.

89
00:04:23,450 --> 00:04:28,128
And I'm gonna check out from
version control, use GitHub,

90
00:04:28,128 --> 00:04:31,256
I'm gonna put in the password for this.

91
00:04:35,087 --> 00:04:39,640
So I'm gonna come here and
I'm going to paste in.

92
00:04:39,640 --> 00:04:40,990
And want to choose clone.

93
00:04:44,050 --> 00:04:45,100
And it says would you like to open?

94
00:04:45,100 --> 00:04:45,790
I'm going to say yes.

95
00:04:47,200 --> 00:04:48,800
It says it's an unlinked Gradle project.

96
00:04:48,800 --> 00:04:50,842
I'm gonna say go ahead and
import the Gradle project.

97
00:04:50,842 --> 00:04:51,948
And I'm gonna click it again.

98
00:04:53,863 --> 00:04:56,687
And just click all the defaults here,
okay.

99
00:05:07,942 --> 00:05:10,671
Okay, so I've built this was
several different modules where

100
00:05:10,671 --> 00:05:13,770
we can break up the different use
cases that we're going to do.

101
00:05:13,770 --> 00:05:17,148
So go ahead and just leave all of
those checked by default and click OK.

102
00:05:20,703 --> 00:05:24,208
When you take a look here under Project,
you can see that the different ones here

103
00:05:24,208 --> 00:05:28,170
are in bold are the modules that
we'll be looking at here just a bit.

104
00:05:28,170 --> 00:05:30,840
So now that we've seen it have
a pretty basic understanding,

105
00:05:30,840 --> 00:05:32,950
what do you say we put it into practice?

106
00:05:32,950 --> 00:05:36,600
This pattern and
its usage has evolved along with Java.

107
00:05:36,600 --> 00:05:39,590
I think a good approach is to walk
through a few of the iterations

108
00:05:39,590 --> 00:05:41,520
since you'll encounter
them in your journeys.

109
00:05:41,520 --> 00:05:44,310
We'll discuss the pros and
cons of each approach.

110
00:05:44,310 --> 00:05:46,260
Let's start with
the original implementation.

111
00:05:46,260 --> 00:05:48,220
It's been around since version 1.1.

112
00:05:48,220 --> 00:05:50,570
So let's dust it off and
dive into it next.