Discussion :

[SylvainPV]

RiotJS 2.3.0 : nouvelle version majeure
pour cette microbibliothèque UI qui ressemble à React

RiotJS est une petite bibliothèque d'interface utilisateur reprenant beaucoup des idées du framework React, mais avec une API largement simplifiée et une taille moindre. Le but de cette bibliothèque est de fournir tous les blocs de construction essentiels pour des applications modernes côté client :

• tags personnalisés et approche composants ;
• vues « réactives » mises à jour via un mécanisme de DOM virtuel ;
• programmation événementielle pour faire des API avec des modules isolés ;
• un routeur pour s'occuper de l'URL et du bouton précédent.

La version 2.3.0 de Riot vient d'être publiée et il s'agit d'un gros pas en avant pour l'équipe de muut, qui résulte de plusieurs mois de travail. Elle fixe de nombreux bogues, et a permis la séparation de Riot en six modules : core, cli, route, observable, tmpl et compiler.

Parmi les autres changements, on note également :

• un nouveau routeur minimaliste prenant en charge l'API History de HTML5 ;
• une grosse réécriture du compilateur, du moteur de templates et de l'interface en ligne de commande ;
• un changement dans les propriétés internes pour mieux supporter les objets provenant de certaines bases de données ;
• un nouveau comportement, plus prédictible, pour les boucles dans les templates.

Le site de Riot se voit également traduire en ce moment en d'autres langues, dont le français par votre humble serviteur. La documentation de la 2.3.0 en français devrait logiquement arriver ces prochains jours.

Source : riotjs.com


Et vous ?

Connaissez-vous cette bibliothèque ?
Quelle bibliothèque UI utilisez-vous ?

Voir aussi :

Forum JavaScript

[Ethan 0x21]

Alléluia, quelqu'un qui connais Riot.js sur ce forum adepte des grosses usines à gaz (AngularJS, React & co) vorace en ressources cognitives !

(* Avertissement : l'analyse et l'argumentation ci dessous sont déconseillés à un public pro-Micro$oft & co et autres adeptes des usines à gaz *)

Je connais cette bibliothéque et je la recommande grandement, elle est dans les principes fondateur même de l'Open Source à savoir le K.I.S.S ( Keep It Simple as Stupid).

On créer aisément des composants réutilisables sous forme de simples tags à précompiler, ou même sans compilation (la compilation à la volé est trés oprimisée), qui peuvent également s'imbriquer, sans employer une syntaxe dégeulasse propriétaire (cf : JSX), de plus avec l'utilisation d'une implémentation FLUX (tel que RiotControl ou Flux-Riot) les tags sont trés facilement interopérables entre eux, via un jeux d'événements auxquels ont peut abonner d'autres composants.

