Le Best of Web 2016

...Ou BoW 2K16 pour les intimes

En ce Vendredi 10 Juin, en guise de rayon de soleil de printemps, se tenait le Best Of Web 2016. Et nous étions là, avec notre armée de Wilson et de Schokobons, pour assister à une intense journée de talks oufissimes, dont notamment celui de notre astronaute Carl Ogren ! *clap clap clap*

09:00

Le quotidien d'une agence web du futur - Alsacreation : Raphaël Goetter / Rodolphe Rimelé

Ils nous ont présenté leur agence web telle qu’elle était à ses débuts, avec ses limites technologiques de l’époque, pour montrer à quel point le futur auquel ils rêvaient il y a 20 ans – CSS regions, grid-layout, … - est en train de se produire aujourd’hui (sauf sur IE, bien entendu)

09:30

Web Animation Performance - ParisJS : after the render tree / Freddy Harris @harrisfreddy

Une conf passionnante sur ce qui est de la performance hors chargement et bande passante. Freddy Harris nous a illustré les concepts de layout, de paint et de composite et nous a rappelé l’importance de privilégier les animations sur les propriétés de la couche composite (transform, opacity). Etat des lieux des trucs et astuces disponibles pour obtenir une interface animée qui reste fluide, avec notamment l‘avènement de la propriété will-change de mieux en mieux supportée.

Pour revoir les slides du talk, c'est par ici que ça se passe ! L'auteur propose aussi, pour ceux qui souhaitent approfondir le sujet de son talk, une autre présentation sur la FLIP technique.

10:00

Streaming API : pourquoi et comment ? - Eric Horesnyi / Audrey Neveux @Audrey_Neveu

Comme on le sait depuis quelques années, la consommation web sur mobile a explosé au point que depuis 2 ans elle dépasse même celle sur ordinateur.

Afin d’éviter au maximum l’utilisation du bouton “refresh” qui se fait un plaisir de tuer notre SEO, les animations et le temps réel sont nos meilleurs outils. Plusieurs solutions :

• bien entendu pas de long pooling, qui n’est qu’un hack
• deux autres solutions :

 

• Web Sockets ayant l’avantage d’être bi-directionnel et pouvant gérer texte et binaire
• Server Sents Events - unidirectionnel (server -> client) et ne gérant que le texte

La difficulté reste dans le choix à effectuer, car on n’a pas toujours besoin de bi-directionnel, et sur une multitude de domaine (performance, perte de connection) le SSE est plus puissant.

Il s’agissait ensuite essentiellement du live coding d’une application de suivi de la station ISS par datastream.io

11:00

Tout ce que vous voulez savoir sur redux - Matthieu Lux @swiip

Matthieu Lux nous a expliqué les concepts généraux de Redux (le plus gros buzz ayant été, bien entendu, que le logo de redux est inspiré de celui de charmed).

Plus sérieusement les points clefs à retenir sont :

• redux est agnostique au framework et est utilisable partout
• redux facilite l’organisation des composants en centralisant tout dans un store (state), que l’on ne peut modifier via des reducers activés par des actions.

Pour plus d’information n’hésitez pas à suivre Dan Abramov, ou à lire la documentation de Redux. Sinon, vous pouvez aussi revoir sa présentation.

11:30

CSS, Compagnonnage et Vexillologie - Tim Carry @pixelastic

Voici un talk qui, sur le papier, ne partait pas pour être des plus enthousiasmants. « Compagnotruc, vexillolomachin … na mé oh c koi c truks c tro cheum ». Et finalement, à travers le challenge original que s’est fixé Tim Carry, à savoir refaire tous les drapeaux de pays uniquement avec du CSS et avec une seule div par drapeau, il a su nous partager ses techniques de renard à base de linear-gradients, radial-gradient, de font-icones, de clip-path, … pour réaliser des drapeaux souvent complexes, dont le pire : l’union-jack !

Sa présentation est disponible si vous le souhaitez.

12:00

Le web temps réel avec météor - Maxime Quandalle

Creation d'une app méteor en live coding

12:30

REPAS

C'était bon, j’ai encore dû prendre 1kg, monde de merde.

13:30

REX sur la refonte de l'espace client Bouygue télécom avec Backbone.js Carl Ogren / Stéphane Bachelier

WHOUUUUUU !!!!

POOOOO POPOPOPOPOOOOOOOOOO POOOOOOOOOOOOOOOOOOO !!!

[ce retour est totalement impartial]

C’est l’heure de la conf que nous attendions tous, le retour d’expérience de notre astronaute Backbonien Carl Ogren et de son acolyte Stéphane Bachelier sur la refonte de l’espace client Bouygues Télécom. Ils ont tout d’abord justifié l’utilisation de Backbone JS, framework stable depuis plus de 3 ans et toujours maintenu, versus des Angular2 ou React jugés respectivement trop mouvants et trop jeunes. Ils nous ont ensuite exposé leur problématique de faire cohabiter les 2 UX, ancienne et nouvelle, résolue grâce à l’inclusion de l’ancienne interface embarquée sur la nouvelle appli via une iframe.

Un grand bravo à tous les deux !

14:00

Reusable chart d3 : un pattern réutilisable pour créer un composant JS - Jeremy Pinhel @jeremypinhel

Une conf pour expliquer comment développer des graphes à partir de composants d3

Voir le billet du maintainer de d3js sur le sujet : https://bost.ocks.org/mike/chart/

14:30

RxJS 5 in depth - Gerrard Sans @gerardsans

RxJS est pour le speaker une “sorte de lodash des streams”, il s'est donc livré à un live coding montrant les possibilités de cette librairie.

Son support : https://github.com/gsans/bestofweb\_rxjs5\_indepth/blob/master/talk.js

15:30

