"CSS Layout Basics" was retired on July 12, 2021. You are now viewing the recommended replacement.
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