JavaScript MVVM lib within 200 LOC (part 1)

Build your own rendering engine

We’re not going to re-invent the wheel. We’re going to do simple things that help you have deep understanding of how it is implemented. However, the code will not totally useless. The code is actually part of my library named HtmlJs. Hopefully after reading this article, you can contribute to it. I'll pay about $5 for an accepted pull request. All steps are well constructed in the last tutorial of HtmlJs, click here to go. You can play with it or read all steps tutorial here.

Firstly, some thought on principles of design. The client code should be:

  1. Pure JavaScript to generate DOM, no parsing or compiling
  2. Cool, fluent API for save typing effort
  3. Callback to render lists, instead of template

To fulfill the conditions, the client code should be like

var cartItems = [
    { name: 'iPhone', total: 900, quantity: 1},
    { name: 'Samsung galaxy', total: 850, quantity: 1}
];

html('#my-table').tbody.each(cartItems, function(cartItem, index) {
    html.tr  // render table row
        .td.text(cartItem.name).$              // render item name  
        .td.text('$').text(cartItem.total).$   // render item total
        .td.button.text('X').className('some-classname') // render delete button
});

Let's start

Define a function to query an element

// wrapper function  
(function () {  
    var ctx = null;  
    window.html = function(selector) {  
        if (typeof selector === 'string') {  
            selector = document.querySelector(selector);  
        }  
        ctx = selector;  
        return html;  
    }  
})();

In this function, we save a context that passed into html function. Next, we’ll have a function that get the context in client code. NOTE that from now on, we must put all the code inside the most outer function.

Object.defineProperty(html, 'context', {  
    get: function() {  
        return ctx;  
    }  
});

Now, we have a some of all HTML tags. We should add all HTML tags after html namespace

var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'object', 'ol', 'ptgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];

Then the code to render them with fluent API. To get fluent API, all we need to do is simply return html in each function

function defineTag(tag) {  
    Object.defineProperty(html, tag, {  
      get: function () {  
          var ele = document.createElement(tag);  
          if (ctx == null) {  
            ctx = ele;  
          } else {  
            ctx.appendChild(ele);  
            ctx = ele;  
          }  
          return html;  
      }  
    });  
}  
tags.forEach(function(tag) {  
    defineTag(tag);  
});

The code above will be called after typing somthing like html(document.body).div. This client code will generate a DIV element. The generated element will be appended into html context (body of document). That is the selected element that you pass into html query.

We got a rendering engine until now. The engine queries an element just like jQuery and render HTML tags from it. To test the engine, we have to add text binding and value binding because you don’t want to render HTML tags without any text. Just 10 LOC. The text binding will create a text node, and append it inside the wrapper function.

html.text = function(textContent) {
    var textNode = document.createTextNode(textContent);
    ctx.appendChild(textNode);
    return html;
};

html.value = function(val) {
    ctx.value = val;
    return html;
};

Test our code
Add the code below to console to test what we’ve done so far. The code just append a DIV, an input, and a text node to document body.

html(document.body).input.value('Hello HtmlJs');
html(document.body).text('Hello HtmlJs');

The code will generate an input and a text node. They both contains "Hello HtmlJs" string. However, the code above is quite verbose, it should be in fluent API. To get the API to be fluent, then we have to add ending symbol after html namespace. After ending symbol, we can continue rendering children without select a node again.

Object.defineProperty(html, '$', {
    get: function() {
        ctx = ctx.parentElement;
        return html;
    }
});

To bind event using fluent API, we should add all HTML events after html namespace like the way of HTML tags. However, events in MVVM pattern needs data instead of UI objects. So we need to call event handlers and pass data into it. This technique can be represented by wishful API like.

function clickHanlder(e, model) {
  alert(model);
}

html(document.body).input.value('HtmlJs').onClick(clickHandler, 'John Doe');

To add extra parameter to event handlers, we just need to keep event handler references, then calling them with the parameter. Add the code inside the wrapper function. Note that we return html object in most of functions for fluent API (principle n0 2).

