Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
What's a JavaScript framework, and how does using one help you as a developer?
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Why use the library or a framework?
0:00
Well, let's say you've decided
it's time for you cat, Chewy,
0:03
to have his own web presence.
0:06
So you build a single,
simple webpage featuring a photo and
0:08
a short biography, and call it good.
0:11
The thing is, Chewy is so
0:14
adorable that your friends start
demanding daily content about him.
0:15
So your flash out his biography and
add a few more pictures.
0:19
Still no problem.
0:22
But before you know it,
Chewy is inspiring the masses.
0:24
Your inbox is flooded with photos and
descriptions of equally inspiring cats, so
0:27
you've no choice but
to display those as well.
0:32
Soon you're maintaining a web application
with dozens, and maybe hundreds of cats.
0:35
You add some JavaScript to your website so
0:41
that people can easily click
through cat photo galleries.
0:43
A little more JavaScript so
that cats can be searched and
0:46
sorted by color, breed,
age, or fur length.
0:49
You implement a voting systems so
folks can vote up their favorite cats.
0:52
From the user's perspective,
toallysanecatlady.io looks amazing.
0:57
It features everything the user needs
to consume information about Chewy and
1:02
his furry contemporaries.
1:06
Under the hood however, your HTML files
are getting long and complicated.
1:09
With many lines of repeating and
unwieldy mark-up,
1:13
your JavaScript is one massive file.
1:17
And even though you've been
meticulous with your comments,
1:19
you're starting to lose
track of how it all works.
1:22
What's worse, every time you need to
change something on your website,
1:25
an option to search by meow volume for
example,
1:29
you may have to change your markup or wire
up your JavaScript for every single cat.
1:32
So then you write some JavaScript or
jQuery to help you make those changes.
1:37
This works for a while, but
1:41
soon you've got another big file of
spaghetti JavaScript to maintain as well.
1:42
Your jQuery breaks every time you
make a change to your HTML, and
1:47
the bugs take forever to find.
1:51
What a mess.
1:53
This is where a framework like
Vue.js can be a huge help.
1:55
Rather than having all of your cat
info tangled up with your HTML and
1:59
glued together with random bits of
JavaScript, Vue and other frameworks help
2:03
you organize and separate the different
parts of your code in a logical manner.
2:07
Vue helps you separate your application's
data, all of the info about your cats,
2:12
from the View, what the user sees when
they're interacting with your app.
2:17
It also provides better
separation from the View logic.
2:22
Essentially, the rules of where, when,
and how that information is displayed.
2:26
Vue enables you to define behavior and
2:30
connect data to a template that
is used to render your view.
2:33
Anytime you're data changes, Vue
automatically updates your views for you.
2:37
And as users interact with your views,
Vue handles those events and
2:42
calls the methods that you've defined for
those behaviors.
2:46
Libraries and
frameworks do much more than that.
2:50
They abstract away many common and
2:53
tedious tasks, provide time and
clutter saving shortcuts, and
2:55
allow you to harness the power of
tried-and-true software design patterns.
2:59
A phrase you'll hear a lot in web
development is that there's no sense in
3:03
reinventing the wheel.
3:06
All of this will make more sense
as we progress through the course.
3:08
But for now, rest assured that Vue and
other frameworks are designed to help you
3:11
write cleaner, more compact,
and easier to maintain code.
3:16
Are you ready?
3:19
Fire up your favorite text editor and
let's learn some Vue.js.
3:20
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up