Web Component是Web开发的未来。Polymer, X-Tag等Web Component框架也越来越火，但由于其浏览器支持度不高，我们仍缺少将Web Component应用到项目中的机会。

但是，虽然Web Component的支持度不高，但并不代表我们不能在现有的项目中使用组件化开发思想。

Nova.js可以帮助我们在项目中使用Web组件化的方式进行开发，同时，支持移动端所有主流浏览器及PC端IE9+及其它主流浏览器。

Web Component is production ready。 Are you ready?

Tab组件的正确打开方式

让我们通过Tab组件一起看看，使用Web Component好在哪儿。

使用AmazeUI的Tab组件：

<div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">

  <!-- Nav -->
  <ul class="am-tabs-nav am-nav am-nav-tabs">
    <li class="am-active"><a href="javascript: void(0)">Home</a></li>
    <li><a href="javascript: void(0)">Profile</a></li>
    <li><a href="javascript: void(0)">Message</a></li>
  </ul>

  <!-- panel -->
  <div class="am-tabs-bd">
    <div class="am-tab-panel am-active">
      ...
    </div>
    <div class="am-tab-panel">
      ...
    </div>
    <div class="am-tab-panel">
      ...
    </div>
  </div>
</div>

使用Nova.js实现的Tab组件：

<nova-tab default-style swipable="false" loop>
    <span class="tab">Home</span>
    <span class="tab">Profile</span>
    <span class="tab">Message</span>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</nova-tab>

<script>
    var novaTab = document.querySelector('nova-tab');
    novaTab.next();   // 翻到下一页
</script>

Web Component优势：

1. 使用简洁：使用者只需声明自己关心的结构，如选项卡，面板。无需填写ul, javascript:void(0)等组件内部实现依靠的结构。
2. 语义化：使用自定义元素，结构语义化，清晰易懂
3. 声明式：自定义元素自动初始化，无需通过js初始。通过定义attribute配置选项。
4. 原生DOM接口：可使用原生DOM接口直接查询、操作组件。

使用Nova.js开发组件

Nova.js提供以下的功能，方便开发者开发组件：

1. 自定义元素
2. 模板双向绑定
3. 属性监听
4. Scoped CSS
5. 事件模型
6. 方法切片
7. Behavior复用机制

定义Nova-tab

<!-- main.html -->
<template is="dom-module">
    <style>
        .tab-navs {/**/}
    </style>
    <template>
        <ul class="tab-navs">
            <content select=".tab"></content>
        </ul>
        <ul class="tab-panels">
            <content></content>
        </ul>
    </template>
    <script>
        Nova({
            is: 'nova-tab',
            props: {
            },
            createdHandler: functino() {
                // ...
            }
        });
    </script>
</template>

使用nova-tab

<!-- index.html -->
<link ref="import" href="nova-tab/main.html" />

<nova-tab></nova-tab>

Nova.js和Web Component

Web Component是由以下几个标准组成：

• Custom Element：自定义元素
• Template： 脚手架
• Shadow DOM：结构和样式封装
• Import：HTML片段打包

通过Polyfill，我们可以在所有移动端浏览器，和IE9+等PC浏览器中使用Custom Element。 但是其它三个标准仍未达到production ready的状态。

Nova.js:

1. 通过Custom Element实现组件
2. 在.html文件中定义组件的样式，模板，和行为。
3. 开发时通过import引入定义组件的HTML文件，无需实时编译。上线时将HTML文件编译为对应的js文件提高支持度。
4. 模拟Shadow DOM标准中content元素的行为，样式具有作用域的特点。

因此，虽然Web Component这组标准的支持度不高，我们仍然可以使用它的思想，来开发组件。抢先体验Web Component组件开发方式的快感！

Nova.js与Polymer、Vue.js的区别

与Polymer

Nova.js是根据Polymer设计而来。其主要区别有：

1. 支持度：Polymer移动端只支持到Android4.4，PC端的支持也与Import、Template等标准的支持度一样非常低。但是Nova.js已经可以支持所有移动端浏览器，PC端的IE9+和其它主流浏览器。
2. 体积：Polymer底层庞大，若在移动端想使用基于Polymer的一个组件，流量代价较高。而Nova.js在gzip压缩后只有12K。相对所有其它的MVVM架构，非常小巧精简。

与Vue.js

1. 定位：Vue.js的定位是Web应用框架。而Nova.js专注与组件开发。因此Nova.js组件的样式具有作用域、能方便定义组件模板。总而言之，开发组件更为方便。
2. 小： Nova.js的体积为Vue.js的一半以下。因此当使用者想简单引入一个组件时、使用Nova.js的代价也是更低的。

Nova.js的优势

Nova.js的主要优势就是小巧、专注于开发组件。现在有许多Web应用框架，如React、Vue.js、Angular等。但是它们的问题是太庞大。当我们想在一个很简单的页面（例如活动宣传页）中使用现成的组件时，如果还要引入React,Vue.js等框架的基础库，那么成本并不低。

使用Nova.js开发组件，不管未来页面使用的是什么Web框架，或者是一个简单的静态页面。都能引入小巧的组件。

NovaUI

NovaUI是基于Nova.js的高性能移动端组件库。欢迎大家抢先体验Web Component的开发方式!

贡献组件

请见README的说明

链接

Nova.js官网
NovaUI官网
Fork Nova.js
QQ讨论群：486672012