Discussion :

[topolino]

Bonjour,

Je me suis mis à AngularJS, et je pense que la creation de directives est pas mal pour les composants web. Mais j'ai constaté qu'il y a polymer et x-tag. Qq un a t il des retours la dessus ?

Je souhaite distribuer mes composants web à des tiers.

Merci pour vos conseils

[Kaamo]

J'ai comme l'impression que tu te répètes ?
Je crois qu'on a déjà répondu à cette question...

Il y a 8 ans
Il y a un an
Il y a six mois
Il y a un mois (sans réponse, ok )

Bien sûr, chaque réponse a évolué en fonction de l'air du temps et des annonces.

La réelle question est ... as - tu pris en compte les précédentes réponses ?

Donc, si je résume ...
en mai 2013, tu cherchais une solution pour créer des composants réutilisables par n'importe qui. Je t'avais aiguillé sur les encore tout frais Web Components dévoilés au Google i/o 2013
en février dernier, tu es revenu à la charge. On t'as encore conseillé de regarder vers les Web Components et également jQuery UI (qui devraient correspondre à ton besoin).
aujourd'hui, tu as donc opté pour AngularJS. Mais pourquoi ? Peux-tu les distribuer / réutiliser ?

Pour distribuer les composants à des tiers, polymer/x-tags me semblent être le meilleur choix

[topolino]

