All language subtitles for 2. What & Why

So what is routing about?

Attached you find another starting project,

which when you start the server

gives you this simple application on the screen.

This is a view app

where we have two main areas,

Teams and Users,

we can switch between them

and for every team,

we can also click View Members,

though at the moment,

nothing happens when we do that.

So that's a very simple starting application

and if we have a look at this application,

it looks like if we had two pages here, right,

two links here in the navigation,

the teams and the users link.

But what you will notice is

that when I click those links,

what we see on the screen changes,

but the URL does not change.

It's always the same URL.

And that's in the end

what routing will be about.

With View we build

JavaScript driven client side web applications.

So web applications

where what the user sees,

is entirely controlled

by JavaScript running in the browser.

That is what a View is all about.

And we're also basically building a

so called single page application,

which means we have that

one single HTML file,

which is being fetched,

and that file includes imports to the,

to the scripts to all the JavaScript code

we're writing here in the end,

not to the code we are writing here,

but to a slightly transformed

and optimized version of that code.

And the CLI is taking care of all of that

behind the scenes.

But in the end it's all that JavaScript code,

which runs in the browser,

which is responsible for what we see

on the screen here.

And that's why we call this kind of app

a single page application.

So we want to have just

one HTML file

and then our JavaScript code controlling what we see

on the screen.

But with this approach,

we have one problem,

we have the same URL

for all areas

of our page.

And that means if I would want to share

this user's page

with another user,

well I could just share this regular URL,

which in this case is just our domain name,

and then nothing.

And if you enter this

and hit Enter,

you always end up on the starting page.

So I can't share anything else

than the starting page off this application.

Because the change that happens when I click this button

is driven by JavaScript

and has nothing to do with the URL.

It just happens up on the button, click here.

And whilst this works,

and this application works,

in reality, you would want applications

powered by you

and powered by that client's JavaScript code,

which still interact with the URL

so that the URL represents

where on the page we are

and so did we got a shareable URL,

which we can share with our users,

so that I could share

a link to this Users page

with our users

of this web application.

And of course we could try to make this work

by having more than one HTML file,

and then pointing at a different HTML file here,

like users HTML.

But that's not how this will work.

This is not how you build such view applications.

If you would do that,

the script code loaded

by that extra HTML file

would be totally unrelated

to your other script code,

which is probably also not what you want.

And that's the kind of problem routing

will solve for us.

Because it turns out

that there is a tool

an extra package

which we can install,

which allows us to handle URL changes

with JavaScript in the browser,

and then load something different on the screen

in the same single page application

when that URL changes

or based on that URL.

And that same package

will also help us change the URL

when we navigate somewhere else in this application,

so that the URL reflects the place

where we are

in the app.

And that is what routing is all about

and why we might want it.

So let's now install that extra package

to get started with routing.