Bắt đầu với WebComponents

Xin chào. Tôi là naoto.higuchi@mulodo.com. 

Trong bài viết này tôi xin giới thiệu về những yếu tố kĩ thuật đang được sử dụng trong Qword. Đầu tiên chúng ta sẽ bắt đầu với WebComponents.

WebComponents là gì ?

  Nói vắn tắt, đó là một tiêu chuẩn Web để chia sẻ, để tạo ra một thành phần giao diện tùy chỉnh cho người dùng . Nó bao gồm các yếu tố sau đây.

 • Template

 • Custom Elements

 • Shadow DOM

 • HTML Imports

http://webcomponents.org/

Polyfill

  Rất tiếc là trình duyệt Browser để thực hiện cho việc này không có nhiều, cho nên chúng ta cần phải sử dụng JavaScript Polyfill.

Polyfill thì dễ quản lí bằng bower (bỏ qua phần thuyết minh cho bower).

$ bower install webcomponentsjs

Trong html viết vào đoạn code dưới đây thì sẽ load được polyfill của WebComponents. Trong trường hợp trình duyệt Browser không thực hiện được những kĩ thuật cơ bản của WebComponents, thì tôi phải load polyfill.

<script>
if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {
    // We're using a browser with native WC support!
  } else {
    document.write('<script src="bower_components/webcomponentsjs/webcomponents.min.js"><\/script>');
  }
</script>

Polymer

  WebComponents là một yếu tố kĩ thuật cơ bản có level thấp, trong phát triển thực thế thì hầu như chúng ta không tương tác trực tiếp với WebComponents, mà sử dụng những thư viện của JavaScript được tạo thành dựa trên nền tảng của WebComponents. Tiêu biểu đến thời điểm hiện tại có các thư viện như Polymer và X-TAG. Qword thì đang sử dụng thư viện Polymer.

Trong bài viết tiếp theo, nếu cần thiết tôi sẽ giải thích thêm về WebComponents, và giải thích về Polymer.

Người viết: Naoto Higuchi
Nguồn: WebComponentsを始めよう