Cell Widgets en liberté !

Jour 2 !

Arnaud Tournier, le 28-01-2015

Les CellWidgets dans la nature !

Présenté par mr DiGliano, Google

Google Group recrute !

Actuellement, Google recrute pour faire Google Groups, une appli GWT…

Le présentateur : digi@google.com Pour le recrutement : http://goo.gl/jbd9mv

Les Cell Widgets

Ce sont des widgets très légers, inspirés du pattern poids-mouche.

  • on a le controle direct sur les événements (méthode onBrowserEvent)

Mais ! C’est compliqué à implémenter.

  • beaucoup de boiler plate,
  • assez difficile finalement pour accéder à des éléments précis du DOM.

Au sein de Google, dans la base de code utilisant GWT, on a

  • 100 CellList
  • 500 CellTable
  • 30 CellTree

Qu’a-t-on appris en terme d’expérience à travers ces utilisations ?

  • Avoid StringBuilder
  • Filling and prefetching
  • Custom key handling
  • Compositing

Eviter les STringBuilder

Préférer du code plus maintenable. Par exemple les SafeHtml templates pour les petites Cells.

Pour des plus grosses Cells, on peut utiliser le UiRenderer. Un fichier XML avec le flux HTML, des éléments nommés. Dans le code Java, c’est un peu comme UiBinder, et cela injecte les champs.

Pour la réutilisation d’une Cell, on peut utiliser le widget CellWidget, lui donner sa Cell et voilà.

Filling and Prefecthing

En réalité, les données arrivent de façon asynchrone (pas comme dans le show case de Gwt). Habituellement, on écoute un RangeChange et à chaque changement, on appelle le serveur puis quand les données arrivent, on alimente le widget.

Par exemple, pour un premier appel, on demande 15 lignes, puis quand le scroll descend on en redemande etc… Mais le nombre 15 est complètement arbitraire et n’irait pas pour un display très vaste (pas suffisamment d’enregistrement pour déclencher le scroll)

Une technique : Window Filling

Le but: on demande des infos jusqu’à ce que le scroll bar s’affiche. Permet de s’adapter à la taille de l’écran facilement. Il cite aussi l’exemple d’un utilisateur tablette qui la tient horizontalement et qui passe en vetical : l’algo demande automatiquement plus de données.

Predictive scrolling

Il ne faut pas attendre que l’utilisateur scrolle jusqu’en bas, parcequ’il va devoir attendre les résultats. Avec du predictive scrolling, on déclenche le RPC plutôt à 70% du scroll, ce qui laisse le temps à l’appel RPC de donner ses résultats avant que l’utilisateur ne soit réellement arrivé en bas. Donc l’expérience utilisateur est bien plus fluide.

Prefecthing

Les limites de l’astuce précédente se font sentir assez rapidement si l’utilisateur scroll trop vite. Avec le prefetching, on redemande des données à l’avance.

Dans Google Groups, ils utilisent un warming cache qui contient les données préfetchées.

Custom Key Handling

Donner aux utilisateurs les contrôles qu’ils attendent. Notamment les shortcut sont très importants.

Le CellList a des défauts dans son handler d’événements :

  • page size fixée à 30 (page up / page down keys)
  • désactive la touche ESPACE dans la liste

Mais on peut remplacer le handler par défaut par un custom.

La touche FIN amène à la vrai fin des données.

Probleme de focus : updateROwData replace le focus et occasionne un saut vers la position 0 du scroll. La solution est juste avant de redonner le focus, on mémorize la postion du scroll. Puis apres donner le focus, on replace cette valeur (oui c’est un hack)

Compositing utilities

Comment composer plusieurs Cells ? Par exemple on veut simplement rajouter une étoile ou une checkbox

Classiquement, on utilise la classe CompositeCell et HasCell, on fournit une array list de Cells et elles sont rendues dans l’ordre. Le problème c’est que c’est assez lourd à mettre en place.

Astuce : passer par un intermédiaire pour transformer les données.

Pour la gestion des événements, ils ont quelques méthode utilitaires qui le font bien.

C’est sur GitHub !

http://github.com/cdigiano/gwt.create2015

A voir

  • Nouvelle grille Vaadin
  • Steve Neclacson : CellCompositeWithId
  • Polymer core-list (+ Web Components + Cell hybrids)

Utiliser les webcomponents comme formatteurs ? Bonne idée non ?


Arnaud Tournier, le 28-01-2015