1
00:00:00,340 --> 00:00:02,320
Why use the library or a framework?

2
00:00:03,410 --> 00:00:06,370
Well, let's say you've decided
it's time for you cat, Chewy,

3
00:00:06,370 --> 00:00:08,500
to have his own web presence.

4
00:00:08,500 --> 00:00:11,470
So you build a single,
simple webpage featuring a photo and

5
00:00:11,470 --> 00:00:14,120
a short biography, and call it good.

6
00:00:14,120 --> 00:00:15,820
The thing is, Chewy is so

7
00:00:15,820 --> 00:00:19,470
adorable that your friends start
demanding daily content about him.

8
00:00:19,470 --> 00:00:22,770
So your flash out his biography and
add a few more pictures.

9
00:00:22,770 --> 00:00:24,400
Still no problem.

10
00:00:24,400 --> 00:00:27,890
But before you know it,
Chewy is inspiring the masses.

11
00:00:27,890 --> 00:00:32,750
Your inbox is flooded with photos and
descriptions of equally inspiring cats, so

12
00:00:32,750 --> 00:00:34,780
you've no choice but
to display those as well.

13
00:00:35,800 --> 00:00:39,641
Soon you're maintaining a web application
with dozens, and maybe hundreds of cats.

14
00:00:41,150 --> 00:00:43,130
You add some JavaScript to your website so

15
00:00:43,130 --> 00:00:46,670
that people can easily click
through cat photo galleries.

16
00:00:46,670 --> 00:00:49,350
A little more JavaScript so
that cats can be searched and

17
00:00:49,350 --> 00:00:52,898
sorted by color, breed,
age, or fur length.

18
00:00:52,898 --> 00:00:56,200
You implement a voting systems so
folks can vote up their favorite cats.

19
00:00:57,250 --> 00:01:02,760
From the user's perspective,
toallysanecatlady.io looks amazing.

20
00:01:02,760 --> 00:01:06,750
It features everything the user needs
to consume information about Chewy and

21
00:01:06,750 --> 00:01:08,160
his furry contemporaries.

22
00:01:09,270 --> 00:01:13,809
Under the hood however, your HTML files
are getting long and complicated.

23
00:01:13,809 --> 00:01:17,251
With many lines of repeating and
unwieldy mark-up,

24
00:01:17,251 --> 00:01:19,707
your JavaScript is one massive file.

25
00:01:19,707 --> 00:01:22,205
And even though you've been
meticulous with your comments,

26
00:01:22,205 --> 00:01:25,210
you're starting to lose
track of how it all works.

27
00:01:25,210 --> 00:01:29,040
What's worse, every time you need to
change something on your website,

28
00:01:29,040 --> 00:01:32,180
an option to search by meow volume for
example,

29
00:01:32,180 --> 00:01:37,320
you may have to change your markup or wire
up your JavaScript for every single cat.

30
00:01:37,320 --> 00:01:41,400
So then you write some JavaScript or
jQuery to help you make those changes.

31
00:01:41,400 --> 00:01:42,990
This works for a while, but

32
00:01:42,990 --> 00:01:47,950
soon you've got another big file of
spaghetti JavaScript to maintain as well.

33
00:01:47,950 --> 00:01:51,730
Your jQuery breaks every time you
make a change to your HTML, and

34
00:01:51,730 --> 00:01:53,750
the bugs take forever to find.

35
00:01:53,750 --> 00:01:55,550
What a mess.

36
00:01:55,550 --> 00:01:59,430
This is where a framework like
Vue.js can be a huge help.

37
00:01:59,430 --> 00:02:03,090
Rather than having all of your cat
info tangled up with your HTML and

38
00:02:03,090 --> 00:02:07,660
glued together with random bits of
JavaScript, Vue and other frameworks help

39
00:02:07,660 --> 00:02:11,530
you organize and separate the different
parts of your code in a logical manner.

40
00:02:12,690 --> 00:02:17,590
Vue helps you separate your application's
data, all of the info about your cats,

41
00:02:17,590 --> 00:02:21,300
from the View, what the user sees when
they're interacting with your app.

42
00:02:22,310 --> 00:02:26,030
It also provides better
separation from the View logic.

43
00:02:26,030 --> 00:02:29,890
Essentially, the rules of where, when,
and how that information is displayed.

44
00:02:30,950 --> 00:02:33,050
Vue enables you to define behavior and

45
00:02:33,050 --> 00:02:37,210
connect data to a template that
is used to render your view.

46
00:02:37,210 --> 00:02:42,190
Anytime you're data changes, Vue
automatically updates your views for you.

47
00:02:42,190 --> 00:02:46,420
And as users interact with your views,
Vue handles those events and

48
00:02:46,420 --> 00:02:49,230
calls the methods that you've defined for
those behaviors.

49
00:02:50,720 --> 00:02:53,500
Libraries and
frameworks do much more than that.

50
00:02:53,500 --> 00:02:55,450
They abstract away many common and

51
00:02:55,450 --> 00:02:59,580
tedious tasks, provide time and
clutter saving shortcuts, and

52
00:02:59,580 --> 00:03:03,760
allow you to harness the power of
tried-and-true software design patterns.

53
00:03:03,760 --> 00:03:06,870
A phrase you'll hear a lot in web
development is that there's no sense in

54
00:03:06,870 --> 00:03:08,680
reinventing the wheel.

55
00:03:08,680 --> 00:03:11,982
All of this will make more sense
as we progress through the course.

56
00:03:11,982 --> 00:03:16,370
But for now, rest assured that Vue and
other frameworks are designed to help you

57
00:03:16,370 --> 00:03:19,792
write cleaner, more compact,
and easier to maintain code.

58
00:03:19,792 --> 00:03:20,871
Are you ready?

59
00:03:20,871 --> 00:03:24,731
Fire up your favorite text editor and
let's learn some Vue.js.