Une micro-bibliothèque d'interface utilisateur ressemblant à React

Tags personnalisés • Syntaxe plaisante • DOM virtuel • Très léger

Pourquoi avons-nous besoin d’une autre bibliothèque UI ?

La scène front-end est en effet bondée, mais nous pensons honnêtement que la vraie solution se trouve encore “quelque-part”. Nous pensons que Riot offre le bon équilibre pour résoudre ce grand puzzle. React semble y parvenir mais a de sérieux points faibles que Riot viendra corriger.

Donc - voici pourquoi nous en avons besoin:

1. Tags personnalisés

Riot amène les tags personnalisés à tous les navigateurs.

<todo>

  <!-- layout -->
  <h3>{ opts.title }</h3>

  <ul>
    <li each={ item, i in items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input>
    <button>Ajouter #{ items.length + 1 }</button>
  </form>

  <!-- style -->
  <style scoped>
    h3 {
      font-size: 14px;
    }
  </style>

  <!-- logic -->
  <script>
    this.items = []

    add(e) {
      var input = e.target[0]
      this.items.push(input.value)
      input.value = ''
    }
  </script>

</todo>

Un tag personnalisé colle ensemble le HTML correspondant et le JavaScript pour former un composant réutilisable. Considérez ça comme React + Polymer mais avec une syntaxe plaisante et un temps d’apprentissage très faible.

Lisible par les humains

Les tags personnalisés permettent de concevoir des vues complexes avec HTML. Votre application ressemblera peut-être à quelque chose comme ça:

<body>

  <h1>Communauté Acme</h1>

  <forum-header/>

  <forum-content>
    <forum-threads/>
    <forum-sidebar/>
  </forum-content>

  <forum-footer/>

  <script>riot.mount('*', { api: forum_api })</script>
</body>

La syntaxe HTML est le langage de facto du Web et a été conçu pour faire des interfaces utilisateur. La syntaxe est explicite, l’imbrication des éléments est inhérente au langage, et les attributs offrent un moyen propre pour fournir des options aux tags personnalisés.

Les tags Riot sont compilés en JavaScript pur avant que les navigateurs puissent les exécuter.

DOM virtuel

Proche des standards

Prêt pour l’outillage

2. Simple et minimaliste

Le minimalisme de Riot le distingue des autres:

1. Syntaxe plaisante

Un des objectifs de conception était d’introduire une syntaxe de tag puissante avec le minimum possible de code de préparation:

2. Faible courbe d’apprentissage

Riot a entre 10 et 100 fois moins de méthodes dans son API que les autres bibliothèques UI.

3. Taille très légère

react.min.js – 33.27KB (gzip)

polymer.html – 49.38KB (gzip)

riot.min.js – 10.85Ko (gzip)

4. Petit, mais complet

Riot a tous les blocs de construction essentiels pour des applications modernes côté client:

Riot est une “pile ouverte”. Il est conçu pour les développeurs qui veulent éviter les idiomes spécifiques d’un framework. Les outils génériques vous permettent de mélanger et assortir les modèles de conception. Des systèmes comme Facebook Flux peuvent être faits soi-même.

J’ai regardé un exemple riot.js, et ça m’a paru tellement clair que c’en est effrayant. @paulbjensen

J’ai bricolé avec #RiotJS pendant une heure. Je l’ai installé avec Gulp, Browserify et Babel en un rien de temps. Je l’aime beaucoup jusqu’ici! @AndrewDelPrete

Aujourd’hui, j’ai utilisé #riotjs 2.0 pour la première fois et je peux admettre que ce sera une relation à long terme #js hautement recommandé. @gianlucaguarini

J’ai aimé l’idée de #reactjs avec #flux mais j’aime #riotjs avec #riotcontrol encore plus! @tscok

En train de regarder RiotJS https://muut.com/riotjs/ — sidéré par sa simplicité. @defeated

J’ai joué avec riot.js et je l’aime tellement plus que React. Minimaliste, rapide et avec une API compréhensible. @juriansluiman

Conclusion

Riot, c’est les Web Components pour tout le monde. Considérez ça comme React + Polymer mais sans le superflu. C’est intuitif à l’usage et ça ne pèse presque rien. Et ça marche dès aujourd’hui. On ne réinvente pas la roue, mais on récupère plutôt les meilleures parties de ce qui existe autour pour en faire l’outil le plus simple possible.

Nous devrions nous concentrer sur les composants réutilisables plutôt que les templates. D’après les développeurs de React:

“Les templates séparent les technologies, pas les problèmes.”

En ayant la mise en page et la logique liées ensemble sous le même composant, l’ensemble du système devient plus clair. Nous respectons React pour cette importante perspicacité.

L’article de blog initial

From React to Riot 2.0 (anglais)