On était à Best Of Web !

IMG_2262
Pour sa première année, les consultants Js-Republic se sont offert une petite visite à la conférence Best Of Web. Cette conférence dédiée aux technologies web et JavaScript a eu lieu ce Jeudi 9 et Vendredi 10 Juin à la Grande Crypte à Paris.
Voici quelques talks qui nous ont particulièrement marqué.

CSS, Compagnonnage et Vexillologie
maxresdefault
Web série fictive “Fun with flags” dans la série The Big Bang Theory
Tout commence pendant la visite d’un musée du Compagnonnage à Tour.
Tim Carry y voit les démonstrations du savoir faire des compagnons, cela l’inspire et lui évoque le courant Craftsman, si cher à nos coeurs dans le développement logiciel.
À l’image de Sheldon Cooper (cf. Personnage de The Big Bang Theory ci-dessus), Tim se lance alors dans un projet un peu fou autour de la vexillologie :
Reproduire tous les drapeaux du monde en CSS (et avec une seule div s’il vous plait!).
Il nous explique comment il a dû rivaliser d’inventivité et d’astuces pour utiliser les mécanismes méconnues de CSS afin de reproduire les bandes, les étoiles, les diagonales et autres triangles.
Mais ce qu’il faut retenir de cette présentation, ce n’est pas tellement le résultat. Car bien que bluffant, il n’est pas du tout adapté pour la production.
Non, la vraie valeur de cette histoire réside dans toute la connaissance que Tim a acquise et qu’il a su nous distiller sur les pays, les drapeaux et leurs histoires, ainsi qu’une connaissance approfondie du CSS.
Comme il le dit lui même “le voyage compte plus que la destination” :
https://github.com/pixelastic/talk-css-flags
Mathieu BRETON, CEO @JSRepublic

Progressive Web Apps

L’un des sujets majeur de cette année 2016 fut incontestablement les Progressive Web Apps qui promettent de révolutionner l’usage et la consommation des applications mobiles.
En effet, le taux de conversion et de rétention s’avérant dramatiquement faibles pour les applications natives, les Progressive Web Apps offrent une alternative intéressante.
On estime ainsi que 80% des utilisateurs suppriment une application lors des trois premiers jours d’utilisation.
image00
De même, le parcours utilisateur afin d’installer une application s’avère long et seulement 20% des utilisateurs finiront par utiliser votre application alors que celui ci est beaucoup plus court pour une progressive web app, ce qui permet de doubler le nombre d’utilisateurs, soit 40%.
image05
image04
 
 
 
 
Ainsi, des sociétés comme Flipkart ou encore Aliexpress ont récemment dévoilées leurs premières études de cas accompagnées de chiffres qui sont pour le moins encourageants.
Flipkart :

  • les visiteurs ont passés 3 fois plus de temps sur le site
  • le taux de réengagement a augmenté 40%
  • le taux de conversion a lui augmenté de 70%
  • l’utilisation des données a diminuée de 3 fois

Aliexpress :

  • le nombre d’utilisateurs nouveaux a augmenté de 104%
  • le nombre de pages vue a été doublé
  • le temps passé sur le site a augmenté de 74%
  • l’utilisation des données a diminuée de 3 fois

Pour obtenir de tels chiffres, votre Progressive Web App doit être responsive, sécurisée et performante afin de rivaliser avec une application native.

Sécurité

L’utilisation d’un service worker vous permettra d’intercepter ou de modifier la navigation et les requêtes de ressources de façon asynchrone et via HTTPS.
Malheureusement, cette API est actuellement peu supportée par les navigateurs.

image02Cache

Votre application doit être offline first et faire appel au cache afin d’éviter le syndrome du lie-fi qui risque de faire abandonner bon nombre de vos utilisateurs.

image03Performance

Le chargement de votre application doit être instantané ou presque via l’utilisation d’async defer, du cache, du protocole HTTP2 et en optimisant vos CSS au maximum.

image01Installation

Le Manifest est un fichier JSON qui vous permettra de décrire votre application afin que les utilisateurs puissent l’ajouter sur l’écran d’accueil de leur smartphone.
image06

Réengagement

Au même titre que les applications natives vous pouvez utiliser les notifications push afin d’informer vos utilisateurs des toutes dernières nouveautés présentes au sein de votre plateforme.
image07

Conclusion

En conclusion, les Progressive Web Apps vous permettent d’éviter le long tunnel d’installation des différents app store et d’obtenir une application qui fonctionne en mode offline tout en étant aussi performante qu’une application native afin de réengager vos utilisateurs et d’augmenter l’utilisation de votre service.

Annexes

