Bonjour à tous !

Je me permets un petit post pour partager un framework sur lequel je travail depuis presque un an : O.js.
O.js propose un data-binding très simple, et s'affranchit complètement de l'utilisation de balises HTML (à part le style, tout se fait avec des fonctions JavaScript).

Je vous donne un lien pour une brève démonstration, suivi par des explications : https://codepen.io/MagicMixer/pen/GypWNp

A propos du code :

- Les 6 premières lignes sont simplement des références de fonctions, contenus dans l'objet O, et l'objet B (une extension pour BootStrap), afin de gagner du temps et de la lisibilité dans la suite du code.

- En ligne 8 j'initialise un objet contenant les données de l'application. Toute modification des propriétés de cet objet sera immédiatement restituée à l'écran en mettant automatiquement à jour le DOM, via le data-binding que je vais présenter.

- En ligne 17 j'initialise test avec DIV( ... ), qui est une fonction créant un objet O de type "div". (Equivalent à <div> ... </div>) Cette fonction peut prendre en paramètre des objets de configuration ({}), du text, ou d'autres objets O.

- En ligne 21 et 23 j'utilise TEXT(...), qui appelle O.text(...).  O.t(...) prend trois arguments d'entrés : (source, prop, setter(facultatif)). "source" est l'objet contenant les données, "prop" est le nom de la donnée à afficher, et "setter" est une fonction qui permet de traiter si besoin cette donnée avant l'affichage. A partir de maintenant, toute modification de source[prop] modifiera automatiquement le texte de TEXT(...).

- Ligne 25 on appelle une fonction IF( [source, prop], [condition1, contenu1], ... ,  [conditionN, contenuN] ) qui permet d'afficher du contenu selon des conditions. [source, prop] défini la donnée à utiliser dans les conditions, toute modification mettant à jour le IF. Puis les objets sont définis sous forme d'Array, contenant la condition et le contenu à afficher si vrai. Ici, on affiche "old" si age >= 25, "an adult" si 25 > age >= 18, "a child" sinon.

- Ligne 35 on ne fait plus du data-binding sur le texte, mais sur le style. Pour cela on utilise la fonction style des objets O, qui prend un objet décrivant le style. On peut affecter au propriétés de style, soit une valeur fixe (style({width:"0px"})), soit une valeur dynamique, avec un setter facultatif (style({width: [source, prop, (setter)] })). Ici le setter est défini en ligne 14, et transforme la propriété "timer" en un angle pour faire tourner le texte. A noter que la fonction ".c(...)" utilisée permet de définir la propriété "class" de l'objet dans le DOM.

- Ligne 37 on créé un Input de type Range, et on attache sa valeur (value) à la propriété timer, avec un setter pour la faire osciller (ligne 15).

- Ligne 41 et 43 on créé des boutons, et on appelle la fonction "click" pour leur donner une action.

- Ligne 42 on créé un Input de type Number. Les inputs ont trois propriétés utiles : source(source, prop), value(source, prop, setter) et target(source, prop, setter). Source et value sont équivalents, au détail près que value peut prendre un setter. Il définissent la valeur d'entrée de l'Input. Target quand à lui définit la cible de sortie de l'Input. Une quatrième propriété existe : combo(source, prop, setter), qui réunit en une seule source et target.

- Ligne 45 on définit un Input text pour modifier le nom. Vous pouvez vérifier, toute modification du nom est immédiatement affichée. De même que pour l'age.

- Finalement ligne 51, j'envoie l'application dans le DOM.

Tout d'abord, je vous remercie de votre intérêt pour mon travail. Toute critique ou question sera la bienvenue.

Ensuite, je tiens à dire que cette exemple ne présente qu'une maigre portion des capacités d'O.js. Le framework peut aussi gérer dynamiquement les tableaux, chaque ajout ou retrait d’élément modifie la vue en ajoutant ou retirant uniquement la partie modifiée sans reconstruire le reste. L'extension Bootstrap permet de gérer facilement le côté responsif de l'application, tout en limitant la quantité de classes à écrire. Tous les attributs des objets DOM, et toutes les propriétés de style peut être liés dynamiquement à des données. La fonction "close" des objets O permet de détacher toutes les données liés, évitant ainsi les fuites de mémoire. Et bien d'autres fonctionnalités restent à venir.

Pour utiliser O.js, il suffit d'inclure le lien suivant dans les sources de vos projets CodePen.

Code source : https://codepen.io/MagicMixer/pen/QgjJVV

Autres exemples :

TicTacToe : https://codepen.io/MagicMixer/pen/weMpvj

Game of Life : https://codepen.io/MagicMixer/pen/RgJQxW

Paint : https://codepen.io/MagicMixer/pen/JJYxGv

Todo List : https://codepen.io/MagicMixer/pen/OOKOzz (exemple de data-binding avec une array)

Bonjour,

J'ai regardé un peu ton travail et l'idée en soit est plutôt atypique (dans le bon sens) et intéressante.

Par contre, le problème qui me vient à l'esprit tout de suite c'est le parsing par les moteurs de recherche. Je m'explique.

Lorsque ta page est construite avec du HTML, le petit robot de Google va venir regarder ton code, l'organisation sémantique et en déduire tout un tas de variables qui vont être ensuite utilisées par le moteur de recherche pour te référencer.

