mBlocks — Frontend UI Library

What is mBlocks

In my journey of building different frontend libraries to improve my own comfort with frontend development I made libraries like MercedUI and AMPonent that are built around the Web Component browser API. I wanted to try building a library that doesn’t use the web component API to build reactive UI and this was my first attempt (I later created RenderBlocks).

*You can find this and my other libraries at AlexMercedCoder.com *mBlocks Github Page:

Setup

  • in a folder somewhere on your computer create three files.
  • index.html
  • app.js
  • style.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- mBlocks -->
<script
src="http://www.alexmercedcoder.com/block.js"
charset="utf-8"
defer
></script>
<!-- Your Code -->
<script src="app.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>

Your first block

The way m-blocks work is you bind an element to the instance and it will render a template to that element. To create a new block do the following.

app.js

class HelloWorld extends Block {
constructor(id) {
super({
//The Name of the Tag to look for <m-helloworld>
name: "helloworld",
//The Initial State
state: {},
//The id of particular element the instance will bind to
id,
})
}
//the builder function returns the template to be rendered
builder(state, props) {
return `<h1>Hello World</h1>`
}
}
//Create an instance and bind to <m-helloworld id='hw'>
const hw = new HelloWorld("hw")

index.html

<body>
<m-helloworld id="hw"></m-helloworld>
</body>

Props

Just like React, props can be passed in.

class HelloWorld extends Block {
constructor(id) {
super({
//The Name of the Tag to look for <m-helloworld>
name: "helloworld",
//The Initial State
state: {},
//The id of particular element the instance will bind to
id,
})
}
//the builder function returns the template to be rendered
builder(state, props) {
return `<h1>${props.hello}</h1>`
}
}
//Create an instance and bind to <m-helloworld id='hw'>
const hw = new HelloWorld("hw")
<body>
<m-helloworld id="hw" hello="hello world"></m-helloworld>
</body>

State

mBlocks has a reactive state built-in, and just like React triggers a re-render with every update as seen below. The assemble function runs after every render which is the perfect place to initialize new mBlock instances in the blocks template and wire necessary event listeners.

class HelloWorld extends Block {
constructor(id) {
super({
//The Name of the Tag to look for <m-helloworld>
name: "helloworld",
//The Initial State
state: { hello: "Hello World" },
//The id of particular element the instance will bind to
id,
})
}
//the builder function returns the template to be rendered
builder(state, props) {
return `<h1>${state.hello}</h1><button>Click Me</button>`
}
assemble(state, props) {
const button = document.querySelector("button")
button.addEventListener("click", () => {
this.setState({ hello: "Goodbye World" })
})
}
}
//Create an instance and bind to <m-helloworld id='hw'>
const hw = new HelloWorld("hw")

Conclusion

That’s all there really is to mBlocks. It may not be as smooth as my web component libraries like MercedUI and AMPonent but you don’t have to worry about browser compatibility of the Web Component API.

Alex Merced is a Full Stack Developer, learn more about his work at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store