Retour sur Polymer Summit 2016

publié le 21/08/2021

Les 17 et 18 octobre 2016, se tenait le Polymer Summit à Londres. Etant un grand fan de Polymer, je me suis réjoui de la disponibilité du live sur youtube ainsi que de l’upload quasi-instantané des conférences sur le futur du web, car pour moi les WebComponents (et l’éco-système qui gravite autour) est bien ce vers quoi cherche à évoluer le développement Web.

En effet les frameworks actuellement populaire adopte le paradygme composant, mais en restant orienté application. Polymer et les WebComponents préconise d’avoir 2 niveaux de développement par des personnes différentes : les fabricants de brique légo (composant), les fabricants d’applications (assemblage de composant). Et on peut faire des pures constructions si on a les bonnes briques, sans que les briques n’aient rient besoin de connaitre de la construction individuellement :

La plupart du temps les frameworks orientés composants créent des composants fortement liés à l’application les requiérant, rendant leur utilisation en dehors de l’application plus difficile, le but du composant n’est pas alors d’être une brique, mais de facilité le développement/maintenance/évolution. C’est déjà bien, la productivité étant le nerf d’une guerre qui se joue dans notre quotidien, les WebComponents veulent aller plus loin. Le Polymer Summit est une immersion dans ce pays du futur (présent ?), voici un petit retour sur les conférences que j’ai personnellement regardées (c’est-à-dire toute celles qui faisaient plus de 20 minutes plus 1) :

Keynote d’ouverture 26’

Le but d’une keynote est de faire monter la hype, aussi il ne s’agit pas de la conférence la plus utile du Summit. Cependant, si vous êtes un peu fanboy comme c’est mon cas, c’est un excellent moyen de vous motiver à regarder tout le reste car vous êtes sûr de voir le monde par le côté bisounours, et cela fait du bien de temps en temps. Dans cette introduction, vous aurez droit à un survol du positionnement général de Polymer dans l’éco-système web. Excellent pour la culture.

Ce que j’en retiens : Polymer2 plus proche des nouveaux standards & l’adhésion des navigateurs à WebComponents V1
Fun fact : la prochaine version de Youtube devrait être basée sur Polymer 2.0

The way of the web (ING) 23’

Un Retour d’expérience sur l’utilisation de Polymer au sein d’une véritable entreprise dont le but est de gagner beaucoup d’argent, sur les choix d’architectures et d’implémentation dans leur société pour en faire l’incontournable de leur socle technique. Ben Issa, chef-architecte chez ING nous livre ici leur Definition of Done pour un composant :

own repo for each compponent
i18n
&11y
Tests
Demo
Blueprints / Mocks
Docs

Ainsi que la courbe d’apprentissage à suivre pour bien travailler avec Polymer :

Back to html5 basics
automation
Samples/Guides
Assemble first
Build first component
Evolved, not solved Il s’agit d’un véritable retour d’extérience de plusieurs applications en production d’une banque en ligne, autrement dit le futur est réellement présent.

Ce que j’en retiens : Polymer en front d’une banque \o/, il faut absolument que je POC du RAIL
Fun fact : Ben Issa lance quelques bon trolls attaquant les développeurs constituant l’assemblée face à lui, rendant la présentation très agréable à regarder & les stats HTML/CSS/JS

Polymer 2.0 under the hood 31’

Rob Dodson nous présente les promesses de Polymer 2.0 par rapport à 1.0, et cela tient grosso modo en 2 grosses lignes :

Do less magic
Get Smaller Le 2eme point est une nécessité absolue pour qui veut faire des PWA, et c’est cool de voir Polymer se concentrer pour être le meilleur de ce point de vue. Le premier point par contre peut faire débat, personnellement j’apprécie un rapprochement des bases, car je suis fan de VanillaJS, mais notre quotidien est envahi de framework magicien qui améliore grandement la productivité des développeurs, et je pense qu’avec ce choix Polymer cherche en réalité à se faire encapsuler par des frameworks plus gros, plutôt que devenir l’outil de développement incontournable de demain : Affaire à suivre. Polymer 2 n’est pas une révolution, mais une version incrémentale, donc tout ce que vous avez appris en Polymer 1.0 (à quelques éléments de syntaxe prêts) sera utile pour Polymer 2.0.

Ce que j’en retiens : Polymer se rapproche du standard, du coup on ne se marie pas avec Polymer, ce qui est à la fois un avantage et un inconvénient
Fun fact : Rob Dodson sans ses lunettes, j’ai eu du mal à le reconnaitre

Polymer Butter and Firebase Jelly 25’

