Routing and pushState

[00:00:00]
>> The next thing I can talk a little bit about is maybe how you can do routing both on the server level and on the front end. So on the server, routing is pretty straightforward. You can use a package like express or happy that provide their own routing system.

[00:00:19]
You can roll your own, which is what I prefer to do with something like the routes package. So if you require routes, then you get a little router that you can add routes to, so like router.addRoute/. And you can pass in whatever variables you want which is pretty handy I think.

[00:00:43]
So maybe if you have a route called user/:name, then I'll just print out what the name is, And your new line. And then to wire up this router, what you can do is you can just call router.match with the req., here's another trick that you can do as well.

[00:01:03]
If you want HTTP verbs, you can put them in the route strings. So if I wanna match on gets, then I can use the request method. But when I provide some data to the router, request method plus space plus the request URL. And then if there is a match, m is gonna be defined and the function that you've declared right here is gonna be set.

[00:01:31]
So you can pass in whatever variables you like, so I'll pass just in the m object because it's pretty simple. Otherwise, we can let ecstatic handle the rest. So if I run our server again, it's the same server that was just hosting WebSockets a minute ago. If I go to localhost:5000, I get the the source code in index HTML.

[00:01:53]
But if I go to /user/substack, I get a message name=substack. So that's a really, really simple way to do routing in pretty much whatever HTTP server you happen to be running, but the core server works just fine. Another nice thing that you can do is you can use that library in the browser just as well, because it's a really simple library.

[00:02:19]
It only deals with native JavaScripts, doesn't do anything like talking to the file system or anything like that. So it works in in the browser just fine as well. If you do put a router in the browser, it's a good idea to use this API called history.pushState. And that lets you update the URL of the page without actually navigating to that URL.

[00:02:49]
So you can, whatever you like in the URL bar, and it's gonna look like you're navigating around, but it's gonna be much faster behind the scenes. You've probably all used websites that use that API, and it's not even obvious when it's happening.
>> What's that called again?
>> It's called pushState, like this, history.pushState, yep.

[00:03:13]
Another trick for routing in the browser is to, you can register in a global event emitter hook on window for click events. And this thing is gonna be defined called ev.target on the event object, and someone clicks a link, that's gonna be an A tag. And if ref is defined, then they would have gone somewhere else.

[00:03:37]
So you can kind of intercept these links. And if you can determine that that URL is either local to your application, or maybe you also have your router here, so you could do router.match to see if there's a match with that URL on your web service. If there is one, you can call ev.preventDefault to sort of stop the default behavior from happening.

[00:04:03]
And then you can render, you could just call pushState and you could update your browser code to make it pretty slick. It's gonna look like you're navigating around but you don't have to necessarily do all of these round trips to a server. So on a slow connection, that's gonna be a lot better of a technique to use.