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.