Routing

Change between views with ease

The router provided by WebLabs is primitive and cannot be used for complex cases. The router is sufficient for small and simple projects, but it does not support the following features:

• Regex routes

• Fallback routes

• Error routes

• Nested routes

We will be introducing more advanced tools with upcoming lnteract Library.

Introduction

Routing is important for apps because we cannot just have all our data in one page, and different pages helps in organizing content is a well manner, but weblabs being a client side framework as of now, it is a bit tough to implement routing.

Since routing is indeed an important aspect of an application, weblabs decided to create an efficient router beforehand because web developers should use their time on building UI and logic and not something that was left behind by the framework developer.

We will learn this by example, so let's establish some basic pointers

Home Page

Here we will show some basic stuff like about page

Users

Here we will show some user

Popular Languages

Here we will show some popular programming languages of 2022

Now that we have defined how we are going to structure our site, let's dive right into it!

For this, we will use AppRouter() to define a view which will respond to route changes, and AppLink() to change the url to navigate to the specified pages.

function Home() {
    return p()
}

function User() {
    return p()
}

function Popular() {
    return p()
}

function MyApp() {
    return AppRouter("", 
        Url("/home", Home),
        Url("/users", User),
        Url("/popular", Popular)
    )
}

render("app", MyApp())

Here you can see that I have returned the AppRouter without binding it to any state, or inside any div, because Router by default binds to the url state of the browser itself and also returns a div, inside of which each of the views are show according to the url the user is in.

Here, you can also see I have nested Url() functions, which simply maps views to specific routes, like for Home, we are mapping the Home function, which is a view.

But here we used the views as callbacks, because of the fact that each of the view is actually callback, and not some sort of function, this is because we can pass properties to them when using the AppLink() function

Let's create a navigation bar to help us navigate the views

function Home() {
    return p()
}

function User() {
    return p()
}

function Popular() {
    return p()
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home")),
            AppLink("/users", p("Users")),
            AppLink("/popular", p("Popular"))
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())

Here as you can see, we are using the AppLink() function, passing the url as first variable and second variable as the child element, which is a paragraph, and when it is clicked, we can simply navigate to those views. There is also a third variable, which is used for variables, and we will discuss it in a moment.

Now we do have a working router, let's fill those views with data to see the effect

function Home() {
    return p("Welcome to Home Page")
}

function User() {
    return div(
        p("Name: Mayukh"),
        p("Age: 17")
    )
}

function Popular() {
    return div(
        p("Some popular programming languages:"),
        p("1. Javascript"),
        p("2. Python"),
        p("3. Java"),
        p("4. C/C++"),
        p("5. Rust")
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home")),
            AppLink("/users", p("Users")),
            AppLink("/popular", p("Popular"))
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())

Passing variables to views

We can pass some variables to the views too! It can depend upon states or any other thing that you might want to implement.

Let's see exactly how we can do that:

function Home() {
    return p("Welcome to Home Page")
}

function User() {
    return div(
        p("Name: Mayukh"),
        p("Age: 17")
    )
}

function Popular() {
    return div(
        p("Some popular programming languages:"),
        p("1. Javascript"),
        p("2. Python"),
        p("3. Java"),
        p("4. C/C++"),
        p("5. Rust")
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home"), { name: "Mayukh" }),
            AppLink("/users", p("Users"), { name: "Mayukh", age: 17 }),
            AppLink("/popular", p("Popular"), [
                "Javascript", "Python", "C/C++", "Java", "Rust"
            ])
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())

As you can see, we have passed some variables to the third argument, but we need to receive them to work with them. Here, we can also see that we have passed callbacks as views, that means we simply need to take them as variables in the views. Let's do it then!

function Home({ name }) {
    return p(`Welcome to home page, ${name}!`)
}

function User({ name, age }) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

function Popular(languages) {
    return div(
        ...languages.map(( elem, index ) => p(`${index+1}: ${elem}`))
    )
}

function MyApp() {
    return div(
        div(
            AppLink("/home", p("Home"), { name: "Mayukh" }),
            AppLink("/users", p("Users"), { name: "Mayukh", age: 17 }),
            AppLink("/popular", p("Popular"), [
                "Javascript", "Python", "C/C++", "Java", "Rust"
            ])
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())

Change Routes via Function

It can be a required feature that you might need to change the route without using the AppLink function, and via some functions.

We can do this using a function called AppNavigator .

Let's say we want to navigate based on some user input, say they type the route and we will access that route:

function Home({ name }) {
    return p(`Welcome to home page, ${name}!`)
}

function User({ name, age }) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

function Popular(languages) {
    return div(
        ...languages.map(( elem, index ) => p(`${index+1}: ${elem}`))
    )
}

function MyApp() {
    
    const route = State<string>("");
    
    return div(
    
        input().prop("placeholder", "Enter route name")
            .event('change', (e) => route.set(e.target.value))
        
        button('Change Route')
            .event("click", () => AppNavigator(route.get())),
        
        div(
            AppLink("/home", p("Home"), { name: "Mayukh" }),
            AppLink("/users", p("Users"), { name: "Mayukh", age: 17 }),
            AppLink("/popular", p("Popular"), [
                "Javascript", "Python", "C/C++", "Java", "Rust"
            ])
        ),
        AppRouter("", 
            Url("/home", Home),
            Url("/users", User),
            Url("/popular", Popular)
        )
    )
}

render("app", MyApp())

Now we can type our route, click on the button and it will change the route to the specific route. You can also pass data, exactly same as AppLink.

Anyways, I guess here we part ways. I will meet when I have completed this and then you will also have even better version of weblabs, and also a comprehensive beginner friendly docs, though I would expect you know somethings.