Discussion :

[dkmix]

Bonjour,
Avez-vous testé Polymer.js ?
Pensez-vous que les navigateurs autre que chrome vont suivrent ?
un avis ?

[Kaamo]

Polymer, au même titre que son homologue x-tags de Mozilla, est un polyfill qui permet d'ores et déjà d'utiliser les Composants Web dans les navigateurs les supportant pas encore.
Donc à terme, il se peut que ce polyfill disparaisse quand tous les navigateurs les supporteront nativement (mais y'a du temps avant que ça arrive )

Les composants web sont clairement annoncés comme le futur du web. C'est ce qui remplacera les widget, les codes JavaScript un peu dégueulasse du style analytics, les boutons FB , twitter et j'en passe, que l'on claque souvent à la fin de notre code sans trop vraiment savoir pourquoi.

Les Composants Web (HTML5), c'est :

• Templates : Définition d'un template ayant ses images, ses scripts, etc. Il est parsé mais n'est pas affiché à l'écran. Les scripts, images, etc ne sont pas exécutés. En gros, on l'instancie quand on en a besoin et tout est exécuté à ce moment.
• Shadow DOM : Pour "cacher" le DOM interne de ton composant. Ainsi, celui qui spécifie le composant l'implémente de A à Z. Celui qui l'utilise a juste à se soucier de l'intégrer à sa page sans risque d'impacter l'élément avec ses propres scripts et feuilles de style.
• Éléments customisés : C'est le mélange des deux ci-dessus. Tu définis un élément qui possède un template, dont l'implémentation est cachée, avec ses propres scripts, styles, etc.

Pour faire simple, ça permet de remplacer un soupe de <div> imbriqués en une belle balise toute belle.

Un exemple que tu dois déjà utiliser, la balise vidéo. Sous le capot (le shadow dom), c'est un composant, une imbrication de <div>.
Exemple aujourd'hui de l'implémentation de la balise vidéo :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
  <div>
    <div>
      <input type="button">
      <input type="range" precision="float" max="600">
      <div style="display: none;">0:00</div><div>10:00</div>
      <input type="button">
      <input type="range" precision="float" max="1" style="">
      <input type="button" style="display: none;">
      <input type="button" style="">
    </div>
  </div>
</div>

Exemple après :

Code html :

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

<video controls src="ma/video"></video>

Tu vois directement les avantages :
- Réutilisables simplement (suffit de l'inclure comme tu inclus aujourd'hui des librairies JavaScript par exemple),
- Dissociés du DOM avec leurs propres styles, js, comportement (plus de conflit avec le reste de ton code),
- Meilleur lisibilité (on oublie les soupes de divs imbriqués)

Pour aller plus loin :
- Suivre E. Bidelman (G+, Twitter) de Google qui tient une feuille complète concernant les ressources utiles

[dkmix]

Merci Kaamo

Pour le dev js de google et le suivi de polymer, je suis abonné au fil d'Addy Osmani

Les composants web sont clairement annoncés comme le futur du web

C'est ce point qui m'interesse. Est-ce une certitude ? Y-a-til d'autre approches que les composants ? Microsoft va-til suivre ?

[Kaamo]

Pas facile de se prononcer pour le moment étant donné que tout est à l'état de draft.

IE n'embarque rien du tout dans sa dernière version (IE11). Par contre :
- pour le draft concernant la partie "Template", un gars de Microsoft (Tony Ross) y participe.
- Microsoft avait déjà fait un semblant de "Web Components" avec ses Elements Behaviors (dans IE 5.5!). On pourrait imaginer qu'il se passe la même chose qu'avec XHR.
- Dans IE 11, il y a les "Mutation Observers" et les "Pointer Events" qui sont importants pour les "Web Components"

Donc tout ça pourrait amener à penser qu'ils s'y mettront pour IE12 ? (source)

A part Polymer, il y a le projet similaire de Mozilla : x-tag. Ce sont les deux gros polyfill que je connais mais il y en a peut-être d'autres

[Kaamo]

Du coup j'ai creusé un peu plus,

Apple semble s'y mettre aussi dans webkit.

En rival / alternative :

- React de Facebook (utilisé dans les commentaires FB/Instagram) est un "Web Components"-like. Tu peux créer une sorte de Virtual DOM.
- Enfin, un autre """"rival"""" des "Web Components" (qui sont poussés par Google) est : "Les directives d'AngularJS", produit de Google ...
Bon c'est vrai que c'est compatible IE8+ (alors que Polymer n'est compatible que IE10+ et partiellement seulement).

Y'a donc fort à parier que les directives Angular migrent sur les Web Components un jour dès qu'ils choisiront de ne supporter que du IE11+.
Et le tout migrera tôt ou tard sur Dart. D'ailleurs ils ont déjà commencé avec DartAngular.

C'est très malin de la part de Google :
En 2005 ... Java monte en puissance, faut pas qu'on rate le cap. Du coup, on fait du Java-like pour faire du JS : GWT.
On fait Angular et on ne maintient plus (ou moins) GWT pour que les dévs GWT migrent dessus.
En parallèle on initie Dart, le JS killer. Même si on a pas de fan, c'est pas grave, ils sont sur nos autres produits.
On intègre petit-à-petit Angular dans Dart (avec DartAngular). Et enfin on change les rouages d'Angular pour que nos Web Components y soient intégrés.

Dans toutes veilles techno, il faut avoir un oeil sur tout, mais si j'ai un conseil à donner, il faudrait le tourner vers Dart-Angular-Polymer qui risquent de s'imposer d'ici les prochaines années

[dkmix]

Çà se précise un peu plus les web components gagnent le Best New Web Technology 2014 net Award