A vrai dire et pour être honnête je trouve sa particuliérement affigeant que juste parce-que Facebook utilise React (Dog Fooding Spotted !), Google Angular (Dog Fooding Spotted again !), etc... que toute la masse des développeurs front-end doit suivre (comme pour leurs homologues côté serveur d'ailleurs avec Symphony l'obése et son compére Laravel le glouton top tendance comparé à ce pauvre codeigniter qui se fait lynché en l'accusant de tout les mots en permanence par les moutons , bref hors-sujet... passons).

Ces frameworks sont d'une charge cognitive phénoménale, et d'une obésitée idiominique (non non c'est français), on alloue toutes sa ressource cérébrale à apprendre une usine à gaz et dés que cette derniére change de version (comme ce chers AngularJS 1.x qui passe en 2.0), ou que la mode change (un peu comme les fringues oui ) il faut tout réapprendre parce-que on adore perdre du temps (et de l'argent donc ) pour utiliser les derniéres technologies obéses à la mode comme la masse, et que sinon on va devoir ce trouver un autre emplois vu qu'on est plus développeur Javascript mais développeur <Truc obése à la mode et long à apprendre > !


En bref, essayez RiotJS c'est l'adopter, le seule petit reproche qu'on peut lui faire, c'est ses implémentations du pattern FLUX tel RiotControl ou Flux-Riot, elles ne permettent pas de gérer plusieurs Vues associé à un unique Store, ou alors il faut se bricoler des trucs à la gros gorer avec des discriminants basé sur des ID en paramétres des événements.... mais bon je compte sur la communauté pour corriger un jour ce défaut (qui au passage existe aussi chez React de base).

[SylvainPV]

Oui c'est aussi mon crédo, Keep It Simple, Stupid. Avec "Best API is no API", dérivé de "Best interface is no interface".

React a beau être plein de bonnes idées, 130KB pour juste une lib de gestion de vue c'est une aberration, surtout au vu de ses ambitions en web mobile. Et le diff String-based c'est un petit exploit technique, mais d'une complexité absurde là aussi. C'est là que Riot tire son épingle du jeu, en piquant les bonnes idées avec une codebase très simple.

Ceci dit Riot souffre aussi de ses défauts d'outsider: un peu d'amateurisme sur la documentation et l'outillage, certaines parties de code très "fragiles" et des opinions parfois trop tranchées, comme celle de ne pas se préoccuper des propriétés internes exposées. Il y a donc encore des améliorations à faire, le tout sera d'y parvenir tout en préservant la simplicité de Riot.

[Renaud 11]

Je ne peux qu'approuver le message d'Ethan.

Je ne suis pas un expert des technos / framework front-end mais j'ai une certaine expérience du développement qui fait que j'aime la simplicité d'utilisation de ce type de librairie. On ne passe pas de nombreux jours à comprendre la librairie/framework, à étudier une API plus longue que mon rouleau de papier toilette (pardon), à comprendre un comportement inattendu, d'embarquer 100 fonctionnalités alors que l'on a besoin de 2, ou encore à faire rentrer un carré dans un cercle quand on a besoin de quelque chose qui n'est pas prévu dans le framework.

Bien évidemment, à chaque projet avec ses spécificités et contraintes, différentes librairies/framework seront plus ou moins adaptés mais je pense qu'on aurait plus à gagner à utiliser ce type de librairie qui fait ce qu'on lui demande et pas plus, simplement et sans surprise.

Riot.js fait partie de celles-ci.

[danielhagnoul]

Je découvre Riot !

La documentation en français aide bien, mais il y a tout de même pas mal de choses à apprendre.

Premier tests, trop tôt pour dire si je vais l'adopter, mais pour l'instant, que du bonheur.

[JavaBean]

À ma connaissance il n'y a pas d'équivalent de React Native pour Riot.

[nevada51]

On créer aisément des composants réutilisables sous forme de simples tags à précompiler, ou même sans compilation (la compilation à la volé est trés oprimisée), qui peuvent également s'imbriquer, sans employer une syntaxe dégeulasse propriétaire (cf : JSX)

C'est ni dégueulasse, ni propriétaire.

[SylvainPV]

J'ai mis à jour la doc française pour la v2.3.1: http://riotjs.com/fr/

[sekaijin]

étant un adepte d'usine à gaz j'interviens ici car je trouve que certaines remarques ne sont pas pertinentes.

Riotjs est une lib pour faire des composants d'IHM réutilisable et rien de plus.
Riotjs ne contient rien d'autre que le strict nécéssaire pour créer des composants réutilisable.

Si je compare RIOJS à la partie qui fait la même chose dans ExtJS une des "usines à gaz" parmi les plus "usine à gaz" Riotjs ne pas fait beaucoup mieux en terme de taille. bref utiliser ExtJS pour seulement construire des composants réutilisable sans utiliser tout le reste est méchamment couteux et n'a aucuns sens. de même utiliser Riojs pour produire un framework aussi complet que ExtJS va nécessiter l'ajout d'un bon packet de code qui au final risque de couter très cher.

En fait pour moi cela revient à comparer excel avec un prog qui fait des additions.

Dans le même ordre d'idée Riotjs n'est en rien comparable à AngularJS
Riotjs permet de faire des IHM AngularJS implémente le pattern MVC sans faire d'IHM.
Donc comparer Riojs à AngularJS revient à comparer des cellules de la peau humaine au processus de fabrication d'un Airbus A380.

Si je reprends mon usine à gaz elle me propose un framework intégré qui mets en oeuvre plusieurs design patterns de programmation, divers mode de communication avec le serveur, une méthode et des outils pour créer des composants réutilisable. des composant prêt à l'emploie et un langage unique avec un modèle unique de programmation.

AngularJS me propose un des designs pattern avec au moins trois langage à maitriser
RioJS me propose un outil pour construire des composant réutilisable avec lui aussi trois langage et un modèle de programmation différent de celui d'AngularJS

Je suis loin très très loin de l'ensemble des éléments qui me sont nécessaire à l'écriture d'application.
que j'utilise l'un ou l'autre où les deux je dois maitriser plusieurs langages. si je les utilise ensemble je dois en plus maitriser deux modèle de programmation en javascript.

cela ne rend pas pour autant Riojs inintéressant. au contraire.
Il suffit de le prends pour ce qu'il sais faire et arrêter de vouloir comparer ce qui n'est pas comparable.

plutôt que de confronter AngularJS ou autre avec Riojs je pense qu'il serait plus opportun de chercher avec quels autres outils associer Riojs pour obtenir un ensemble cohérent qui prend en charge l'ensemble du développement.

par exemple pour les adeptes d'AngularJS Utiliser Riojs pour créer des composants et AnularJS pour le MVC se fait en quelque ligne de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
    ng-riot
    @author: lucasbrigida <lucasbrigida@gmail.com>
    @description: riot module for angular
 */
 
angular.module('angular-riot', [])
  .factory('riot', ['$window', '$log',
    function ($window, $log) {
 
      //Check dependency
      if (!$window.riot) {
        return $log.error('Riot not installed, install package run: "bower install riot -g", More information: https://muut.com/riotjs/download.html');
      }
 
      return $window.riot;
}])

Il suffit alors d'abandonner les bricolage d'angular en terme d'IHM et d'y substituer RiotJS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
angular.module('moduleName', ['angular-riot'])
  .controller('ctrlName', ['$scope', $document, 'riot', function ($scope, $document, riot) {
      $document.ready(function () { 
        riot.mount('todo', {
          title: 'I want to behave!',
          items: [
            { title: 'Avoid excessive coffeine', done: true },
            { title: 'Hidden item', hidden: true },
            { title: 'Be less provocative' },
            { title: 'Be nice to people' }
          ]
        });
      });
}]);

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>

A+JYT

[SylvainPV]

Riot est comparé à React et Polymer dans la doc officielle, rien d'autre. Je pense que le message d'Ethan était un coup de gueule plus général sur les choix techniques, au delà de Riot.

Mélanger Riot et Angular est une mauvaise idée car les deux ont un système de binding et de mise à jour de vues très différent et strictement incompatible. Mais bon, certains seront assez fous pour essayer, un peu comme avec ngReact

Pour ma part j'écris actuellement une app Electron avec Riot et rien d'autre. Je ne ressens pas le besoins d'outillage supplémentaire comme RiotControl, j'ai toujours trouvé ça assez superflu à vrai dire. Je fais moi-même ma décomposition MVC articulée autour d'un namespace global, et ça fait le café comme on dit.

[Invité]

AngularJs n'est en aucun cas une usine à gaz, au contraire, il est une aide fabuleuse au développement et automatise et structure tout, d'une excellente manière, avec des tas d'exemples sur Internet.
AngularJs permet de créer de petites applications très rapidement et de grosses apps.

je prédis à Angular Js et aux Bases NoSql en ligne comme Firebase un futur radieux.

Je prie qu'il supplante Java, dans le monde du Web, le plus vite possible.

[Ethan 0x21]

Bien entendu mon assertion est à prendre sur un ton ironique, je suis au fait que RiotJS relève plus de 'vim' et AngularJS de 'M$ Office Word', pour reprendre le même registre métaphorique que sekaijin.

Je dénonce simplement au travers de RiotJS, que la lois de Wirth (synthése : 'obésité' logicielle) se banalise et devient même acceptable pour nous (développeurs), ce qui est inefficient et irationnel.

Aparté : Est-ce normal que sur un i7 l'installation de logiciels comtemporains mettent autant voir parfois plus de temps que sur les précedentes génération de µProcesseurs (cf : allez faire un tour sur stackoverflow avec le keywork slow), qui n'a point 'ragekit' du temps d'installation du framework M$.Net... adaptation du concept d'obsolescence programmée à l'informatique dans une logique économique arrangeant certains ?

Une approche dicotomique du développement d'un logiciel comme proposé par RiotJS (Ex: RiotJS et mon moteur UI, Crossroad.js le routeur (modularisation du routeur RiotJS depuis 2.3.0), EventEmitter la lib de gestion événements, etc...) permet d'avoir un code portable++ en cas de défaut d'une des librairies composant le produit final, d'éviter de surcharger le logiciel final de code contingeant, d'éviter les idiomes et dogmes de conception et donc quelquepart d'arrêter de contribuer à la lois de Wirth.

En somme vous maitrisez et savez ce que vous faite ==> gains de performances,qualitée,maitrise et coûts.

Mais je le conçoit il reste plus facile par fénéantise intellectuelle et par prestige du moment auprès des employeurs de dire/faire ex: "je suis développeur AngularJS" ===> (classe ! top tendance, so proud, welcome in my enterprise dude !), que de dire "je développe en bonne intelligence en utilisant des briques de bases interchangeables comme RiotJS pour vous fournir un logiciel efficient et robuste, qui feront prendre conscience aux utilisateurs finaux qu'ils ont un I7 et non un dual-core, qui ne nécessitera pas un redéveloppement intégrale lors de la version X+1 du framework utilisé" ===> Gros autiste anti-conformiste, bac+5 dans une pochette surprise ? fumeur de weed ?

A bon entendeurs, mes dires n'impliques que moi, je pense simplement que le modèle de conception proposé par RiotJS et sa communauté est la bonne approche à avoir.

Essayer RiotJS c'est lui donner une chance c'est l'adopter et contribuer un peu à défaire la lois de Wirth

[SylvainPV]

Je profite de ce up pour vous dire que j'ai mis à jour cet aprem la documentation française de Riot à la dernière version (2.3.17). Elle devrait arriver sous peu sur le site officiel.

Je vous invite aussi à découvrir Vue.js, qui est très proche de Riot en philosophie de design, mais avec quelques atouts en plus en main: une meilleure détection de changements, de très bonnes perfs et un tooling plus mature. Si vous aimez Riot mais le trouvez incomplet ou pas assez poussé, Vue est sans doute une excellente alternative.