(manatlan) RiotJS thougts

(manatlan)

RiotJS thougts

Home

back 2015/10/29 22:12

RiotJS thougts

It fits my brain ...

I've spent some time on angular2, building a 'starter kit', with lot of components ready-to-use (menu, notifier, modals, services ...). I'm happy about the result.

But I found RiotJS while surfing on a javascript trouble. I had a look at the tuto, and was blown by the simplicity. 2 hours later, I'd full rebuilt my starter kit, without any frustations, and with a lot of fun (remembering the good old days of angularjs (v1)).

RiotJS is clean and comprehensible. Building a component is easy (far from angular2). Building a working solution is quick (far from ...). It's a real pleasure to code with it, it just works as expected.

The size of the riot runtime (with compiler) is around 18kB, compared to angular2+router+typescript+traceur around 2MB. The loading/instanciation time is very quick. The ability to code with classic javascript, or whatever you want is great.

Angular2 with typescript is cool. But life is too short to take some time to fight with types and declarations at all stages. It's like coding in java instead of python. I think I will continue with RiotJS, it's fun again, and you ve got great results quickly !

And you can start coding with a notepad (or SciTE ;-).

<!DOCTYPE html>
<html>
    <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot+compiler.min.js"></script>

      <script type="riot/tag">
        <boum>
          <span class={color:selected} onclick={change}>hello {name}</span>
          <style scoped>
            span {cursor:pointer;border:1px dotted grey;}
            span.color {background:red}
          </style>
          this.name=this.opts["name"];
          this.selected=false;
          change(e) {
            this.selected=!this.selected;
          }
        </boum>
      </script>
    </head>

    <body>
      <boum name="world"></boum>
      <boum name="you"></boum>
    </body>

    <script>
      riot.mount("*");
    </script>
</html>

Tags: angular