Lorsque les framework JavaScript type SPA comme Angular, Vue, React et autres sont apparus, il y a eu ce souci également. De nos jours, ce n'est plus vraiment le cas car les robots sont assez intelligent pour aller même parser le code JavaScript du Shadow DOM et essayer d'en déduire ce qu'ils peuvent. Pour pallier partiellement à ce problème, on peut aussi utiliser les json+ld et quelques bouts de code statiques HTML.

Donc sauf erreur de ma part, en faisant une recherche rapide via le navigateur dans ton code-source je n'ai pas trouvé d'usage de cette nouvelle technologie (Shadow DOM). Du coup les utilisateurs risquent d'en prendre un coup niveau référencement !

Mais c'est une bonne initiative, et une alternative intéressante à ce qu'on connaît avec le JSX. Le côté dynamique du framework est très plaisant. je suis sûr qu'avec Tailwind CSS, ce projet pourrait devenir à terme une alternative à ce que l'on utilise actuellement. Tu pourrais même faire en sorte qu'il n'y ait plus de CSS à écrire (si tu choisis d'utiliser ce framework CSS qui vaut la peine d'être essayé).

J'espère que ces remarques/critiques/conseils pourront t'aider dans ton projet.

Un grand merci pour la réponse, ça fait plaisir

En effet, j'avais déjà réalisé que le référencement allait poser problème, mais j'avoue ne pas y avoir trop réfléchi pour le moment, mon objectif premier étant d'avoir un framework fonctionnel.

J'ai jeté un oeil aux solutions que tu propose :

- Donc pour ce qui est du Shadow DOM, je ne prétend pas avoir tout saisi sur le fonctionnement de cette nouvelle technologie, mais je suppose que les parsers regardent quand les éléments du Shadow DOM sont instanciés, et repèrent le code HTML qui est injecté. Le problème est qu'il y a du HTML absolument nul part dans O.js avant que l'application ne soit construite. Du coup ils risquent de pas avoir grand chose à se mettre sous la dent malgré tout

- Pour JSON-LD, si j'ai bien compris, ce sont des objets de données JSON ayant une structure permettant leur référencement ? Dans ce cas, il est envisageable de les utiliser comme sources des données utilisés par O.js.

- Et sinon, comme tu dis on peut faire une base statique en HTML, au moins pour tout ce qui est menu, barre de navigation, et bien évidemment header.

Bon, j'avoue que ce n'est pas encore au sommet de mes priorités, je comptais, comme tu l'as proposé, améliorer la gestion du style afin de limiter le css nécessaire. Et Tailwind CSS semble proposer une approche pouvant bien aller avec. Au programme j'ai aussi l'écriture d'une documentation décente, et la mise en place d'un template, principalement pour l'écriture de text dynamique :

template ( obj, “I am $name and I am $age years old.” )
donne :
"I am ", TEXT(obj, “name”), " and I am “, TEXT(obj, “name”), " years old.”

Bref, pas mal de pain sur la planche !

Merci d'être passé par là

jonathheb a écrit:

- Donc pour ce qui est du Shadow DOM, je ne prétend pas avoir tout saisi sur le fonctionnement de cette nouvelle technologie, mais je suppose que les parsers regardent quand les éléments du Shadow DOM sont instanciés, et repèrent le code HTML qui est injecté.

Rassure-toi, c'est encore une technologie jeune et il faudra un certain temps pour pouvoir vraiment en comprendre les fondements même. Comme toi, je ne prétends pas connaître tout du Shadow DOM mais pour l'avoir essayé je trouve que cela permet de faciliter grandement le côté dynamique des choses. Qui je pense est idéal même pour un concepteur de framework.

jonathheb a écrit:

- Pour JSON-LD, si j'ai bien compris, ce sont des objets de données JSON ayant une structure permettant leur référencement ? Dans ce cas, il est envisageable de les utiliser comme sources des données utilisés par O.js.

Non seulement ils aident les moteurs de recherches à donner des classements à tes pages (animaux, bâtiment, médecine, informatique, ...) mais également ils permettent une intégration plus poussée dans les services de Google notamment (je ne pourrais pas dire si l'intégration est faite avec les services de Microsoft ou Yahoo). Par exemple, si tu tapes "Marmiton oeufs durs" avec Google, tu auras une sorte de Google Card avec la recette, bien avant même les résultats de recherche. C'est un des avantages du le JSON+LD. Donc pourquoi pas créer un templating de JSON+LD au sein de ton framework... Ou pas !

Si tu mets ton code sur GitHub, tu pourras gérer ton projet (beaucoup, beaucoup) plus facilement et permettre aux autres de t'aider sans avoir à gérer toi même la logistique des modifications, historisations, branching, etc... Et tu pourras faire une documentation au format Markdown, voir même une page GitHub (page web) carrément dédiée à la documentation ou bien un Wiki.

Voila, je suis passé sur GitHub : https://github.com/MagicMixer/O.js/tree/master

Et merci de m'avoir suggérer TailWind, c'est vraiment parfait pour le framework. Je suis même entrain de construire un éditeur graphique de code html utilisant les classes de TW pour le style. https://magicmixer.github.io/ (click sur "Show Zones" ou "Show Items" pour afficher les éléments, dblclick pour les modifier, drag and drop pour les agencer. Encore pleins de bugs et de boulot à fournir, mais ça a du potentiel)