Retour sur Google I/O 2016

Du 18 au 20 mai 2016, se tenait la grande messe annuelle de Google pour les développeurs, les conférences sont très rapidement disponible sur Youtube, ce qui permet à ceux qui ne peuvent pas y assister en live de se tenir au courant de l’actualité sans traîner. Voici un petit retour sur les conférences que j’ai personnellement regardé :

High performance web user interfaces 39’

Avoir des applications web qui ressemblent à des applications natives et qui donc se comporte comme telle est le moto de cette conférence. Tout repose sur l’optimisation de l’ergonomie et de la performance. Paul nous présente 3 composants présents dans la plupart de nos applications web et de comment les rendre plus User Friendly au sens perf + ergonomie. On ressort de cette vidéo avec quelques tuyaux vraiment pratique pour des améliorations à vraiment pas cher.

Ce que j’en retient : Les tips vraiment sympas

Fun Facts : 2 des 3 composants étudiés sont issus des 2 sessions de live coding supercharged réalisées les semaines passées, la vidéo avait un air familier pour moi qui avais regardé ces live coding.

Web Performance Tooling 40’

Première conférence que j’ai regardé puisque l’audit de performance d’application web et mobile est l’une de mes activités favorites. Cette vidéo présente en détail les fonctionnalités du chrome dev tool orientées performances au travers d’études de cas venant du véritable internet. Conférence indispensable pour tous les utilisateurs réguliers des outils d’analyse de performance de la chrome dev tools, en effet elle permet de mettre en avant les dernières options ajoutées au module, de les découvrir et de comprendre leur rôle précis dans un audit de performances.

Ce que j’en retient : Les dernières nouveautés, le moyen de l’utiliser pour auditer du code NodeJS

Fun Facts : la pull request pour eslint avec l’emoji licorne

Great libraries and tools for great Progressive Web apps 23’

Progressive Web Apps est le buzz word du moment et est cité dans quasiment chacune des conf au Google I/O, dans cette vidéo vous découvrirez quelques librairies et outils pour vous simplifier la vie de développeur d’application web progressive :

• sw-toolbox : Encapsulation des services workers dans le but de fournir une application dont les ressources sont offline en 4 lignes
• sw-appcache-behavior : Encapsulation des service workers pour simuler appcache
• Chrome Dev Tools : Panneau Service Workers : rien de nouveau ici
• LightHouse : extension Chrome avec des Bonnes Pratiques et un outil d’analyse pour le développement d’application web progressive

Ce que j’en retient : SW-Toolbox et LightHouse : deux must have

Fun Facts : Le logo LightHouse

The Mobile Web : State of the Union 37’

Une petite conférence de culture sur à quel point le web mobile est cool, comment le rendre meilleur au travers de 4 piliers : la rapidité, l’attractivité, La conversion, et la fidélisation, et présentant des statistiques intéressantes :

• 1 milliard d’utilisateur de web mobile.
• 40% des utilisateurs quitte une page si elle prend plus de 3s à s’afficher
• 92% des utilisateurs abandonne en cas d’échec à l’enregistrement
• 66% de l’e-commerce vient du web mobile malgré un taux de conversion plus faible que sur desktop
• 10 milliards de Push Notifications par jours

Ce que j’en retient : la Credential Management API, must have

Fun Facts : Les stats et La venue de David Merrel du Washington Post en Guest pour vendre AMP(lol)

What’s next for the web 45’

Une présentation des nouvelles API qui arrivent ou bien sont déjà là :

• Fetch : bye bye XHR
• Streams : ils arrivent dans les browsers
• RequestIdleCallback : permet d’exploiter les périodes d’inactivité réseau
• Passive Event Listener + IntersectionObserver + link rel=”preload” : pour des interactions plus fluides
• canvas.toBlob() : plus besoin de jouer avec les img en base64
• Media APIs : recorder, sessions, simplifie la manipulation des vidéos (webRTC incoming)
• API Expérimentales : en cours de création
• Bluetooth APIs : Communiquer via Bluetooth Low Energy
• Physical Web : URL pour chaque objet connecté = simplification

