Ca fait un moment que je n’ai pas fait de compte rendu des soirées organisées par le NormandyJUG. Ce mardi, nous avons eu le droit à une soirée Web proposant de l’Ergonomie par Ivan Dalmet et des Web Components avec Polymer par Horacio Gonzalez.

J’y allais surtout pour l’ergonomie Web et ce sont les Web Components qui m’ont le plus accrochés ! Non pas que la première présentation n’était pas bonne. Bien au contraire. Mais le second sujet m’a interpelé et fait refléchir. 😉 Une soirée plein de surprises !

Sommaire

Ergonomie Web

La présentation, disponible en ligne, est bien faite et intéressante.

J’ai découvert le concept de Personas qui permet de recentrer les débats autour des utilisateurs et de fluidifier la communication.

Pour le reste, c’est de l’ergonomie. C’est donc du bon sens. Bon sens auquel on ne pense pas toujours… :-/

Web components avec Polymer

Un orateur humble et très drôle. Il met l’assistance dans sa poche et agrémente sa présentation de petites blagues pour dynamiser la session.

Introduction

Cette session commence par une petite histoire des IHM Java en partant de Swing pour arriver aux Single Page Application en passant par les pages HTML ou GWT. Tout celà pour conclure qu’il est temps de définir un standard de widgets ou composants pour le Web. Une bonne introduction au sujet principal, non ?

Les prémices

Ensuite, il nous présente les premières implémentations qui font penser à des composants web :

  • le bouton Google+
  • les directives AngujarJS

Et montre ce que l’on souhaiterait faire avec de tels composants.

Le standard

Le W3C s’est approprié le sujet pour en créer un standard. Néanmoins, la réactivité de ce consortium nous laisse croire que le standard ne viendra pas de si tôt de ce côté.

C’est pourquoi les acteurs des butineurs ont décidés d’anticiper et créer leur standard.

Ainsi, les web components reposent sur 5 piliers :

  • les templates : patron de fragment HTML
  • le shadow DOM : technique déjà utilisée en interne dans les navigateurs qui permet d’intégrer un arbre DOM pour le composant indépendant de celui de la page
  • les customs elements : composition d’un template et de scripts
  • les decorators : force l’aspect ou hérite d’un autre style
  • les imports : pour ajouter les dépendances envers les web components et donc les utiliser
Compatibilité

Aujourd’hui, Chrome les supporte assez bien. Firefox supporte une partie mais n’est pas stable. Et les autres navigateurs… 🙁

En revanche, il est possible d’ajouter le support des Web Components dans n’importe quel navigateur en utilisant Polymer de Google ou X-Tags de la Fondation Mozilla. D’ailleurs, ils ont tous les deux mis en commun la base de leur solution respective pour proposer des polyfills uniques.

Démonstration

La fin de la session se termine avec des exemples utilisant Polymer :

  • Création d’un polymer element
  • Ajout de propriété et méthodes
  • Mise en oeuvre du Data Binding

Petite astuce au passage : il ne faut pas tester un composant dans une page locale mais il faut passer par une serveur HTTP sinon les web components ne seront pas interprétés.

Il est maintenant temps de tester tout celà en détail. Cette technologie ouvre énormement de possibilités ou tout du moins les rend plus accessibles. Serez-vous le créateur du futur Web Component utilisé sur la plupart des sites de demain ? 😀

https://blog.lecacheur.com/wp-content/uploads/2014/10/web_components_polymer.jpghttps://blog.lecacheur.com/wp-content/uploads/2014/10/web_components_polymer-150x150.jpgSeBDéveloppementErgonomieergonomie,web,web componentsCa fait un moment que je n'ai pas fait de compte rendu des soirées organisées par le NormandyJUG. Ce mardi, nous avons eu le droit à une soirée Web proposant de l'Ergonomie par Ivan Dalmet et des Web Components avec Polymer par Horacio Gonzalez. J'y allais surtout pour l'ergonomie Web...Un blog, c'est un blog !