A simple way to create UI components

I like to create UI Components in a functional programming way. I like React which offers such declarative way.

What if I need to create a simple page with a couple of widgets?

Seems, I don’t need a complex stuff that React does under the hood: Virtual DOM and rerendering. Moreover, sometimes there’s no full JavaScript stack on front-end, so Virtual DOM could not be rendered on the server (getting full HTML from server could be important for some reasons).

JBlocks helps to create components in a functional programming way just like React does, and it’s really simple and lightweight.

It’s build on the following simple rules:

- declare your components in JavaScript
- bind your components in HTML using data-attributes
- create instances which interact with each other using API and events

Let me give an example.

We have a counter with 2 buttons to increase and decrease its value. It could be a lot of independent counters on a page with different initials values.

We have to declare a component in JavaScript and mark some nodes in HTML using special data-attributes.

Declare a component in JavaScript

Use define method to declare a component class.

jBlocks.define('counter', {
    events: {
        'click .js-inc': 'inc',
        'click .js-dec': 'dec'
    },

    methods: {
        oninit: function() {
            this._currentValue = Number(this.params.initialValue);
        },
        ondestroy: function() {
            this._currentValue = null;
        },
        /**
         * Increases the counter, emits changed event
         */
        inc: function() {
            this._currentValue++;
            this.emit('changed', this._currentValue);
        },
        /**
         * Decreases the counter, emits changed event
         */
        dec: function() {
            this._currentValue--;
            this.emit('changed', this._currentValue);
        },
        /**
         * Returns the current value
         * @return {Number}
         */
        getCurrentValue: function() {
            return this._currentValue;
        }
    }
})

Predefined oninit and ondestroy methods are executed when a new instance has been created or destroyed corresponding, just like componentWill(Un)Mount in React.

Declare a component in HTML

After the component class has been declared in JavaScript we need to bind future instances to the HTML nodes.

- data-component attribute specifies the name of component we have declared
- data-props attribute defines initial properties just like props in React

<div class="js-counter" data-component="сounter" data-props='{ "initialValue": 2 }'>
    <button class="js-inc">+</button>
    <button class="js-dec">-</button>
</div>

We could have a dozen of independent counters with different intial properties.

Create instances and interact with them

After describing all components in declarative way it’s time to create an instance and interact with it using API and events:

// somewhere in my program, when DOM is ready...

var counter = jBlocks.get(document.querySelector('.js-counter'));

// use event to react on what happens during lifecycle
counter.on('changed', function() {
    console.log('hello, world!');
});

// ... when user clicks on inc button
// log => 'hello, world!'

// log => 3, cause the counter has been increased
counter.getCurrentValue();

// ... then I decided to decrease it using API
counter.dec();

// log => 2
counter.getCurrentValue();

// If I remove nodes from DOM, instance should be destroyed
counter.destroy();

In conclusion, if you’re about to start a new single page application with highly dynamic UI, you definitely should use React, but if you need to create a simple HTML page with a few widgets on it, maybe jBlocks can help.

Thanks for reading!