I have recently been experimenting with Mithril.js and Hyperscript to see what new things I can learn from the framework. It is definitely an impressive framework for roughly 8KB gzipped—CRAZY!

Mithril.js

Taken from the site

Mithril is a modern client-side Javascript framework for building Single Page Applications. It’s small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.

That means it has all the necessary ingredients to make a kick-ass website. The cool thing is that out the box it has support for hyperscript which is a pretty cool way of rendering HTML. The documentation is amazing very straight forward.

m("div", {id: "box"}, "hello")

// equivalent HTML:
// <div id="box">hello</div>

Vue.js

Taken from the site

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

So that means it also kicks ass at being a great front-end framework. It has a great CLI, the concepts are easy to pick-up and immediately get running.

I have been using this for a few personal projects and client projects. It has allowed me to immediately test ideas and put it into production with little churn.

Two of my favourite UI frameworks on top of Vue is Buefy and Bootstrap-Vue.

After working through a component that I needed to build on top of Bootstrap-Vue’s dropdown I had to look into how they built theirs. So after peeking through, I noticed they had used a form of hyperscript (a variant of snabbdom).

The h helper is available through the render(h) functions first parameter.

So an example of a render is:

export default {
  render(h) {
    return h('div', {id: "box"}, "hello")
  }
}

Conclusion

None, really. It is just really interesting to see that hyperscript is another cool way to look at rendering HTML.