FasterJS

Although it's good to go, but we missed some basic setup to move on.

Firstly, the routing system is, by default, hash mode. If you want to change it to history mode, it'll be like this way:

Good to know: ordering codes is not an important matter, but it's desirable to do for a clean code.
Although it, FasterJs.init(); should be in last!

Then, we have to set basePathName, it refers to an absolute path source of your website. If it's in root, set it to / (this is default value, anyway). It'll be like this way:

Good to know: ordering codes is not an important matter, but it's desirable to do for a clean code.
Although it, FasterJs.init(); should be in last after all.

Slashes around the path above are IMPORTANT TO ASSIGN!

Then, we have to register two things: routeMap and routeMethod. To understand its concept, let's have a look at this scenario:

Assuming we have this URL requested: https://www.example.com/subfolder/

/subfolder/ is came from the FasterJs.config.basePathName that we'd set above. Remember that point.

In hash routing mode, FasterJS will inject #! delimiter before routes. This is related with baseRoute option. We're going to talk about it in a while.

Nothing will be injected in history mode.

In FasterJS, the / route is predefined with index() blank method. You can override it.

Routinely, FasterJS will check up if the / route is registered. If it is, it'll fire the index() method. It'll be like this way:

Here, we have to override the index method using registerMethods method in router config. It'll be like this way:

The formula of registerMethods() is an object list with key-value pairs. The key is the path route preceded with /, and value is the function to trigger, having FasterCore parameter.

The parameter FasterCore represents an object contains:
{
    view: FasterJs.view(selector),
    goTo: FasterJs.goTo(route),
    route: { ... },
    currentRoute: '...',
}

We're going to talk about this parameter in a while. Don't worry about that.

Now, the result would be like this way:

Let's have a look at registerMaps() method in router config with this example like this way:

The formula of registerMaps() is an object list with key-value pairs. The key is the route path preceded with /, and value is the name of the function to trigger.

All registered routes MUST be preceded by / slash.

With this new routes that are defined above, let's register their methods. It'll be like this way:

And so on ...

Good to know: If you have two or more routes and you want to trigger one method, you can handle this issue using pipeline character ( | ) like this way:

In hash routing mode only, you can define baseRoute option in router config, the default value is /. To understand its concept, let's have a look at this scenario:

When you navigate to the website and the URL does not have #!, delimiter, FasterJS will redirect to baseRoute route. If the requested URL has #!, then baseRoute will not effect. It'll be like this way:

This idea helps us to redirect the user to a different route either than the index route, like: special offer route page, limited time offer route page, ...

Programmatically, if you need to know the current route, you can use currentRoute property in FasterCore parameter. It'll be like this way:

Also, if you want to navigate to another route, you can use goTo() method in FasterCore parameter. It'll be like this way:

This will update the URL and navigate to the desired route path, exactly like when the user manually he does when normal surfing your website.

In another hand, if the user reaches a URL with a route that is not registered yet, FasterJS will trigger a fallback error.

FasterJS has 4 fallbacks:

1. noRoutesMap
2. noRoutesMethods
3. routeMapNotFound
4. routeMethodNotFound

Fallback system in FasterJS will not suspend your website or stop running it, but it'll print an error in Console Panel in the browser. It'll be like this way:

Guess what? Instead of waiting for the fallback error to be printed in the Console Panel, you can show up a specific page that's fully customized by you and no error will be printed in Console Panel! Here is how to do this:

1. Create an element inside [data-faster-app] with this attribute [data-faster-fallback]. Recently, I've suggested to you that it would be a <section> element.
2. Attach this extra attribute [data-faster-fallback-type] to the element with one of the fallbacks above.

It'll be like this way:

Pretty cool! :-)