Tout d'abord je trouve que Jquery n'a plus trop de sens et sera de moins en moins adapté au web de maintenant (langage declaratif par rapport à l'imperatif, manipulation du DOM, maintenabilité, lisibilité du code, separation of concern....).

Polymer pour l'instant marche très bien sous chrome mais moins bien avec les autres navigateurs.

Donc j'ai regardé AngularJS qui m'a vraiment séduit, surtout pour la partie site internet. Ayant développé des petites directives (modules réutilisables) je me suis demandé si cela était pertinent pour une vrai solution de composants grandeur nature et pour cela j'ai besoin de personnes ayant de l’expérience la dessus.

Oui j'avance mais je manque de recule. Comme le projet est important je ne voudrais pas prendre une mauvaise direction.

Merci de tes conseils.

[Kaamo]

Si tu veux vraiment miser sur l'avenir, vaut mieux se tourner vers les Composants Webs. Les directives d'Angular sont une anticipation des Composants Web.

De plus, c'est de mieux en mieux supportés.

Polymer, au même titre que X-tags (Mozilla) ou le nouveau http://bosonic.github.io/ (par un Français !), permettent d'utiliser dès maintenant les composants webs même s'ils ne sont pas nativement supportés par le navigateur.

Bosonic : FF25+, Chrome 30+, IE9+, Safari 6+, Opera 12+
X-tags : FF5+, Chrome 4+, IE9+, Safari 4+, Opera 11+
Polymer : IE10+, Dernières verisons des autres, ils ne précisent pas

Il y a plein de composants déjà existants, ou à forker

Le site officiel des web components

[topolino]

Tu as sans doute raison mais il me semble que derrière AngularJS il y Google et une grande communauté derrière.

Je vais de regarder alors les liens que tu m'as donné

[sekaijin]

si tu pense que JQuery est de moins en moins adapté à ton besoin regarde du côté de sencha.
qui a une approche très diférente
http://docs-origin.sencha.com/extjs/...n_architecture

A+JYT

[topolino]

Ce qui est embetant avec polymer c'est qu'il faut activer dans Chrome Experimental web platform features. Donc tres loin d'etre standard !!!!

[Kaamo]

Polymer, c'est Google aussi ... mais ils ont une autre politique concernant la compatibilité.
Si tu veux une plus grande compatibilité, x-tags/Bosonic.

Les Composants Web ne sont qu'une solution. Il y en a d'autres bien sûr

[Paleo]

Bonjour. Je me permets de suggérer Wot pour des applications faites en TypeScript. J'ai écrit ce framework avec cette idée-là précisément : des composants visuels qui encapsulent du code JavaScript (TS), des templates en HTML, du code CSS et d'éventuelles autres ressources (gif animés etc.). Chaque composant est réutilisable par les autres composants ce qui fait que les tailles des composants vont d'un simple bouton à l'écran tout entier.

En revanche Wot est et restera un framework léger, il ne change pas la manière habituelle de coder et donc on continue à manipuler des morceaux de DOM.

Pour tester c'est très simple :

1. Télécharger la dernière release ;
2. La décompresser dans un dossier accessible par votre serveur HTTP local ;
3. Charger la page todos.html par HTTP.

[topolino]

Si je voulais créer mon propre framework de composants web a quoi devrais je faire attention ? Quelles seront les contraintes ?
Par rapport à HTML 5 pourquoi utiliser alors un framework ?

Je suis un peu perdu.

[SylvainPV]

Si avant de parler de solutions, on parlait des problèmes qu'elles sont sensées résoudre ? Parce que faire le tour des frameworks sans poser une expression de besoins, c'est comme se disputer sur un itinéraire avant de connaître l'arrivée.

[Paleo]

Si avant de parler de solutions, on parlait des problèmes qu'elles sont sensées résoudre ?

Le problème est la réutilisation de composants de la vue.

L'enjeu est de pouvoir assembler et faire interagir des composants visuels pour construire la vue d'une application sans repartir à chaque fois des balises HTML. Les composants sont des "boites noires" que l'on assemble sans s'occuper de comment elles sont implémentées. Par exemple, un composant calendrier pourrait afficher le mois choisi par configuration, puis gérer les clics et le survol sur la partie du DOM le concernant, proposer des évènements "de haut niveau" auxquels d'autres composants pourraient s'abonner etc. À ce jour cela n'est faisable que d'une manière rigide et limitée sur des CMS, c'est pourtant utile et d'ailleurs les CMS ont tous des plugins pour les calendriers.

Imbrication : dans une approche par composants, chaque composant contient son propre MVC. Un composant imbriqué (et son MVC) fait ensuite partie du "V" du composant englobant, etc. Cela n'empêche pas qu'un modèle et un contrôleur existe aussi au niveau de l'application.

C'est un sujet technique difficile. Comment encapsuler les templates HTML, le code JavaScript associé, les CSS, puis "sandboxer" les éléments du DOM et faire en sorte que les règles CSS et le JS du composant n'interagissent pas avec des éléments extérieurs au composant ? Comment aussi éviter que le navigateur n'ait des milliers de ressources à charger, une ou plusieurs par composant ?

Voici par exemple l'approche de Polymer, on voit le code JS et les templates.

React, de Facebook, est aussi basé sur l'idée de la réutilisation de composants "boites noires", avec en plus un gros aspect performance des accès au DOM.

Et Wot répond au même besoin. Wot est la solution la plus légère : il est utilisable avec les IDE d'aujourd'hui, avec les connaissances habituelles (par exemple un habitué de jQuery utilisera jQuery pour manipuler les templates) et même le débogage habituel. Les CSS ne sont pas sandboxées mais le développeur peut définir un préfixe en suivant simplement les suggestions de BEM. C'est juste des technologies d'aujourd'hui avec un peu d'organisation pour regrouper les codes HTML, CSS et JS par composants. Par contre il est fait pour être utilisé en TypeScript mais c'est un avantage.

[topolino]

Vraiment merci pour vos reponses.

Pour ma part je souhaite livrer des composants avec les data. C'est à dire que si une personne désire avoir le cours en temps réels du dollar alors une simple balise personnalisé du type <quote exchange='USD' Features="[Bid, Ask]" /> devrait afficher le design du composant ainsi que les données qui se rafraîchisse automatiquement en temps réel.

Voila en quelques mots ce que je désire faire.

[Paleo]

En dehors d'un framework alors ?

Je dirais x-tags ou Bosonic donné par Kaamo plus haut. Mais il faudra toujours inclure des ressources ("bosonic-polyfills.js"…) en attendant que la norme existe et soit implémentée nativement dans les navigateurs. Nous attendrons votre retour d'expérience.