antonmedv/monkberry

Routing

alex-kinokon opened this issue · 9 comments

I am looking forward to using Monkberry in my next project. What router plays well with Monkberry?

Hi,

You can use any routing library you want.

For an example you can use director.

If you end up with some nice approach, write you solution. It there interesting to see.

Express inspired micro router:
https://github.com/visionmedia/page.js

I've come up with a pretty tiny implementation that I'm happy to share. I'm not exactly using a routing library, but I've set it up in a way that a routing library could trivially be tacked on top.

First, I created a routes.js file that holds a list of Monkberry templates:

export default {
    home: HomeTemplate,
    settings: SettingsTemplate,
    ...
}

Next, I created a custom directive that will act sort of like a dynamic component.

import Monkberry from 'monkberry'
import routes from './routes'

export default class
{
    constructor()
    {
        this._rendered = {}
    }

    bind(node)
    {
        this.node = node
    }

    unbind(node)
    {
        this.node.innerHTML = ''
        this.node = null
    }

    update(name)
    {
        this.node.innerHTML = ''

        // Keep previously rendered templates alive
        if(this._rendered[name])
        {
            this._rendered[name].appendTo(this.node)
        }
        else
        {
            const Template = routes[name]
            this._rendered[name] = Monkberry.render(Template, this.node)
        }
    }
}

My main App.monk component uses the routes directive like this:

<div class="app">
    <div class="app_page" :route={{ page || 'home' }}></div>
</div>

This is the absolute basics of what I ended up doing. In reality I'm using Redux to maintain state, which complicates this a little more but at it's core this is how it works. Adding in a routing library like director would be simple, as routes are just bound to callbacks, which you would just use to update() your App's page property.

@benjamminf Cool!

I'm going to write an article soon about routing too.

@Elfet where will I be able to read the aforementioned article?

@godDLL now have not much time, need to work. Next chapter i'm going to write will be about performance. After that try to write about routing.

But there a lot of routers for js what you can use right now.
Like director: https://github.com/flatiron/director

I'm going to write an article soon about routing too.

Hey @Elfet how is that article coming along? :)

Hey @PierBover it's still in my backlog, but now do not have much time.