...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*
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)
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.
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 :
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
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 :
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.
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.
Le web temps réel avec météor - Maxime Quandalle
Creation d'une app méteor en live coding
REPAS
C'était bon, j’ai encore dû prendre 1kg, monde de merde.
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 !
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/
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
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.
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 :
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 :
MMU :
Pour le GPU c'est plus compliqué, c'est une machine à état (4 états) :
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 !
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.
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 :
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 :
Les deux winners sont :
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
Auteur(s)
Denis Schneider
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
L'Anchor positioning API est arrivée en CSS depuis quelques mois. Expérimentale et uniquement disponible à ce jour pour les navigateurs basés sur Chromium, elle est tout de même très intéressante pour lier des éléments entre eux et répondre en CSS à des problématiques qui ne pouvaient se résoudre qu'en JavaScript.
Découvrez comment créer un Design System solide avec React. Ce guide simplifié explore les bases essentielles pour concevoir une interface cohérente, améliorer le développement et offrir une expérience utilisateur harmonieuse.
Découvrez comment notre Studio a intégré avec succès des composants React et Varnish ESI sur un site No Code. Explorez les défis à relever et les solutions mises en œuvre