Michael Bleigh vient nous présenter Firebase, il parle de Firebase et aussi de Firebase. Il présente aussi un set de composant Polymer pour utiliser Firebase encore plus facilement : cool ! Si vous êtes intéressé par Firebase particulièrement dans un contexte WebComponent jetez-y un oeil, mais si vous cherchez des infos sur Polymer passez votre chemin.

Ce que j’en retiens : La pub pour Firebase : boring
Fun fact : Michael Bleigh est un showman, ça sauve la conférence

Data Flow in Polymer Elements and Apps 26’

Celle là, je l’attendais vraiment avec impatience. Gray Norton nous présente le cycle de vie des données dans Polymer. Cette présentation monte clairement de quelques crans techniquement parlant, les exemples ont beau être simple, les concepts sous-jacent ne coulent pas de source. Les pattern présentés méritent toute votre attention, car bien les maitriser pourrait vous sauver votre conception. Une vidéo à revoir plusieurs fois en expérimentant en parrallèle. C’est dommage, car le présentateur abuse d’un ton légèrement monotone qui ne favorise pas la concentration.

Ce que j’en retiens : Une video sur laquelle il faut travailler pour franchir un pallier
Fun fact : Il reprend l’app exemple de Thinking in Plymer du précedent Summit, bien connue de l’assemblée

Making Chromestatus.com a lighting-Fast PWA 28’

Un nouveau REX de PWA avec Polymer, ce summit va en être bondé, l’année dernière c’était l’intro, aujourd’hui les chapitres sont écrits. Eric Bidelman nous présent chromestatus.com : le dashboard des features de chrome, comment chrome choisi de dépréciée des features, le taux d’adoption des nouveautés, etc. Il conclut avec la liste de bonnes pratiques qu’il recommande personnellement pour des applications plus performantes.

Ce que j’en retiens : Beaucoup d’exemples de code sur chromestatus.com & la checklist performance à la fin
Fun fact : L’admission que early Polymer était véritablement lent

Do Less & Be Lazy : Practical Performance Patterns for Polymer 26’

Steve Orvell de la Core Library nous parle également de performance, rien de nouveau sous le soleil si vous savez déjà ce qu’est une Progressive Web App. Si votre temps est limité regardez soit celle-ci soit la précédente, l’intersection entre ces 2 vidéos étant conséquente.

Ce que j’en retiens : Do less & Be lazy, les tools pour bench les composants polymer
Fun fact : Le use case amélioration des perfs d’un composant step by step

Practical Performance 28’

Pour la passe de 3 à la suite sur la performance, je demande Sam Saccone et Paul Irish. J’avais adoré leur prez sur le tooling lors des Google I/O, autant dire que j’attendais beaucoup de celle-ci. Et je n’ai pas été déçu : le duo fonctionne parfaitement, le contenu est de premier choix : comme d’hab avec Sam j’ai appris des trucs que je ne connaissais pas.

Ce que j’en retiens : quelques nouvelles astuces pour mes audits de perfs
Fun fact : Fact or Fiction perfs trials : casse les dents aux idées reçues

Interacting with the Physical Web 21’

J’ai regardé cette vidéo en dernier, car j’ai moi-même un projet avec le physical web qui arrive début 2017, aussi, je voulais être dans les meilleures conditions possibles pour voir si Polymer serait l’outil que je choisirai au moment de démarrer le projet en question. Angular2 et Vue2 étant les 2 autres candidats actuels. Scott Jenson nous présente quelques interactions du physical web, quelques bonnes pratiques et surtout comment utiliser Polymer (platinum-bluetooth-device element) pour interagir avec le physical web, et WOW. That’s a nice element for that. :)

Ce que j’en retiens : platinum-bluetooth-device
Fun fact : L’effet Bonaldi sur la machine à bonbon

Monster Apps : Meatscope + Polymon 28’

Chris Joel nous raconte deux histoires vraiment passionnantes au sujet de petites applications qui vivent leur vie d’application en cours de développement. La conf est superbe sur la forme. Je n’ai rien appris sur le fond, car il s’agit de présentation d’APIs HTML5 plus ou moins basiques (souvenez vous elles sont importantes dans Polymer2) encapsulées dans des composants Polymer. Cependant, la forme est vraiment TOP, du grand art. Au final Chris nous présente le travail d’un joueur de légo qui exploite Polymer : c’est très beau, c’est le futur et c’est maintenant.

Ce que j’en retiens : Deux jolies histoires, usage des Shared Workers(Polymer.commonWorker)
Fun fact : Beers, Deux jolies histoires

How I learned to stop worrying and love the Polymer toolbox

