index.html

<title>snuggsi ツ - Benchmark</title>

<meta charset=UTF-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<style>
  section, label { display: block }
</style>

<hgroup>
  <h1>ツsnuggsi</h1>
  <h2>Benchmark</h2>
</hgroup>

<p>Influenced off the following talk <em>"<a href=https://youtu.be/6I_GwgoGm1w target=external>Choosing a Javascript Framework"</a> -</em> <cite>Rob Eisenberg former Angular 2 core team member</cite>

<p><a href=https://github.com/krausest/js-framework-benchmark>JS Framework Benchmark</a></p>
<p><a href=https://rawgit.com/krausest/js-framework-benchmark/67a05320ee3d485f059c3cb11fa2b872ded3c5bf/webdriver-ts/table.html>JS Framework Benchmark <em>(table)</em></a></p>
<p><a href=https://medium.com/@localvoid/how-to-win-in-web-framework-benchmarks-8bc31af76ce7>Win Web Framework</a></p>
<nav>
<a href=#mithril>Mithril.js</a>
<a href=#svelte>Svelte.js</a>
</nav>

<section id=properties>
  <section id=snuggsi>
  <header>snuggsi ツ</header>

  <pre>
  <code class=html>
  &lt;snuggsi-form&gt;

    &lt;form action=#&gt;
      &lt;label&gt;First Name &lt;input name=first value=John&gt;&lt;/label&gt;
      &lt;label&gt;Last Name  &lt;input name=last value=Doe&gt;&lt;/label&gt;
      &lt;label&gt;Full Name  &lt;output&gt;&#123;full&#125;&lt;/output&gt;&lt;/label&gt;
    &lt;/form&gt;

  &lt;/snuggsi-form&gt;
  </code>

  <code class=es>
  Element `snuggsi-form`

  (class extends HTMLElement {

    static oninput ()
      { this.render () }

    get full () {
      return `
        ${this.select ('[name=first]').value}
        ${this.select ('[name=last]').value}
      `
    }
  })
  </code>
  </pre>

  <snuggsi-form>


    <form action=#>
      <label>First Name <input name=first value=John></label>
      <label>Last Name  <input name=last value=Doe></label>
      <label>Full Name  <output name=full for='first,last'>{full}</output></label>
    </form>

  <script nomodule defer>
  Element `snuggsi-form`

  (class extends HTMLElement {

    static oninput ()
      { this.render () }

    get full () {
      return `
        ${this.select ('[name=first]').value}
        ${this.select ('[name=last]').value}
      `
    }
  })
  </script>

  </snuggsi-form>
  </section>

  <section class=angular2>
    <my-app>Loading...</my-app>
  </section>
</section>

<section id=svelte>
  <header>Svelte.js <em>(4kb)</em></header>

  <a href=https://svelte.technology/repl?version=1.17.0&gist=98bc872a8c8cdc71944a45848bbb8e94>Github</a>

 - Angular (135kb)
 - Svelte (4kb)
 - Vue + Vue-Router + Vuex + fetch (40kb)
 - React + React-Router + Redux + fetch (64kb)
</section>

<section id=mithril>
  <header>Mithril.js <em>(8kb)</em></header>

  <a href=https://github.com/lhorie/mithril.js>Github</a>

  Vue + Vue-Router + Vuex + fetch (40kb)
  React + React-Router + Redux + fetch (64kb)
  Angular (135kb)
</section>