- Before writing any code.
I want to spend a few minutes talking about our motivation
for using Vue.js and the problems that it aims to solve
as a framework for JavaScript applications.
In the days when libraries like jQuery were first
widely used, or even earlier, it was common to
write JavaScript code that looked like this.
The purpose of this function is to add an element
to the Dom or document object model.
Our in memory representation of the webpage.
In turn, updating the onscreen representation for the user.
But after the call to appendElement on the first line
this function is almost entirely concerned
with updating the rest of the UI
to make sure everything stays in a consistent state.
While we could extract some of this logic
to another reusable function, the point is
that we need to explicitly do this additional work
to keep the UI in sync, whenever we make a small change.
And the more complex the UI becomes
the more code it takes to manage all of that.
Managing complexity is something I often think about
when using Vue, the concept is self-explanatory
but I probably first came across the term
in Steve McConnell's classic book, Code Complete.
He calls it Software's Primary Technical Imperative.
If we can accept that managing complexity is at least one
of our chief concerns as web developers
whether we're talking about the code itself or just
how our software can help a user complete a complex task,
then it makes sense to use tools that are designed to manage
or reduce that complexity that go beyond what's available
out of the box.
The native Dom API that you see used here
on this MDN web docs page, was really designed
with just making dynamic updates to the Dom even possible
and not with managing the complexity that's involved
with doing that in a large application.
A better approach for our hypothetical example,
if we could achieve it somehow,
would be to set up triggers, when we initialize the app
for those cascading updates to happen automatically,
whenever we add or even remove or edit a row in our table.
Then we could just call appendElement
without having to wrap it in the function
that also handles keeping the UI in sync.
This makeSureEverythingStaysInSyncFromNowOn concept
is where frameworks like Vue.js really shine.
And it's a large part of why we use them
to build our applications.
We say that Vue is reactive.
Its easy to set things up so that the UI is kept in sync
with the underlying data,
by automatically reacting to changes in that data.
It's also progressive.
It's easy to get started with nothing more than
a script tag in order to add a small amount
of dynamic behavior to your app.
And then you can progressively add more features
and tools as needed, as your app grows
and becomes more sophisticated.
It's declarative, we can set up the relationships
and calculations required to keep our UI in sync
when our application starts
and then not have to worry about them later
when managing user interactions and other updates.
Finally, it's composable.
We'll see that you can structure your application
using Vue's component system for easier code reuse
and easier reasoning about
your applications logic and state.
In the next video, we'll jump right in and talk about
how to add Vue.js to a new or existing project.