var events = ['Click', 'Contextmenu', 'Dblclick', 'Mousedown', 'Mouseenter', 'Mouseleave', 'Mousemove', 'Mouseover', 'Mouseout', 'Mouseup', 'Keydown', 'Keypress', 'Keyup', 'Abort', 'Beforeunload', 'Error', 'Hashchange', 'Load', 'Resize', 'Scroll', 'Unload', 'Blur', 'Change', 'Input', 'Focus', 'Focusin', 'Focusout', 'Inputting', 'Invalid', 'Reset', 'Search', 'Select', 'Submit', 'Drag', 'Dragend', 'Dragenter', 'Dragleave', 'Dragover', 'Dragstart', 'Drop', 'Copy', 'Cut', 'Paste', 'Afterprint', 'Beforeprint', 'Canplay', 'Canplaythrough', 'Durationchange', 'Emptied', 'Ended', 'Error', 'Loadeddata', 'Loadedmetadata', 'Loadstart', 'Pause', 'Play', 'Playing', 'Progress', 'Ratechange', 'Seeked', 'Seeking', 'Stalled', 'Suspend', 'Timeupdate', 'Volumechange', 'Waiting', 'Animationend', 'Animationiteration', 'Animationstart', 'Transitionend', 'Message', 'Online', 'Offline', 'Popstate', 'Show', 'Storage', 'Toggle', 'Wheel', 'Compositionend', 'Compositionstart'];

events.forEach(function (eventName) {
  html['on' + eventName] = function (eventListener, model) {
    ctx.addEventListener(eventName.toLowerCase(), function (e) {
      eventListener.call(this, e, model);
    });
    return html;
  };
});

To complete the rendering engine, we just need to add some special binding like css attr (stands for attribute) and classname These bindings are enough to add any kind of HTML attribute.

Actually attr is enough, for example we can add css like this

html(document.body).input.value('Hello world!').attr({style: 'border: 1px solid #ccc'});

However, it's not cool.

To do this task shorter, we should add css binding like

html(document.body).input.value('Hello world').css({border: '1px solid #ccc'});

Is it better?

Each binding just take the do simple thing, grabing the context and set property to it (using DOM API), append the code inside the wrapper function.

html.css = function(cssObj) {
    for (var i in cssObj) {
        if (cssObj.hasOwnProperty(i)) {
            ctx.style[getFCamalCase(i)] = cssObj[i];
        }
    }
    return html;
};

html.attr = function(attrObj) {
    for (var prop in attrObj) {
        if (attrObj.hasOwnProperty(prop)) {
            ctx.setAttribute(prop, attrObj[prop]);
        }
    }
    return html;
};

html.className = function(className) {
    ctx.className += ctx.className === '' ? className : ' ' + className;
    return html;
};

We’ve finished our rendering engine. Here is full code of our engine