@notwaldorf, the laziest human being (franchement je ne suis pas convaincu par cette assertion), nous fait un petit tour d’horizons de certaines des barrières franchies par Polymer ces derniers mois, notamment à l’aide de tooling : Polyfire, App-Layout, LightHouse, Polymer-CLI, Iron List, Lazy Loading, … Autant d’outils, éléments, services à la rescousse de vos problématiques de développement. Au passage elle fait une synthèse des conférences qui l’ont précédé, un excellent choix si vous voulez un extract de ce qui s’est dit pendant ce Polymer Summit.

Ce que j’en retiens : Un excellent résumé (haut niveau) de l’ensemble de la journée 1
Fun fact : @notwaldorf qui fait preuve d’autodérision à plusieurs reprises : humour +1

What’s New in Polymer Tools 49’

Justin Fagnani et ses acolytes nous présentent l’intérêt du tooling et la liste des outils “officiels” de l’éco-système Polymer. En effet les Web Components apportent de nouveaux problèmes au développeur que les outils historiques ne savent pas vraiment gérer : c’est là qu’entre en jeu les Polymer Tools :

Polymer-cli (aggregation de tout le tooling historique indispensable : lint, serveur, tests, …)
Polymer Analyzer : outil capable d’analyser un projet WebComponents pour vérifier la conformité à l’état de l’art en se basant sur différentes pluginss.
Polymer Lazy Import
Polymer Linter : Nouveau linter extensible avec différents rule set prédéfinis
Polymer on yarn(à la place de bower) gràce à –flat
Polymer Bundler : De l’aggregation partielle de code pour diminuer le nombre de fichiers avec la bonne quantité de fragments pour optimiser les chargements
Polymer Editor Plugins & Service : l’intégration est tres poussée, avec la DOC disponible à la volée : good job, et compatible avec les éditeurs principaux (VSCode, Atom, ST3, WebStorm)

Ce que j’en retiens : la demo de Polymer CLI
Fun fact : la valse des conférenciers

Polymer in Practice @ Comcast 28’

Chris Lorenzo et John Riviello nous font un Rex sur leur utilisation de Polymer (un de plus, mais les Rex c’est cool). Il revient sur le processus intégral depuis la prise de décision sur le choix technologique, jusque qu’à la mise en prod, en passant par tous les apports et écueils que son équipe a rencontré. Selon eux la clé de la réussite repose sur les composants réutilisables (et partagés) qui requièrent quelques bonnes pratiques présentées dans la vidéo.

Ce que j’en retiens : Les bonnes pratiques
Fun fact : Demo Driven Development

Why the web makes sense for business apps 28’

Marcus Hellberg et Jouni de Vaadin nous font un … REX sur le développement d’applis de e-commerce avec Polymer. Pour le business la priorité est le End-Users, plus votre appli sera pertinente et facile à utiliser, plus votre taux de transformation aura des chances d’être élevé. Le meilleur moyen est de respecter le Keep It Stupid Simple à la fois pour le développement et le fonctionnement, et ils ont leur propre version du DDD qui semble s’imposer chez pas mal d’utilisateurs de Polymer.

Ce que j’en retiens : La relative incompatibilité des Web Components avec Angular2 et l’effort de Vaadin pour pallier cela
Fun fact : L’horrible ton monotone des 2 speakers

From components to Applications : Net-A-Porter 23’

Robin Glen nous fait un Rex UX & Design sur l’utilisation de Polymer et une approche orientée End User. C’est particulier, car les Web Components sont certes là pour faciliter le travail sur le code utile, mais ils réalisent cela en simplifiant la vie du développeur. Net-A-Porter renverse le paradygme en imaginant qu’un composant doit rendre service à un End-User. Personnellement l’approche me perturbe, mais elle a le mérite de faire réfléchir à ma façon actuelle de voir le développement logiciel.

Ce que j’en retiens : Le paradygme End User first pour des briques de légo
Fun fact : Le code Polymer 1.0, là ou presque tout le monde avait migré ses slides en 2.0

Winning the Gold with Web Components - Gannett 28’

Jesiah McGann et son garde du corps Josh Trout nous raconte l’histoire de la couverture des Jeux Olympiques de Rio par USA Today. C’est un nouveau REX d’utilisation de Polymer dans un contexte de forte scalabilité et audience (1 milliard de vue par mois) Ici pas de PWA, mais 2 applis selon le terminal mais avec des WebComponents partagés. C’est un peu un contre-pied plus traditionnel, mais cela montre bien que l’outil est utilisable de bien des façons différentes et qu’on peut faire des transitions en douceurs dans de gros SI gràce à l’universalité des WebComponents (pour peu qu’on cible des navigateurs/terminaux qui les supporte uniquement). Ils présentent en détail tous les écueils qu’ils ont surmontés et comment, et ils l’ont définitivement adopté car c’est un quick win dans leur contexte (Statistiques d’usages & performances à l’appui).