Ce que j’en retient : La plupart des API sont un peu trop early adopter pour moi, si elles sont toutes présentes dans chrome, elles ne sont pas très transverses.

Fun Facts : LOL Cats + Démo API expérimentales

DevTools in 2016: Accelerate your workflow 50’

A l’instar de Web Performance Tooling qui présentait les nouveautés chrome dev tools pour l’audit de performance nous avons ici une présentation des nouveautés de chrome dev tools pour le développement d’applications. Tout ce qui peut accélérer votre productivité de développement web est présenté ici : Responsive Design, Animations CSS, Source Maps, … très complet et prometteur pour les prochaines versions de chrome, en effet, certaines des fonctionnalités présentées ne sont pas encore sorties de canary.

Ce que j’en retient : Ctrl+Shift+P dans chrome dev tools <3

Fun facts : Paul Irish découvre la couleur corail

Polymer and Progressive Web Apps : Building on the modern web 45’

En tant que fan de Polymer, celle-ci faisait partie des conférences que j’attendais avec le plus d’impatience. En effet les web components sont la future révolution du Web et ils peuvent réellement contribuer à rendre le développement plus facile particulièrement pour l’aspect Progressive Web Apps. Le focus est mis sur l’avantage d’exploiter la plate-forme (browser) plutôt qu’un framework, et cet avantage est devenu une réalité avec l’arrivée prochaine de Custom Elements V1 et shadow Dom V1 dans tous les navigateurs du marché. Après cette introduction, les nouveautés de Polymer sont présentées 1 à 1, et la plate-forme part plus que jamais dans le bon sens.

Ce que j’en retient : Shadow DOM V1 dans l’année et Polymer App Toolbox

Fun Facts : Le passage Polymer en prod sur des sites e-commerce, chez google, …

Practical lessons from a year building webcomponents 33’

Petit retour d’expérience sur ce qui constitue un bon composant web(Polymer), et comment ceux-ci devraient se comporter. Cette conférence constitue un excellent tutoriel pour tout développeur souhaitant développer des composants web.Les 4 piliers d’un bon composant web sont l’API, la maintenabilité, la performance, et l’accessibilité.

• API : les WebComponents devraient être comme le Grep unix et non comme un input html cad composables, extensibles et transparents sur leur état
• Maintenance : Question de confiance, utiliser des Semver correctement, tester tout ce qui doit l’être : accessibilité, UI, intégration, documenter
• Performance : On retrouve le leitmotiv des PWA : paint first, do less, be lazy

Ce que j’en retient : Le HOWTO faire de “bons” webcomponents

Fun Facts : le camouflet aux développeurs qui font du web non accessible

TLDR;

Google I/O c’est des dizaines de conférences, j’ai personnellement fait mon marché de 8 vidéos dans les dizaines d’heures de conférence proposées. N’hésitez pas à jeter un œil à la chaîne Chrome Developper pour plus de vidéos du Google I/O ou des dev google, attention il y a parfois des doublons partiels dans les vidéos.

Le mot-clé cité un nombre indécent dans les conférences de ce cru 2016 est Progressive web Apps, c’est le présent du web particulièrement mobile et ce qui va buzzer dans l’année à venir.

Par ailleurs j’insiste que cet article ne se substitue pas au fait de visionner les conférences car les points de détails qui y sont présents sont souvent les plus pertinents, cependant il peut vous aider à faire votre propre marché. Si je devait retenir 3 vidéos dans le lot de celles que j’ai visionné ce serait :

• Web Performance Tooling pour la plus-value sur mon quotidien
• Practical lessons from a year building webcomponents pour les Best Practices gratuites
• Polymer and Progressive Web Apps : Building on the modern web pour Polymer (fanboy assumé)