// wrapper function  
(function () {
  var ctx = null;
  window.html = function (selector) {
    if (typeof selector === 'string') {
      selector = document.querySelector(selector);
    }
    ctx = selector;
    return html;
  }

  Object.defineProperty(html, 'context', {
    get: function () {
      return ctx;
    }
  });

  var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'object', 'ol', 'ptgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video'];

  function defineTag(tag) {
    Object.defineProperty(html, tag, {
      get: function () {
        var ele = document.createElement(tag);
        if (ctx == null) {
          ctx = ele;
        } else {
          ctx.appendChild(ele);
          ctx = ele;
        }
        return html;
      }
    });
  }
  tags.forEach(function (tag) {
    defineTag(tag);
  });

  html.text = function (textContent) {
    var textNode = document.createTextNode(textContent);
    ctx.appendChild(textNode);
    return html;
  };

  html.value = function (val) {
    ctx.value = val;
    return html;
  };

  Object.defineProperty(html, '$', {
    get: function () {
      ctx = ctx.parentElement;
      return html;
    }
  });

  var events = ['Click', 'Contextmenu', 'Dblclick', 'Mousedown', 'Mouseenter', 'Mouseleave', 'Mousemove', 'Mouseover', 'Mouseout', 'Mouseup', 'Keydown', 'Keypress', 'Keyup', 'Abort', 'Beforeunload', 'Error', 'Hashchange', 'Load', 'Resize', 'Scroll', 'Unload', 'Blur', 'Change', 'Input', 'Focus', 'Focusin', 'Focusout', 'Inputting', 'Invalid', 'Reset', 'Search', 'Select', 'Submit', 'Drag', 'Dragend', 'Dragenter', 'Dragleave', 'Dragover', 'Dragstart', 'Drop', 'Copy', 'Cut', 'Paste', 'Afterprint', 'Beforeprint', 'Canplay', 'Canplaythrough', 'Durationchange', 'Emptied', 'Ended', 'Error', 'Loadeddata', 'Loadedmetadata', 'Loadstart', 'Pause', 'Play', 'Playing', 'Progress', 'Ratechange', 'Seeked', 'Seeking', 'Stalled', 'Suspend', 'Timeupdate', 'Volumechange', 'Waiting', 'Animationend', 'Animationiteration', 'Animationstart', 'Transitionend', 'Message', 'Online', 'Offline', 'Popstate', 'Show', 'Storage', 'Toggle', 'Wheel', 'Compositionend', 'Compositionstart'];

  events.forEach(function (eventName) {
    html['on' + eventName] = function (eventListener, model) {
      ctx.addEventListener(eventName.toLowerCase(), function (e) {
        eventListener.call(this, e, model);
      });
      return html;
    };
  });

  html.css = function (cssObj) {
    for (var i in cssObj) {
      if (cssObj.hasOwnProperty(i)) {
        ctx.style[getFCamalCase(i)] = cssObj[i];
      }
    }
    return html;
  };

  html.attr = function (attrObj) {
    for (var prop in attrObj) {
      if (attrObj.hasOwnProperty(prop)) {
        ctx.setAttribute(prop, attrObj[prop]);
      }
    }
    return html;
  };

  html.className = function (className) {
    ctx.className += ctx.className === '' ? className : ' ' + className;
    return html;
  };

})();

Within 100 LOC, we have a simple cool and full-feature engine to render DOM. No more complicated parsing, compiling, and bugging template. One more thing to consider is performance. You can find many on the internet that DOM is far better and less buggy than HTML manipulation. Nothing can beat DOM in term of performance, take a look at an example here. Our engine totally uses DOM so that it is definitely the fastest one.

For a long time people think that DOM manipulation is cumbersome and verbose. Consider the example below to see what would be like with traditional DOM.

var input = document.createElement('input');
input.value = 'Hello world';
input.style.border = '1px solid #ccc';
document.appendChild(input);

It would take 4 lines of code to create an input and add some properties to that one. Compare to html engine above, we just need 1 line of code to that. Consider the following code

html(document.body).div.input.value('Hello world').css({border: '1px solid #ccc'}).$;

We still have more than 100 LOC to finish the tutorial. In next section, we’ll add observable class to observe data and update DOM based on data.

NhanNguyen11 30-12-2016

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nhan Nguyen

5 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
38 25
Giới thiệu về framework HtmlJs Chào các bạn, sau 2 năm nghiên cứu, mình đã viết 1 framework JavaScript. Hôm nay mình xin chia sẻ mong đem lại lợi ...
Nhan Nguyen viết gần 2 năm trước
38 25
White
7 10
Cái nào nhanh hơn vậy các bạn? Đi phỏng vấn thấy một câu hỏi vui vui là hai API này cái nào query nhanh hơn. Mình nói là document.getElementById, ...
Nhan Nguyen viết 12 tháng trước
7 10
White
2 0
Hôm nay mình sẽ giới thiệu kiến trúc thiết kế web theo OOP, kiến trúc này mình đang dùng trong dự án ở trong công ty. Với kiến trúc này, bạn có thể...
Nhan Nguyen viết hơn 1 năm trước
2 0
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!