Ce que j’en retiens : l’intégration de Polymer/WebComponents dans des pages traditionnelles pour le reuse dans différents portails.
Fun fact : Divisr pour plus de productivité, 9femmes peuvent faire un bébé Polymer en 1mois selon le manager

Eiji Kitamura présente les 2 APIs de Google Payment Request et Credential Management, c’est la seule vidéo courte de ma sélection, car ces APIs m’intriguent fortement par leur position “anti-sécurité” Mémoriser des informations personnelles et de paiement sur un navigateur ou un smartphone, qui plus est dans le web me parait vraiment dangereux. Le moins qu’on puisse dire c’est que la présentation m’a largement convaincue que je n’utiliserai jamais cette API personnellement en tant qu’usager (en tant que développeur par contre)

Ce que j’en retiens : Ces API me paraissent toujours aussi intrusive et dangereuse, mais vraiment easy-to-develop
Fun fact : 10min de pub pour les fonctionnalités 5min de technique, c’est du foutage de gueule

Adapting to the Mobile Web Future Present 36’

Alex Russel dispense la dernière conférence du Summit : une conférence pour le mobile qui grignote toutes les parts de marché du web. Il présente sa version de la naissance du PRPL pattern et argumente l’objectif de ce dernier autrement que par c’est trop bien utilisez-le ! Il présente également en détail ce en quoi consiste RAIL. Il va en détail dans les justifications de la lenteur des téléphones qui consiste est entre autre dûe à l’absence de ventilateur et de puissance suffisante. Bref une conférence de culture générale et la culture générale c’est toujours utile, j’ai vraiment appris beaucoup avec cette conf.

Ce que j’en retiens : Développer pour le téléphone avec Chrome://inspect sur un téléphone moyen est primordial, motion mark
Fun fact : The Truth is in the Trace, rafraichir un téléphone booste sa perf par 15%

Discussion Panel 35’

La séance de cloture de ce Polymer Summit, on retrouve : Rob Dodson, Justin Fagnani (Polymer Tools), Wendy (Product Manager), Taylor Savage (Product Manager) , @notwaldorf (Software Engineer), Steve Orvell (Software Engineer), Matt McNulty(Director of Chrome) pour une séance réponses aux questions.

Ce que j’en retiens : Une chouette conclusion d’un chouete Summit
Fun fact : La bonne ambiance et les quelques trolls

En conclusion

Ce Polymer Summit me laisse un peu sur ma faim, dans les grandes lignes ils nous ont dit que polymer ne servait presque plus à rien avec les nouvelles versions de l’API WebComponents. Les conférences les plus utiles sont celles sur le tooling, mais il fonctionne également pour du développement WebComponents. J’aime quand on se rapproche de Vanilla et je ne peux qu’applaudir ce choix de la team Polymer, mais il s’agissait d’un Polymer Summit et j’aurais dû sortir de ce visionnage avec le sentiment que Polymer était THE WAY TO GO, or c’est tout l’inverse, je ressors de là en me disant que je peux utiliser tous les composants Polymer qui existent quand j’en ai besoin, mais que pour ma propre production je ferai mieux d’aller Vanilla. Moi ça me va, mais l’industrie n’aime pas Vanilla et donc le nombre de projet démarrant avec Polymer ne devrait pas exploser malheureusement. En résumé ‘make <3 for Web Components whatever the way you do it’. Par ailleurs l’année écoulée a quand même permis une large adoption de Polymer dans bien des chaumières.

Ce que j’en retiens : Polymer est prêt mais encore bien trop early, Future is coming ! A oublier : PRPL et #usethepaltform overdose, ces 2 idées sont cool et j’approuve, mais le message martelé est fatigant.

Mon top5

[From components to Applications : Net-A-Porter](https://www.youtube.com/watch?v=DwrLEd0gBcA&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=34)
[Adapting to the Mobile Web Future Present](https://www.youtube.com/watch?v=K1SFnrf4jZo&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=39)
[Practical Performance](https://www.youtube.com/watch?v=6m_E-mC0y3Y&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=20)
[Monster Apps : Meatscope + Polymon](https://www.youtube.com/watch?v=2_5X-mQdLXc&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=24)
[The way of the web (ING)](https://www.youtube.com/watch?v=8ZTFEhPBJEE&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=5)

Mention Honorable hors top5 : Keynote d’ouverture