atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title><![CDATA[Regularjs]]></title>
  <subtitle><![CDATA[A Flexible library for writing data-driven component]]></subtitle>
  <link href="/atom.xml" rel="self"/>
  <link href="http://regularjs.github.io/"/>
  <updated>2015-09-30T02:45:27.766Z</updated>
  <id>http://regularjs.github.io/</id>
  
  <author>
    <name><![CDATA[leeluolee]]></name>
    <email><![CDATA[87399126@163.com]]></email>
  </author>
  
  <generator uri="http://zespia.tw/hexo/">Hexo</generator>
  
  <entry>
    <title><![CDATA[A comprehensive comparison of  front-end templating solutions]]></title>
    <link href="http://regularjs.github.io/blog/2015/02/26/template-technology/"/>
    <id>http://regularjs.github.io/blog/2015/02/26/template-technology/</id>
    <published>2015-02-26T06:05:02.000Z</published>
    <updated>2015-07-09T10:05:00.000Z</updated>
    <content type="html"><![CDATA[<p>Templating is a technology that help us to represent data in different forms. </p>
<p>In the old days, choosing a appropriate template engine for client templating is not easy, beacuse you were left with little other choice. Nowadays, choosing templating engine is still a big probelm, beacuse there are so many template engines and most of them seems do nothing different(<a href="http://garann.github.io/template-chooser/" target="_blank" rel="external">Template-Engine-Chooser!</a> comes).</p>
<p>In this article, from a principle perspective ,we will have <strong>A comprehensive comparison of front-end templating solutions</strong>. there are some distinct types of solution that will be mentioned.</p>
<ol>
<li>String-based templating (String-based parser &amp; compiler)</li>
<li>Dom-based templating (Dom-based link &amp; compiler)</li>
<li>Living templating (combine String-based parser with Dom-based compiler)</li>
<li>Other:  <a href="https://github.com/mauricemach/coffeekup" target="_blank" rel="external">Coffeekup: Inner DSL based on coffeescript syntax</a></li>
</ol>
<p>The article won’t  take the fourth type into detail, except for <a href="https://github.com/facebook/react" target="_blank" rel="external">React</a>. But you will find that react is very similiar with Living templating. beacuse all them is compeletely independent with <code>innerHTML</code>.</p>
<p>Before diving into detail, let’s talking about <strong><code>innerHTML</code></strong> first.</p>
<a id="more"></a>
<hr>
<h2 id="innerHTML">innerHTML</h2>
<p><code>innerHTML</code> is the key through this post，so we need to have a brief review on it. But i don’t think there is any necessity to bring <code>innerHTML</code> into detail, since we are all familiar with it. so let’s talk about the pros &amp; cons directly.</p>
<h3 id="innerHTML_is_good,_without_doubt">innerHTML is good, without doubt</h3>
<p>Before <code>innerHTML</code> becomes <a href="https://domparsing.spec.whatwg.org/#innerhtml" target="_blank" rel="external">web standard</a>, it has been a conventional “practical standard” for serveral years beacuse its irreplaceable advantages. for example.</p>
<p><strong>1 . easy to code and intuitive to view</strong></p>
<p>imagine that you need to append a html like that.</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">h2</span> <span class="attribute">title</span>=<span class="value">"header"</span>&gt;</span>title<span class="tag">&lt;/<span class="title">h2</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="title">p</span>&gt;</span>content<span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></pre></figure>

<p>use <code>innerHTML</code></p>
<figure class="highlight javascript"><pre><div class="line">node.innerHTML = <span class="string">"&lt;h2 title="</span>header<span class="string">"&gt;title&lt;/h2&gt;&lt;p&gt;content&lt;/p&gt;"</span></div></pre></figure>

<p>compare with the way using <code>Dom API</code></p>
<figure class="highlight javascript"><pre><div class="line"><span class="keyword">var</span> header = <span class="built_in">document</span>.createElement(<span class="string">'h2'</span>);</div><div class="line"><span class="keyword">var</span> content = <span class="built_in">document</span>.createElement(<span class="string">'p'</span>);</div><div class="line">h2.setAttribute(<span class="string">'title'</span>, <span class="string">'header'</span>);</div><div class="line">h2.textContent = <span class="string">'title'</span>;</div><div class="line">p.textContent = <span class="string">'content'</span>;</div><div class="line">node.appendChild(header);</div><div class="line">node.appendChild(content);</div></pre></figure>

<p><code>innerHTML</code> obviously win the game.</p>
<p>Although some frameworks like <a href="http://mootools.net/docs/core/Element/Element#Element:constructor" target="_blank" rel="external">mootools:Element</a> provide some more efficient way to constructing HTML with <code>Dom API</code>, <code>innerHTML</code> is still the most intuitive way.</p>
<p><strong>2 . it is faster，especially <a href="http://www.quirksmode.org/dom/innerhtml.html" target="_blank" rel="external">in old IE</a></strong></p>
<p>   &gt; the test maybe out of date in modern browser, the difference between <code>innerHTML</code> and <code>Dom Level 1</code> is become smaller and smaller.</p>
<p>But we also learned: <em>The recommended way to modify the DOM is to use the DOM Level 1 API.</em></p>
<p>A great reference to this is Chapter 15 of “Javascript: The Definitive Guide”. Why?</p>
<h3 id="innerHTML_is_disobedient,_sometimes">innerHTML is disobedient, sometimes</h3>
<p><strong>1. security issues</strong><br><code>innerHTML</code> has more security issues , especially if you don’t sanitize what you’re putting into it. for example</p>
<figure class="highlight"><pre><div class="line">document.body.innerHTML = "<span class="tag">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">x</span> <span class="attribute">onerror</span>=<span class="value">'alert(xss)'</span>/&gt;</span>"</div></pre></figure>

<p>I know you won’t code like this, but if the HTML is not compeltely controlled by yourself(for example : from remote server), it will be a big issue.</p>
<p><strong>2. it is slow</strong><br>Indeed, I mentioned <code>innerHTML</code> is fast. if you just need change a attribute but replacing all DOM nodes with <code>innerHTML</code> completely, it would be obviously inefficient.</p>
<p><em>Context is everything</em></p>
<p><strong>3. not smart enough</strong><br>    it disconnect all existing DOM nodes and rerendering again, all events and state in     previous DOM nodes is gone.</p>
<p><strong>4. potential for generating invalid markup with invalid markup.</strong><br>    html parser is so “friendly”, it even <a href="http://stackoverflow.com/questions/25559999/why-arent-browsers-strict-about-html" target="_blank" rel="external">accpet invalid html</a>,  but developer wont get any ‘parse error ‘during the parsing.</p>
<p><em>Maybe it’s not innerHTML that is the problem, but constructing HTML with string operations is.</em></p>
<p>we have thought through <code>innerHTML</code> already, it is time to talk about “templating solutions” now.</p>
<h2 id="String-based_templating">String-based templating</h2>
<blockquote>
<p>It is essentially a way to address the need to populate an HTML view with data in a better way than having to write a big, ugly string concatenation expression.<br>—- cited from <a href="http://www.dehats.com/drupal/?q=node/107" target="_blank" rel="external">http://www.dehats.com/drupal/?q=node/107</a></p>
</blockquote>
<p>String-based templating is the most common solution we ever used. beacuse frontend templating is derivatived from backend,  in server side the output must be a string , so the browser can render it. </p>
<p><strong>Example</strong></p>
<ol>
<li>mustache: less-logic support</li>
<li>Dust.js: rich-logic support</li>
<li>doT.js: super fast</li>
</ol>
<p><strong>The basic process</strong></p>
<p><a href="http://modernweb.com/wp-content/uploads/2014/09/String-based-Template.png" target="_blank" rel="external"><img src="http://modernweb.com/wp-content/uploads/2014/09/String-based-Template.png" alt="String-based Template" width="540" class="alignnone size-medium wp-image-3150"></a></p>
<p>As shown above, string-based templating is tightly coupled with <code>innerHTML</code> (for Rendering).</p>
<p><strong>pros</strong></p>
<ol>
<li>Faster initialize time</li>
<li>Isomorphic: support rendering on server-side and client-side.<br>beacuse this solution is compeletely dom-independent.</li>
<li>More powerful template-logic support (all depend on the design of your DSL )</li>
</ol>
<p><strong>cons</strong></p>
<ol>
<li>security issue: see <code>innerHTML</code> section</li>
<li>not smart enough: see <code>innerHTML</code> section</li>
<li>performance issue when updating.<br>Although the string-based template is become more and more faster beacuse of the intense competition,we need also to take into account the time taken to load the template output into the DOM which is actually <a href="https://github.com/leonidas/transparency/wiki/Defining-template-engine-performance" target="_blank" rel="external">the real bottleneck</a>.</li>
</ol>
<h2 id="Dom-based_Template_Engine">Dom-based Template Engine</h2>
<p>In recent years, dom-based begun to pop up, the prime example is Angular that earned almost 28000 stars in github. </p>
<p><strong>Example</strong></p>
<ol>
<li>Angularjs: most popular one</li>
<li>Knockout: the early one</li>
<li>Vuejs: upstart, more concise and aiming to build interactive UI, enough is as good as a feast.</li>
</ol>
<p><strong>The basic process</strong></p>
<p><a href="http://modernweb.com/wp-content/uploads/2014/09/Dom-based-Template.png" target="_blank" rel="external"><img class="alignnone size-medium wp-image-3143" src="http://modernweb.com/wp-content/uploads/2014/09/Dom-based-Template.png" alt="Dom-based Template" width="540"></a></p>
<p>dom-based template doesn’t have their own parser, so if you need creating view from a template string, you have to use <code>innerHTML</code> to convert the string to dom(parsing), then walk the dom tree using the Dom API(<code>attributes</code>, <code>getAttribute</code>, <code>firstChild</code>… etc). All information like directives is hold by the dom node and its attributes.</p>
<p>In fact, the whole process is more like reshaping than rendering. </p>
<p><strong>pros</strong></p>
<ol>
<li>output dom is Living.</li>
<li>is <strong>runtime</strong> efficient.</li>
<li>using directive(or other similar concepts), the coding  style is pure declarative, just like you writing html. </li>
</ol>
<p><strong>cons</strong></p>
<ol>
<li>have no parser themselves, syntax is restricted by dom and is hard to embed logic in it.</li>
<li>also have security issues beacuse using of <code>innerHTML</code>.</li>
<li>will have some useless placeholder on generated dom , beacuse dom-based template need this information to act operation. for example, if you <a href="http://todomvc.com/architecture-examples/angularjs/" target="_blank" rel="external">inspect the angular’s todomvc</a>， you can some placeholder (<code>ng-show</code>, etc) in every nodes.</li>
</ol>
<h2 id="Living_Template_Engine">Living Template Engine</h2>
<p>string-based and dom-based template are all tightly coupled with <code>innerHTML</code>, the differrence is: String-based template use <code>innerHTML</code> for <strong>Rendering</strong> and Dom-based use it for <strong>Parsing</strong>.</p>
<p><strong>Why not combining String-based parser and Dom-based compiler to abate the dependence on <code>innerHTML</code> ?</strong></p>
<p>In fact, there have been servaral templates that realized in this way .</p>
<p><strong>Example</strong></p>
<ol>
<li><a href="https://github.com/tildeio/htmlbars" target="_blank" rel="external">htmlbar</a>: built on top of Handlebars template compiler.</li>
<li><a href="https://github.com/ractivejs/ractive" target="_blank" rel="external">ractivejs</a>: standalone</li>
<li><a href="https://github.com/regularjs/regular" target="_blank" rel="external">Regularjs</a> standalone</li>
</ol>
<p><strong>The basic process</strong></p>
<p><a href="http://modernweb.com/wp-content/uploads/2014/09/Living-Template.png" target="_blank" rel="external"><img class="alignnone size-medium wp-image-3144" src="http://modernweb.com/wp-content/uploads/2014/09/Living-Template.png" alt="Living Template" width="540"></a></p>
<p>As shown in the picture above, parsing and compiling are similar with String-based template and dom-based template respectively</p>
<h3 id="1_-_Parsing">1 . Parsing</h3>
<p>First. it use a builtin parser to parse the template string then output a AST. </p>
<p>for example, template string(syntax base on <a href="https://github.com/regularjs/regular" target="_blank" rel="external">regularjs</a>)</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">button</span> {#<span class="attribute">if</span> !<span class="attribute">isLogin</span>} <span class="attribute">on-click</span>=<span class="value">{this.login()}</span> {/<span class="attribute">if</span>}&gt;</span></div><div class="line">  {isLogin? 'Login': 'Wellcome'}</div><div class="line"><span class="tag">&lt;/<span class="title">button</span>&gt;</span>'</div></pre></figure>

<p>will be parsed to:</p>
<figure class="highlight javascript"><pre><div class="line">[</div><div class="line">  {</div><div class="line">    <span class="string">"type"</span>: <span class="string">"element"</span>,</div><div class="line">    <span class="string">"tag"</span>: <span class="string">"button"</span>,</div><div class="line">    <span class="string">"attrs"</span>: [</div><div class="line">      {</div><div class="line">        <span class="string">"type"</span>: <span class="string">"if"</span>,</div><div class="line">        <span class="string">"test"</span>: {</div><div class="line">          <span class="string">"type"</span>: <span class="string">"expression"</span>,</div><div class="line">          <span class="string">"body"</span>: <span class="string">"(!_d_['isLogin'])"</span>,</div><div class="line">          <span class="string">"constant"</span>: <span class="literal">false</span>,</div><div class="line">          <span class="string">"setbody"</span>: <span class="literal">false</span></div><div class="line">        },</div><div class="line">        <span class="string">"consequent"</span>: [</div><div class="line">          [</div><div class="line">            {</div><div class="line">              <span class="string">"type"</span>: <span class="string">"attribute"</span>,</div><div class="line">              <span class="string">"name"</span>: <span class="string">"on-click"</span>,</div><div class="line">              <span class="string">"value"</span>: {</div><div class="line">                <span class="string">"type"</span>: <span class="string">"expression"</span>,</div><div class="line">                <span class="string">"body"</span>: <span class="string">"_c_['login']()"</span>,</div><div class="line">                <span class="string">"constant"</span>: <span class="literal">false</span>,</div><div class="line">                <span class="string">"setbody"</span>: <span class="literal">false</span></div><div class="line">              }</div><div class="line">            }</div><div class="line">          ]</div><div class="line">        ],</div><div class="line">        <span class="string">"alternate"</span>: []</div><div class="line">      }</div><div class="line">    ],</div><div class="line">    <span class="string">"children"</span>: [</div><div class="line">      {</div><div class="line">        <span class="string">"type"</span>: <span class="string">"expression"</span>,</div><div class="line">        <span class="string">"body"</span>: <span class="string">"_d_['isLogin']?'Login':'Wellcome'"</span>,</div><div class="line">        <span class="string">"constant"</span>: <span class="literal">false</span>,</div><div class="line">        <span class="string">"setbody"</span>: <span class="literal">false</span></div><div class="line">      }</div><div class="line">    ]</div><div class="line">  }</div><div class="line">]</div></pre></figure>

<ol>
<li>it is very similar with the string-based template, so we can use more powerful syntax (it is all depend on the DSL you defined). </li>
<li>string-based templates only parse the “dsl element” and consider the “xml element” as the “text”. but in living template, we need parse the “xml” together with the “dsl element” to make it be <strong>dom-aware</strong>. beacuse we need the infomation for creating living dom.</li>
<li>unlike Dom-based templating, instead of real dom, the AST holds the all information we needed(statement, directive, attributes and tagname…etc). <ol>
<li>it is more <strong>lightweight</strong>, setter and getter on dom is expensive.</li>
<li>it is <strong>reusable</strong>.</li>
<li>it can <strong>be serialized</strong> , so you can preparse it on server.</li>
</ol>
</li>
<li>only output the necessary part.<br>compare with dom-based template, living template’s output is more clean. <a href="http://codepen.io/leeluolee/pen/dGxCb" target="_blank" rel="external">inspect regularjs’s todomvc on codepen.io</a></li>
</ol>
<figure class="highlight javascript"><pre><div class="line">&lt;ul id=<span class="string">"todo-list"</span>&gt;</div><div class="line">  <span class="xml"><span class="comment">&lt;!--Regular list--&gt;</span></span></div><div class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">class</span>=<span class="value">"completed"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"view"</span>&gt;</span></div><div class="line">      </div><div class="line">      <span class="tag">&lt;<span class="title">label</span>&gt;</span>sleep<span class="tag">&lt;/<span class="title">label</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"destroy"</span>&gt;</span><span class="tag">&lt;/<span class="title">button</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="title">div</span>&gt;</span></div><div class="line">    </div><div class="line">  <span class="tag">&lt;/<span class="title">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></div></pre></figure>


<h3 id="2_Compiler">2 Compiler</h3>
<p>with spcified model (in regularjs, it is a plain object), template engine walks the AST and generating the dom recursively, meanwhile, according to the directive and other binder(event, inteplation… etc), it also create the binding between model and dom to <strong>make the dom living</strong>. </p>
<p>for example, just like the inteplation <code>{isLogin? &#39;Login&#39;: &#39;Wellcome&#39;}</code> showed above.  once the compiler seen it, the <code>expression</code> walker will be called.</p>
<figure class="highlight javascript"><pre><div class="line"><span class="comment">// some source from regularjs</span></div><div class="line"></div><div class="line">walkers.expression = <span class="function"><span class="keyword">function</span><span class="params">(ast)</span></span>{</div><div class="line">  <span class="keyword">var</span> node = <span class="built_in">document</span>.createTextNode(<span class="string">""</span>);</div><div class="line">  <span class="keyword">this</span>.$watch(ast, <span class="function"><span class="keyword">function</span><span class="params">(newval)</span></span>{</div><div class="line">    dom.text(node, <span class="string">""</span> + (newval == <span class="literal">null</span>? <span class="string">""</span>: <span class="built_in">String</span>(newval)));</div><div class="line">  })</div><div class="line">  <span class="keyword">return</span> node;</div><div class="line">}</div></pre></figure>

<p>as shown above, once the expression changed, node.textContent(or innerText) will changes synchronous.</p>
<p>Compare to string-based template, instead of <code>innerHTML</code>, it use <code>DOM</code> api(createElement, setAttribute, createTextNode…etc ) to generate the dom. so it is safe.</p>
<p>In fact, in compiling phase, the most difference between Living template and dom-based template is: __dom-based template act a reshaping on dom nodes, But living template is building that according to the resuable AST.</p>
<h3 id="living_template’s_clever_brother_——_React">living template’s clever brother —— React</h3>
<p>React can be considered as a templating solution，it avoid be coupled with <code>innerHTML</code> by using virtual dom which is created by nested function call(you can also use jsx syntax)</p>
<p><strong>Example</strong></p>
<figure class="highlight"><pre><div class="line">var MyComponent = React.createClass({</div><div class="line"> render: function() {</div><div class="line">   <span class="keyword">if</span> (<span class="keyword">this</span>.props.first) {</div><div class="line">     <span class="keyword">return</span> &lt;<span class="keyword">div</span> className=<span class="string">"first"</span>&gt;&lt;span&gt;A Span&lt;<span class="regexp">/span&gt;&lt;/</span><span class="keyword">div</span>&gt;;</div><div class="line">   } <span class="keyword">else</span> {</div><div class="line">     <span class="keyword">return</span> &lt;<span class="keyword">div</span> className=<span class="string">"second"</span>&gt;&lt;p&gt;A Paragraph&lt;<span class="regexp">/p&gt;&lt;/</span><span class="keyword">div</span>&gt;;</div><div class="line">   }</div><div class="line"> }</div><div class="line">});</div></pre></figure>

<p>which in regularjs</p>
<figure class="highlight html"><pre><div class="line">{#if first}</div><div class="line">  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"first"</span>&gt;</span><span class="tag">&lt;<span class="title">span</span>&gt;</span>A Span<span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div><div class="line">{#else}</div><div class="line">  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">className</span>=<span class="value">"second"</span>&gt;</span><span class="tag">&lt;<span class="title">p</span>&gt;</span>A Paragraph<span class="tag">&lt;/<span class="title">p</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>;</div><div class="line">{/if}</div></pre></figure>

<p><strong>Every one thinks in his way</strong>, And I prefer using template to describe my structure, do you?</p>
<h2 id="A_comparison_table">A comparison table</h2>
<p><strong>Warning: </strong></p>
<table>
<thead>
<tr>
<th>Contrast /Solutions</th>
<th>String-based templating</th>
<th>Dom-based templating</th>
<th>Living templating</th>
</tr>
</thead>
<tbody>
<tr>
<td>Example</td>
<td>Mustache,Dustjs</td>
<td>Angularjs, Vuejs</td>
<td>Regularjs 、Ractivejs、htmlbars</td>
</tr>
<tr>
<td>Syntax</td>
<td>&diams;&diams;&diams;</td>
<td>&diams;</td>
<td>&diams;&diams;&diams;</td>
</tr>
<tr>
<td>Living Dom</td>
<td>X</td>
<td>&diams;&diams;&diams;</td>
<td>&diams;&diams;&diams;</td>
</tr>
<tr>
<td>Security</td>
<td>&diams;</td>
<td>&diams;&diams;</td>
<td>&diams;&diams;&diams;</td>
</tr>
<tr>
<td>SVG support(*1)</td>
<td>X</td>
<td>&diams;&diams;</td>
<td>&diams;&diams;&diams;</td>
</tr>
<tr>
<td>Dom independent</td>
<td>&diams;&diams;&diams;</td>
<td>X</td>
<td>&diams;&diams;</td>
</tr>
<tr>
<td>Server Rendering</td>
<td>&diams;&diams;&diams;</td>
<td>&diams;</td>
<td>&diams;</td>
</tr>
</tbody>
</table>
<ol>
<li>no one can compeletely replace another one. </li>
<li>They are not necessarily incompatible, for example, you can use string-based template engine to generate template string for dom-based template.</li>
</ol>
<h3 id="Reference">Reference</h3>
<ol>
<li><a href="http://codingarchitect.wordpress.com/2012/10/22/template-engines/" target="_blank" rel="external">Template Engines by @Sendhil</a></li>
<li><a href="http://modernweb.com/2014/03/24/string-templating-considered-harmful/" target="_blank" rel="external">string-templating-considered-harmful</a></li>
</ol>
]]></content>
    <summary type="html">
    <![CDATA[<p>Templating is a technology that help us to represent data in different forms. </p>
<p>In the old days, choosing a appropriate template engine for client templating is not easy, beacuse you were left with little other choice. Nowadays, choosing templating engine is still a big probelm, beacuse there are so many template engines and most of them seems do nothing different(<a href="http://garann.github.io/template-chooser/" target="_blank" rel="external">Template-Engine-Chooser!</a> comes).</p>
<p>In this article, from a principle perspective ,we will have <strong>A comprehensive comparison of front-end templating solutions</strong>. there are some distinct types of solution that will be mentioned.</p>
<ol>
<li>String-based templating (String-based parser &amp; compiler)</li>
<li>Dom-based templating (Dom-based link &amp; compiler)</li>
<li>Living templating (combine String-based parser with Dom-based compiler)</li>
<li>Other:  <a href="https://github.com/mauricemach/coffeekup" target="_blank" rel="external">Coffeekup: Inner DSL based on coffeescript syntax</a></li>
</ol>
<p>The article won’t  take the fourth type into detail, except for <a href="https://github.com/facebook/react" target="_blank" rel="external">React</a>. But you will find that react is very similiar with Living templating. beacuse all them is compeletely independent with <code>innerHTML</code>.</p>
<p>Before diving into detail, let’s talking about <strong><code>innerHTML</code></strong> first.</p>
]]>
    
    </summary>
    
      <category term="templating" scheme="http://regularjs.github.io/tags/templating/"/>
    
      <category term="regularjs" scheme="http://regularjs.github.io/tags/regularjs/"/>
    
      <category term="angularjs" scheme="http://regularjs.github.io/tags/angularjs/"/>
    
  </entry>
  
  <entry>
    <title><![CDATA[Rethink declarative animation]]></title>
    <link href="http://regularjs.github.io/blog/2014/07/26/2014-7-26-animation-rethink/"/>
    <id>http://regularjs.github.io/blog/2014/07/26/2014-7-26-animation-rethink/</id>
    <published>2014-07-25T16:00:00.000Z</published>
    <updated>2015-07-09T10:05:00.000Z</updated>
    <content type="html"><![CDATA[<h2 id="Introduction">Introduction</h2>
<p>Today, beacuse of new trends like <a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" rel="external">material design</a> and motion design, the animation is become more and more important in web-development.</p>
<p>On the other hand, thanks for the standardized <a href="">web-component</a> and frameworks like angularjs, knockoutjs, reactjs and vuejs etc.  building the view of application in declartive way is coming into popular .</p>
<blockquote>
<p><strong>So, what about declarative animation? </strong></p>
</blockquote>
<p>This article serves to demonstrate an even better solution for declarative animation. before diving into detail, let’s first check ‘Real World  Declartive Animation’ .</p>
<a id="more"></a>
<h2 id="Real_World_Declartive_Animation">Real World  Declartive Animation</h2>
<p>This section will introduce the exsited approaches to implement declarative animation</p>
<h3 id="Angular">Angular</h3>
<p><a href="https://github.com/angular/angular.js" target="_blank" rel="external">angular</a> is the most popular framework that have nearly 27000 stars on github now. </p>
<p>in angularjs,  animation support is based on the module <code>ngAnimate</code> . The directives that support animation automatically are: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass.</p>
<p>you need to define the appropriate CSS classes or to register a JavaScript animation via the module.animation() function.</p>
<p><strong>Example</strong></p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>&gt;</span><span class="css"></span></div><div class="line"><span class="class">.slide</span><span class="class">.ng-enter</span>, <span class="class">.slide</span><span class="class">.ng-leave</span> <span class="rules">{</span></div><div class="line">  <span class="rule"><span class="attribute">-webkit-transition</span>:<span class="value"><span class="number">0.5s</span> linear all</span></span>;</div><div class="line">  <span class="rule"><span class="attribute">transition</span>:<span class="value"><span class="number">0.5s</span> linear all</span></span>;</div><div class="line"><span class="rule">}</span></div><div class="line"></div><div class="line"><span class="class">.slide</span><span class="class">.ng-enter</span> <span class="rules">{ <span class="rule">}</span></span>        <span class="comment">/* starting animations for enter */</span></div><div class="line"><span class="class">.slide</span><span class="class">.ng-enter-active</span> <span class="rules">{ <span class="rule">}</span></span> <span class="comment">/* terminal animations for enter */</span></div><div class="line"><span class="class">.slide</span><span class="class">.ng-leave</span> <span class="rules">{ <span class="rule">}</span></span>        <span class="comment">/* starting animations for leave */</span></div><div class="line"><span class="class">.slide</span><span class="class">.ng-leave-active</span> <span class="rules">{ <span class="rule">}</span></span> <span class="comment">/* terminal animations for leave */</span></div><div class="line"><span class="tag">&lt;/<span class="title">style</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!--</span></div><div class="line">the animate service will automatically add .ng-enter and .ng-leave to the element</div><div class="line">to trigger the CSS transition/animations</div><div class="line">--&gt;</div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"slide"</span> <span class="attribute">ng-if</span>=<span class="value">"Expression"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>when the <code>Expression</code> is evaluated to <code>true</code>, the  class<code>ng-enter</code> is added first to  prepares initial state, then <code>ng-enter-active</code> is added at nextReflow(similar with <code>setTimeout(0)</code>). </p>
<h3 id="Anijs"><a href="https://github.com/anijs/anijs" target="_blank" rel="external">Anijs</a></h3>
<blockquote>
<p>Anijs: Declarative handling library for CSS animations. </p>
</blockquote>
<p>anijs’s main objective is to provide an eloquent, easy to translate, and quick to develop environment based on css animations.</p>
<p><strong>Example</strong></p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"main"</span> <span class="attribute">data-anijs</span>=<span class="value">"if: DOMContentLoaded, on: document, do: swing animated, after: holdAnimClass"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>the exmpale above means: </p>
<p>when  <code>DOMContentLoaded</code>  triggered on document, addClass <code>swing</code> <code>animated</code>, then hold them after animationend(or transitionend). </p>
<p>It is dead simple and intuitive. the only requirement is to include a 8kb jsfile(minified, no gzip).</p>
<h3 id="Vuejs"><a href="http://vuejs.org/" target="_blank" rel="external">Vuejs</a></h3>
<p>vuejs’s animation-support is very lightweight. just like angular, it hooks the element’s lifecycle at <code>enter</code> and <code>leave</code>  (based on directive, e.g. <code>v-if</code>). you can use three directive to customize your animation</p>
<ol>
<li><code>v-animation</code>  animation based on class and animation</li>
<li><code>v-transition</code>: animation based on class and transition </li>
<li><code>v-effect</code>: custom animation extension.</li>
</ol>
<p><strong>example</strong><br>use <code>animation</code> or <code>transition</code></p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"animated"</span> <span class="attribute">v-if</span>=<span class="value">"show"</span> <span class="attribute">v-animation</span>&gt;</span>Look at me!<span class="tag">&lt;/<span class="title">p</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"msg"</span> <span class="attribute">v-if</span>=<span class="value">"show"</span> <span class="attribute">v-transition</span>&gt;</span>Hello!<span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></pre></figure>

<p>use custom effect</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">v-effect</span>=<span class="value">"my-effect"</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></pre></figure>



<figure class="highlight javascript"><pre><div class="line">Vue.effect(<span class="string">'my-effect'</span>, {</div><div class="line">    enter: <span class="function"><span class="keyword">function</span> <span class="params">(el, insert, timeout)</span> </span>{</div><div class="line">        <span class="comment">// insert() will actually insert the element</span></div><div class="line">    },</div><div class="line">    leave: <span class="function"><span class="keyword">function</span> <span class="params">(el, remove, timeout)</span> </span>{</div><div class="line">        <span class="comment">// remove() will actually remove the element</span></div><div class="line">    }</div><div class="line">})</div></pre></figure>

<p>To be honest, I don’t know why vuejs make distinguish between these three cases.</p>
<h3 id="React"><a href="http://facebook.github.io/react/" target="_blank" rel="external">React</a></h3>
<p>React’s animation support is based on the low-level API: <code>ReactTransitionGroup</code>. you can check the introduction of <code>ReactCSSTransitionGroup</code>(High-level API) on its <a href="http://facebook.github.io/react/docs/animation.html#getting-started" target="_blank" rel="external">animation page</a></p>
<p><strong>Example</strong></p>
<figure class="highlight"><pre><div class="line"><span class="javadoc">/** <span class="javadoctag">@jsx</span> React.DOM */</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;</div><div class="line"></div><div class="line"><span class="keyword">var</span> TodoList = React.createClass({</div><div class="line">  <span class="comment">// ignored some methods for short</span></div><div class="line">  render: function() {</div><div class="line">    <span class="keyword">var</span> items = <span class="keyword">this</span>.state.items.map(function(item, i) {</div><div class="line">      <span class="keyword">return</span> (</div><div class="line">        &lt;div key={item} onClick={<span class="keyword">this</span>.handleRemove.bind(<span class="keyword">this</span>, i)}&gt;</div><div class="line">          {item}</div><div class="line">        &lt;/div&gt;</div><div class="line">      );</div><div class="line">    }.bind(<span class="keyword">this</span>));</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;div&gt;</div><div class="line">        &lt;button onClick={<span class="keyword">this</span>.handleAdd}&gt;Add Item&lt;/button&gt;</div><div class="line">        &lt;ReactCSSTransitionGroup transitionName=<span class="string">"example"</span>&gt;</div><div class="line">          {items}</div><div class="line">        &lt;/ReactCSSTransitionGroup&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    );</div><div class="line">  }</div><div class="line">});</div></pre></figure>

<p>The element that wrapped by  <code>ReactCSSTransitionGroup</code> can animate when it is injected to or leave from the component.  it will get the <code>example-enter</code> CSS class and the <code>example-enter-active</code> CSS class added in the next tick (similar with angular). This is a convention based on the transitionName prop.</p>
<h3 id="Summary">Summary</h3>
<p>compare with the <code>JavaScript-Based Animation</code>(e.g.  <a href="http://velocityjs.org/" target="_blank" rel="external">Velocity.js</a> or jquery), the <code>declarative animation</code> that introduced above is obviously less flexible. for example:</p>
<ol>
<li>only works in given environment .(e.g. when element <code>enter</code> or <code>leave</code>)</li>
<li>can not chainable</li>
<li>can not combine with other elements’s  animation</li>
<li>developer know nothing about the phase of the animation. (image that you need do some work in javascript when the animation is done)</li>
</ol>
<h2 id="An_Even_Better_Solution_for_declarative_animation!">An Even Better Solution for declarative animation!</h2>
<p>The solution  introduced later that has been implemented in <a href="https://github.com/regularjs/regular" target="_blank" rel="external">regularjs</a> yet. and it can be full-supported by any framework that is data-driven(e.g. angularjs, vuejs, ractivejs..).</p>
<p>the solution is based on single directive: <code>r-animation</code>. </p>
<p>Syntax</p>
<figure class="highlight"><pre><div class="line"></div><div class="line">&lt;div r-animation=<span class="string">"Sequence"</span>&gt;&lt;/div&gt;</div><div class="line"></div><div class="line"><span class="label">Sequence:</span></div><div class="line">  Command (<span class="string">";"</span> Command)*</div><div class="line"></div><div class="line"><span class="label">Command:</span></div><div class="line">  CommandName<span class="string">":"</span> Param</div><div class="line"></div><div class="line"><span class="label">CommandName:</span> [-\w]+</div><div class="line"></div><div class="line"><span class="label">Param:</span> [^<span class="comment">;]+</span></div></pre></figure>

<p>The following sections will raise several questions and solve them later by <code>r-animation</code>. </p>
<blockquote>
<p><strong>please be a patience man until compelete the rest of the page, you will find the power of <code>r-animation</code> !</strong></p>
</blockquote>
<p><em>the examples will depend on awesome <a href="daneden.github.io/animate.css">animate.css</a> for some css-related animation.</em> </p>
<h3 id="Question_1:_When_the_animation_start">Question 1: When the animation start</h3>
<p>There are two types of Command: 1. <code>trigger</code>   2. <code>step</code>. </p>
<p><code>trigger</code> is used to trigger a animation sequence. and <code>step</code> is used to define a single animation.</p>
<p><strong>Command on</strong> (trigger): when specified event is triggered , starting the animation.</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">r-animation</span>=<span class="value">"on: click; class:  animated swing;"</span>&gt;</span> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>this example means: </p>
<ol>
<li>when the element is clicked, trigged the animations.</li>
<li>Command <code>class</code> will addclass <code>animated swing</code>(maybe trigger animation) to element, when  the <code>animationend</code>(or <code>transitionend</code>) triggered, remove the class.</li>
<li>animation done</li>
</ol>
<h4 id="however,_how_to_hook_the_enter_and_leave_time_on_element?">however, how to hook the <code>enter</code> and <code>leave</code> time on element?</h4>
<p>regularjs emit the mock <code>enter</code> and <code>leave</code> event for hooking the element’s lifycle, you can also use <code>on</code> to handle it;</p>
<figure class="highlight html"><pre><div class="line"></div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box'</span> <span class="attribute">r-hide</span>= <span class="attribute">r-animation</span>=<span class="value">"</span></span></div><div class="line">  on: enter; class: animated bounceIn;</div><div class="line">  on: leave; class: animated bounceOut"&gt;</div><div class="line">  Box: enter</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>it is valid that defining multiply <code>trigger</code> on single <code>r-animation</code>. every <code>trigger</code> will create new animtion sequence.</p>
<h4 id="Is_there_any_other_trigger?">Is there any other trigger?</h4>
<p>now , we can take advantage of the data-driven framework to implement a more flexible command than <code>on</code> .</p>
<p><strong>Command when</strong> (trigger): when the specifed Expression is evaluated to true, starting the animation.</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box box-2'</span>  <span class="attribute">r-animation</span>=<span class="value">"when: test === true; class: animated swing"</span>&gt;</span></div><div class="line">Box2: triggered when test === true</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>when the <code>test === true</code> is computed to true, the animation will start.</p>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/gkcKl/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<h3 id="Question_2:_How_to_make_the_animation_chainable?">Question 2: How to make the animation chainable?</h3>
<p><code>r-animation</code> is born to support chainable animation,you can simply sepecify multiply <code>steps</code> after one <code>trigger</code>.</p>
<p><strong>Example</strong></p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">   "<span class="attribute">on:click</span>; </div><div class="line">      <span class="attribute">class:</span> <span class="attribute">animated</span> <span class="attribute">swing</span>;</div><div class="line">      <span class="attribute">class:</span> <span class="attribute">animated</span> <span class="attribute">shake</span>;</div><div class="line">      <span class="attribute">class:</span> <span class="attribute">animated</span> <span class="attribute">bounceOut</span>;</div><div class="line">      <span class="attribute">class:</span> <span class="attribute">animated</span> <span class="attribute">bounceIn</span>;</div><div class="line">        "&gt;</div><div class="line">  click me</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>now, you will see the steps animate one by one.</p>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/kCqzJ/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<h3 id="Question_3:_How_to_animation_two_element_step_by_step?">Question 3: How to animation two element step by step?</h3>
<p>Thanks for the data-driven system. you can use the <code>call</code> command for evaluating a Expression. after evaluating, the digest phase(regularjs is also based on <strong>dirty-check</strong>) will be automately triggered, it can trigger other animation (work with <code>when</code>). </p>
<p><strong>Command call</strong>: evaluted a Expression, then enter the component’s digest phase. finaly step to next animation.</p>
<p><strong>Example</strong></p>
<figure class="highlight html"><pre><div class="line"></div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">     "<span class="attribute">when:test</span>; </div><div class="line">        <span class="attribute">class:</span> <span class="attribute">swing</span> ;</div><div class="line">        <span class="attribute">call:</span> <span class="attribute">otherSwing</span>=<span class="value">true</span> ;</div><div class="line">        <span class="attribute">class:</span> <span class="attribute">shake</span>"&gt;</div><div class="line">  box1: trigger by checkbox</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div><div class="line">  </div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">     "<span class="attribute">when:</span> <span class="attribute">otherSwing</span>; </div><div class="line">        <span class="attribute">class:</span>  <span class="attribute">swing</span>; </div><div class="line">      "&gt;box2: after box1 swing<span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>steps as follow:</p>
<ol>
<li>when <code>test</code> is computed to true, start box1’s animation</li>
<li>swing then call <code>otherSwing = true</code>;</li>
<li>box2’s <code>otherSwing</code> is evaluted to <code>true</code>. </li>
<li>box2 shakes, meanwhile box1 shakes;</li>
<li>done.</li>
</ol>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/aHwoh/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<p>thanks for <code>call</code> and data-driven system, we can staying competitive with <code>javascript based animation</code> on control.</p>
<h3 id="Question_4:_Is_there_any_other_buildin_command?">Question 4: Is there any other buildin command?</h3>
<ul>
<li><p><code>wait</code>: delay for next animation</p>
<p><strong>example</strong></p>
</li>
</ul>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">     "<span class="attribute">on:click</span>; </div><div class="line">        <span class="attribute">class:</span> <span class="attribute">swing</span> ;</div><div class="line">        <span class="attribute">wait:</span> <span class="attribute">2000</span> ;</div><div class="line">        <span class="attribute">class:</span> <span class="attribute">shake</span>"&gt;</div><div class="line">  wait: click me</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>  the example means: after clicking, swing then waiting 2000ms, finally shake.</p>
<ul>
<li><p><code>style</code>: set style and waiting the <code>transitionend</code> (if the style trigger the <code>transition</code>)</p>
<p><strong>example</strong></p>
</li>
</ul>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">     "<span class="attribute">on:</span> <span class="attribute">click</span>; </div><div class="line">        <span class="attribute">class:</span>  <span class="attribute">swing</span>; </div><div class="line">        <span class="attribute">style:</span> <span class="attribute">color</span> #<span class="attribute">333</span>;</div><div class="line">        <span class="attribute">class:</span> <span class="attribute">bounceOut</span>;</div><div class="line">        <span class="attribute">style:</span> <span class="attribute">display</span> <span class="attribute">none</span>;</div><div class="line">      "&gt;style: click me <span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>  add <code>transition</code> to make color fading effect work.</p>
<figure class="highlight css"><pre><div class="line"><span class="class">.box</span><span class="class">.animated</span><span class="rules">{</span></div><div class="line">   <span class="rule"><span class="attribute">transition</span>:<span class="value">  color <span class="number">1s</span> linear</span></span>;</div><div class="line"><span class="rule">}</span></div></pre></figure>

<p>  example means: after clicking, swing then set <code>style.color=#333</code>(trigger transition)… </p>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/FhwGC/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<p>you can also extend custom command by your self. </p>
<h3 id="Question_5:_How_to_extend_Custom_Command?">Question 5: How to extend Custom Command?</h3>
<p>you can extend javascript-based Animation via  <code>Component.animation(name, handle)</code>. </p>
<p>for example, we need fading animation.</p>
<figure class="highlight javascript"><pre><div class="line">Regular.animation(<span class="string">"fade"</span>, <span class="function"><span class="keyword">function</span><span class="params">(step)</span></span>{</div><div class="line">  <span class="keyword">var</span> param = step.param,</div><div class="line">    element = step.element,</div><div class="line">    fadein = param === <span class="string">"in"</span>,</div><div class="line">    step = fadein?  <span class="number">1.05</span>: <span class="number">0.9</span>;</div><div class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span><span class="params">(done)</span></span>{ </div><div class="line">    <span class="keyword">var</span> start = fadein?  <span class="number">0.01</span>: <span class="number">1</span>;</div><div class="line">    <span class="keyword">var</span> tid = setInterval(<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</div><div class="line">      start *= step </div><div class="line">      <span class="keyword">if</span>(fadein && <span class="number">1</span>- start &lt; <span class="number">1e-3</span>){</div><div class="line">        start = <span class="number">1</span>; </div><div class="line">        clearInterval(tid);</div><div class="line">        done()</div><div class="line">      }<span class="keyword">else</span> <span class="keyword">if</span>(!fadein && start &lt; <span class="number">1e-3</span>){</div><div class="line">        start = <span class="number">0</span>;</div><div class="line">        clearInterval(tid);</div><div class="line">        done()</div><div class="line">      }</div><div class="line">      element.style.opacity = start;</div><div class="line">    }, <span class="number">1000</span> / <span class="number">60</span>) </div><div class="line">  }</div><div class="line">})</div></pre></figure>

<p>describe in template</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">       "<span class="attribute">on:click</span>; </div><div class="line">        <span class="attribute">class:</span> <span class="attribute">swing</span> ;</div><div class="line">        <span class="attribute">fade:</span> <span class="attribute">out</span> ;</div><div class="line">        <span class="attribute">fade:</span> <span class="attribute">in</span>;</div><div class="line">         "&gt;</div><div class="line">    fade: click me</div><div class="line"><span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>the only thing you need to do is that: when your animation is compelete, call the function <code>done</code>.</p>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/qJvry/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<p>you can also check the builtin’s sourcecode on <a href="https://github.com/regularjs/regular/blob/master/src/directive/animation.js#L71" target="_blank" rel="external">github</a>. it is realy dead simple!</p>
<h3 id="Question_6:_Need_An_compeletely_Example?">Question 6: Need An compeletely Example?</h3>
<p>let’s create a infinite animation for joke.</p>
<figure class="highlight html"><pre><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">      "<span class="attribute">when:test</span>=<span class="value">=1;</span> </div><div class="line">         <span class="attribute">class:</span> <span class="attribute">shake</span>;</div><div class="line">         <span class="attribute">call:</span> <span class="attribute">test</span>=<span class="value">2</span> ;"</div><div class="line">         &gt;</div><div class="line">   shake</div><div class="line"> <span class="tag">&lt;/<span class="title">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">    "<span class="attribute">when:</span> <span class="attribute">test</span>=<span class="value">=2;</span> </div><div class="line">       <span class="attribute">class:</span>  <span class="attribute">bounce</span>; </div><div class="line">       <span class="attribute">call:</span> <span class="attribute">test</span>=<span class="value">3;</span></div><div class="line">     "&gt;box2: bounce<span class="tag">&lt;/<span class="title">div</span>&gt;</span></div><div class="line"> </div><div class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">'box animated'</span> <span class="attribute">r-animation</span>=</span></div><div class="line">  "<span class="attribute">when:</span> <span class="attribute">test</span>=<span class="value">=3;</span> </div><div class="line">     <span class="attribute">class:</span>  <span class="attribute">swing</span>; </div><div class="line">     <span class="attribute">call:</span> <span class="attribute">test</span>=<span class="value">1;</span></div><div class="line">   "&gt;box2: swing<span class="tag">&lt;/<span class="title">div</span>&gt;</span></div></pre></figure>

<p>just as the logic described by the template. the sequence will never stopped.</p>
<blockquote>
<p><a href="http://codepen.io/leeluolee/pen/vrgqu/" target="_blank" rel="external"><span class="icon-arrow-right"> <strong>Result on Codepen</strong></span></a></p>
</blockquote>
<h2 id="End">End</h2>
<blockquote>
<h3 id="if_the_post_is_helpful_to_you,_gives_regularjs_a_star">if the post is helpful to you,  <a href="https://github.com/regularjs/regular" target="_blank" rel="external">gives regularjs a star</a></h3>
</blockquote>
]]></content>
    <summary type="html">
    <![CDATA[<h2 id="Introduction">Introduction</h2>
<p>Today, beacuse of new trends like <a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" rel="external">material design</a> and motion design, the animation is become more and more important in web-development.</p>
<p>On the other hand, thanks for the standardized <a href="">web-component</a> and frameworks like angularjs, knockoutjs, reactjs and vuejs etc.  building the view of application in declartive way is coming into popular .</p>
<blockquote>
<p><strong>So, what about declarative animation? </strong></p>
</blockquote>
<p>This article serves to demonstrate an even better solution for declarative animation. before diving into detail, let’s first check ‘Real World  Declartive Animation’ .</p>
]]>
    
    </summary>
    
  </entry>
  
</feed>