Pour approfondir le sujet, vous pouvez consulter les slides de la présentation de l’équipe de Sfeir à Devoxx:
http://fr.slideshare.net/SfeirGroup/devoxx-fr-2016-progressive-web-apps-par-florian-orpelire-cyril-balit
Ainsi que leur workshop:
https://github.com/Sfeir/pwa-200
Et tester le Pokédex, qui s’avère être la Progressive Web App la plus performante à l’heure actuelle:
https://www.pokedex.org
Le créateur a également partagé sa démarche au sein de l’article suivant:
http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
Pierrick TURELIER, JS-Republicain @JSRepublic

Émuler une Gameboy en Javascript

Bestofweb2016_williamjezequel_154
Tandis que certains n’ont d’yeux que pour la PS4 ou la Xbox ONE, que d’autres s’impatientent du prochain Zelda sur la Nintendo NX, d’autres nostalgiques ou simples fous se lancent des défis repoussant les limites d’une plateforme dont l’essor semble infini…
Se sont bien sur les limites de JavaScript et plus généralement du web dont on parle… et plus particulièrement de l’émulation d’une Gameboy !
Alors je vous vois venir, vous allez me demander ce qu’est un émulateur. D’après Wikipedia:
“En informatique, l’émulation consiste à substituer un élément de matériel informatique – tel un terminal informatique, un ordinateur ou une console de jeux – par un logiciel.”
En résumé, on regarde comment fonctionne le hardware que l’on cherche à imiter et on reproduit le comportement via un script afin d’en obtenir un résultat équivalent.
Vous allez me dire “Mais qu’est-ce que le hardware ?”…
Le hardware désigne le matériel informatique, dans le cas qui nous intéresse, à savoir la Gameboy.
On distingue 4 éléments :

  • le processeur CPU
  • la mémoire MMU
  • le processeur graphique GPU
  • et pour finir Timer, Inputs et Sounds

Dans le principe, chacun rempli une ou plusieurs tâches plus ou moins complexes, qu’il faut comprendre et ce n’est pas forcément évident, c’est un travail de longue haleine mais là on s’égare.
Le CPU, son rôle principal est de convertir des entiers (eg: 0x80) en une action (eg: A = A + B), vous l’aurez compris, l’implémentation peut se faire de différentes manières, soit avec un bon switch des familles ou un tableau de fonction, voir même des fonctions auto générées, réalité ou fiction, l’idée est que ça s’apparente à une machine à état qui est facilement testable.
La MMU a pour fonction de router les accès mémoires vers le hardware, elle agit comme les getter/setter de JavaScript, en permettant la lecture ou l’écriture par le matériel informatique.
Son implémentation est relativement simple car les performances sont à prendre en compte et toutes les solutions ne se valent pas donc exit le tableau de fonction, à la place, on y préfèrera des if pour gérer les “range” et un switch pour gérer le reste, il est à noter que la MMU est testable facilement.
Le GPU, me dit on à l’oreillette, est plus coton…
Sa mission car il l’accepte est de transformer la VideoRAM en tableau de pixels, même si c’est un processeur comme le CPU, le GPU est une machine à 4 états différents, soumis à de nombreuses règles qui sont contraignantes et pour lesquelles il faut souvent gérer des exceptions.
Il en ressort que l’implémentation est relativement dure à tester ou débugger.
Voila dans les grandes lignes ce que j’ai pu retenir de cette présentation, qui donne une bonne idée de ce qu’est un émulateur et comment cela fonctionne dans le cas d’une Gameboy.
Émuler d’autres plateformes peut s’avérer compliqué, heureusement pour nous il y a des curieux qui aiment à partager comme l’a fait Maël NISON à Best of Web 2016 lors de sa présentation qui montre la diversité des applications que l’on peut créer grâce à JavaScript, et c’est juste bluffant.
Si vous avez aimé cette mise en bouche, je vous invite à vous intéressé aux différents projets auxquels Maël à fait référence.

  • Virtjs : une collection libre de périphérique d’entrée standard permettant de booster certain moteur qui utiliserai ce type d’interface si elle est disponible.
  • Audiojs : implémente des périphériques d’entrée additionnels pour Virtjs.
  • Procjs : permet d’appliquer facilement du post processing.
  • Archjs : une Libretro dont le seul but est d’être facilement compilé via Emscripten, le moteur Virtjs peut dès lors être instancié à la volée n’importe où comme la plupart des moteurs.
  • Et pour finir, cerise sur le gâteau, Start9.io une plateforme construite au dessus d’Archjs, qui vous permet d’archiver vos jeux, d’y jouer et de sauvegarder sa progression.
    Si vous voulez voir un émulateur JavaScript en action, c’est par là que ça se passe !

 Pierre-Arnaud LUMALÉ, JS-Republicain @JSRepublic