Progressive Web apps - Florian Orpelière @florpeliere

L’intérêt majeur des « Progressive Web Apps » est de donner à une application une instantanéité et une accessibilité en court-circuitant le passage dans le store, une étape qui engendre une perte considérable d'utilisateurs.

Une bonne web app doit également être à la fois responsive, safe (https), progressive (utilise ce que le navigateur peut faire), performante, « app-like », ré-engageante (notifications push), linkable, installable, utilisable offline et fresh (toujours à jour). Un cahier des charges assez chargé mais qui permet de garantir un produit de qualité. L’exemple est donné d’une Web App présente chez Sfeir, en angular et angular Matérial, pour gérer les collaborations.

Vous pouvez aussi retrouver son talk.

16:00

Emuler une gameBoy en JS - Maël Nison

Maël nous a présenté comment il a développé en JS son émulateur (CPU, MMU, GPU, et sous systèmes : timer, input, sound…)

Quelques notions vulgarisées :

• CPU : Central Processing Unit - Fait correspondre un entier (0x80) à une action (A = A + B)
• MMU : Memory Management Unit - Prends les adresse (accès mémoire) que demande le CPU et les "route" vers les bon segments hardware.
• GPU :Graphics Processing Unit - Transforme la Video RAM en tableau de pixel

Pour les implémentations Maël nous a présenté différentes pistes, pour bien vous spoiler le GPU est le plus horrible à reproduire.

CPU :

• un switch case énorme, qui trouve assez rapidement ses limites étant donné qu'a partir d'un certains nombre de case le navigateur désoptimise.
• une table de fonction, une clef -> une fonction, même problème le navigateur désoptimise au bout d'un moment car il le prends pour une hash table.
• un système de template générant des fonctions JS, ce qui a l'avantage d'être facilement testable !

MMU :

• une table de fonction, qui dans ce cas serait juste trop lente pour être considéré
• une foultitude de if pour gérer les Ranges et des fallback sur un swich case pour le reste, ce qui reste relativement testable

Pour le GPU c'est plus compliqué, c'est une machine à état (4 états) :

• il y a énormément de règles différentes
• beaucoup d'exceptions à ces même règles à implementer
• il faut même reproduire les bugs présents dans le hardware pour que ça marche (les jeux se basant parfois dessus).
• très difficile à tester, et encore pire à debugger

Qui dit dev dit création d'outils tel que VirtJs qui implémente tout un tas de sous système Audio / Timer / Input interchangeable ce qui permet de se concentrer sur le dev du Core.

Il a également développé start9.io pour héberger ses jeux, jouer et sauvegarder ses parties endiablées !

17:00

Mixité dans le monde des web components - Horacio Gonzalez @LostInBrittany

Selon Horacio Gonzalez, les web components sont la révolution de demain. Son challenge : développer une appli Angular cataloguant des marques de bières qui mélange des composants basés sur différentes librairies (Polymer, X-Tag, React). Résultat : It works !

Pour les curieux, ses travaux sont accessibles sur GitHub.

17:30

Du web au mobile, les techno multiplateformes qui changent les standards en 2016 Florian Rival... @florianrival / Yann Leflour @yleflour

Un large focus sur la dernière conf de Florian et Yann qui pose LA question : hybride OU mobile et choix des technos ! La présentation a démarré avec deux points de vue :

• Pourquoi ne pas faire d’application : le nombre de de visiteurs uniques par mois = 3,3M contre 8,9M sur du web mobile
• Pourquoi faire une application : le temps moyen par visiteur par mois 201,8 min pour une app contre 10,9 pour un site mobile.

Devant ce constat la question de la création d’application hybride est à poser, et propose un tour du marché des solutions se présentant à nous. Leurs critères de sélection des frameworks :

• Open source
• Communauté
• Javascript
• Structure html
• Styling facon css

Les deux winners sont :

• Webview : Une application ayant une webview, l’intégralité de l’app tourne dans cette WebView
• React Native : Une application avec des composent natif, Le JS tourne sur un moteur JS (JSCore)

BATTLE

> Framework IONIC

Basé sur cordova et utilisant angular, ionic offre des composants mobiles et la structure bien connue d'angular, existant depuis maintenant quelques années. Il existe des centaines de composants. IONIC créera pour vous 3 applications pour chaque OS, une des grandes forces de ce framework est sa capacité à démarrer très rapidement ses applications avec un look and feel adapté à chaque plateforme. Qui plus est Ionic expose des variable SaSS pour modifier le style de l’app.

> React Native

Toute l’application va tourner sur le moteur JSCore. Le react gère la vue, le react Native s’occupe d’exposer des composants de base des mobiles. La base est très simple à appréhender mais peut provoquer une frustration car on ne peut pas encore obtenir un rendu natif intégral de l’application.

Conclusion :

Au niveau des performances l’expérience utilisateur est quasiment identique sur hybride. Ionic est “pur web”, ce qui engendre des pertes de performance et des besoins d’optimisation si la logique est trop complexe. React Native quant à lui est bi-threadé, un pour la page, un autre pour le JS, mais là aussi des render à tort et à travers feront “bugguer” la page. Ceci étant dit, React Native gagne quand même le concours du plus performant.

Un autre avantage de l’hybrid est sa capacité à faciliter le développement et la mise en production. Le hot reloading, et le live reload dans une moindre mesure, facilitent grandement la vie du dev. Concernant le déploiement de nouvelle version un outil comme CodePush permet de mettre à jour l’application sans avoir à faire grand chose (attention aux policies des différents stores pour autant). En gros les applications hybrides, mangez-en c’est bon !

Et le mot de la fin : vivement l'édition 2017 !

https://scontent-cdg2-1.xx.fbcdn.net/t31.0-8/13422175_488133671333587_8953374827034623534_o.jpg