In the previous course section,
you learned about building custom APIs
and you also saw an example
where I provided a decoupled front end website to you,
and we connected this website
to this API by sending such JavaScript-driven HTTP requests
from inside the browser with browser-side JavaScript code.
And we learned about cores
and how we do send those requests successfully there.
Now, in that last course section,
I provided this finished front end project to you
because in the end, there is nothing new in there.
It's some basic HTML code,
basic styles and a lot of JavaScript code,
which also doesn't do anything
which we wouldn't have seen before though.
Nonetheless, if you took the time to go
through this JavaScript code,
you will see that it's quite a lot of code
with some complexity
and definitely a couple of things
that you could mess up
for a very simple result in the end.
All we're building is a basic to-dos app
and we needed a lot of code for that.
And if you recall earlier course sections,
you also might remember this tic-tac-toe game,
which was also not too fancy,
nothing too special in there,
and yet we needed to write a lot of JavaScript code
to build this user interface and this game.
And that's a general problem in modern web development.
If you're building websites
that don't have a lot of JavaScript code
in the browser, everything is fine.
But as soon as you start building
more complex user interfaces
where you use browser-side JavaScript code
for changing what's visible on the screen
for handling user input and for many other things as well,
you often end up with a lot of code
and it's, of course, super easy to forget a step there,
to introduce a tiny error,
and it's pretty hard to test this code.
I mean, this is a simple to-do app.
Imagine you're building a complex administration dashboard,
which is entirely powered by front end JavaScript code.
This could quickly become a mess.
And that's where this course section will become important
because in this course section,
I'll introduce you to frontend JavaScript frameworks,
to be precise, frontend JavaScript frameworks
that helps us with building
and managing complex web user interfaces,
which are powered by browser-side JavaScript code
so that we don't have to write all that nitty gritty code
on our own but that we can instead leverage a framework
to have an easier time building such user interfaces.
As a side note,
just as we have an easier time on the backend,
if we use a framework like Express there.
You might recall
that when we started working on the backend,
we started with just NodeJS.
Just NodeJS, no extra framework or package.
And there we then had to handle request parsing
and finding out what the path
or method of a request is on our own.
As soon as we added Express.js,
which is a backend JavaScript framework for NodeJS,
this became much easier
because Express.js helps us with the routing,
with handling requests, with parsing request bodies
and sending back responses.
And it'll be the same idea in this course section
where we will now dive into front end JavaScript frameworks
that help us with building user interfaces.
Now, therefore, in this course section,
we basically already answered the why
but I'll come back to what
and which frameworks we have there.
I'll then introduce you to the most important frameworks,
Vue, React and Angular,
and then throughout this course section,
we're going to dive into the basics of Vue.js
so that we can use this framework,
which is one of the most popular
front end user interface frameworks
to build a JavaScript-driven interface with ease.