Web Components


今天想要跟大家聊聊 Web Components 這個新玩具,說是新玩具,其實這個概念已經發展有段時間了,尤其筆者本身是玩 Flash 技術出身的,發現 Web Components 跟 Flex Component 差不多,所以就來分享一些心得。

Web Components 是什麼?

簡單來講就是你可以客制化 HTML <tag>。
<my-component></my-component>
由 W3C 提出:
The component model for the Web.
When used in combination, Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

使用 Web Components 有什麼好處?

鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。
最近新起許多 MDV (Model-driven-view) 這類 template 和 data binding 開發方式的框架 (backbone, angular, ember..), 那 Web Components 跟這些框架有什麼不同呢?
基本上就是希望藉由規格標準化,讓 Web application 的開發方式與架構更清晰。

Web Components 的瀏覽器支援情況?

尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills。
很遺憾,目前的瀏覽器普遍都還不支援完整的 Web Components, 不過可以使用 Google I/O 2013 中釋出的 Polymer library ,讓瀏覽器模擬 Web Components 環境嘗嘗鮮。

使用 Polymer 開發 Web Components

Basics


Component


1. Simulate

載入 platform.js 讓瀏覽器支援 Web Components 的功能。

2. HTML Imports

使用 <link>import 載入 Web Components: <link rel="import" href="import-file.html">

3. Custom Elements

使用自己建立的元件 <my-component></my-component>,命名方式以 dash(-) 分開為原則。
<element name="my-component">
可以加入 constructor 讓 javascript 使用, 例如:
<element name="my-component" constructor="MyComponent">
... 
<script>
    var myComponent = new MyComponent();
</script>
也可以繼承其他元件:
<element name="my-button" extends="button">

4. Initialize Polymer

<script> 內加入 Polymer.register(),讓這個元件初始化。

5. Templates

定義元件的 HTML Markup,UI layout。

6. Decorators

使用 <style> 定義元件的 CSS 樣式,另外也可以載入外部樣式:
<element name="my-component">
  <link rel="stylesheet" href="my-component.css">
  <template>
  …

7. Model Driven Views

使用 {{}} 將 data binding 到 template,然後在初始化的時候定義變數,例如替這個元件建立一個公用的 title 屬性:
<element name="my-component" constructor="MyComponent">
  <template>
    <h1>{{title}}</h1>
  </template>
  <script>
    Polymer.register(this, {
      title: "Web Components"
    });
  </script>
</element>
定義完後,就可以使用:
<my-component title="Hello World!"></my-component>
or
<script>
  var myComponent = new MyComponent();
  myComponent.title = "Hello World!";
</script>

結語

Web Component将会横扫Backbone、Ember、Angular、Knockout等等这些框架。但是,接下来这几年,我们还是要用它们,因为很多Web Component的API只能在Chrome的Canary开发版本和Firefox的开发版本中使用。
雖然引言中講的很聳動,但目前玩下來還是碰到不少問題。例如我想使用一些第三方的 jQuery Plugin 會無法動作等...,不過因為開發架構很接近 Flash,小弟認為應該會是未來 HTML5 RIA 的開發趨勢,所以目前還是會持續關注。
以上是初步試玩 Polymer Web Components 的一些心得,更多的 feature 可以到 W3C 和 Polymer 網站看看,如果有錯誤的地方也歡迎糾正,祝大家有個愉快的開發旅途 :-)

Reference

這個網誌中的熱門文章

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

Factory pattern 工廠模式

如何使用 Docker 切換不同的 MongoDB