Routing

Change between views with ease

Note: In this section, we will only talk about AppRouter() and AppLink() to cover a basic overview, and not complications. For other methods, checkout the bolt router API reference

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 bolt being a client side framework as of now, it is a bit tough to implement routing.

Since routing is indeed an imporant aspect of an application, bolt 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 recieve 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())

As you can see, it is reacting to the props passed! We can also change this props on the upcoming views, or using states inside the views itself! I suggest you experiment untill something breaks, then simply notify me.

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 bolt, and also a comprehensive beginner friendly docs, though I would expect you know somethings.