Designer, Développeur, créons la différence ! (feat C. Freyd-Foucault)
On utilise tous une bibliothèque de composants comme Material, Bootstrap & co. C’est très pratique car cela nous fournit un Design System clé en main. Seulement, le projet manque de personnalité et ne se différencie pas.
Avec notre équipe composée de designers (Cécile) et de développeurs (Florent), comment pouvons-nous donner une identité à nos projets ? Y a-t-il des méthodes que nous pouvons appliquer pour que la production de l’interface soit différenciante, cohérente et agréable ?
Nous vous proposons donc de définir quelles sont les différentes méthodes et techniques pour y arriver. Nous débuterons par explorer et établir notre identité pour ensuite mettre en place nos éléments fonctionnels et arriver rapidement à un Design System adapté en respectant les normes de l’Atomic Design. Nous vous proposons de partir d’un projet qui a choisi la facilité, où la communication est inexistante dans l’équipe. Nous améliorerons notre manière de travailler de façon itérative pour arriver à construire notre propre Design System au fil des explications théoriques.
Slide link
React Fiber : une innovation discrète, des implications retentissantes (feat M.Lux et M. Frachet)
L’équipe de React a fait de nombreuses annonces à propos de nouvelles APIs ces derniers temps. On parle de : Suspense, Lazy Hooks, Error Boundaries, Time Slicing ou encore Concurrent React.
Il y a des choses particulièrement intéressantes comme de nouveaux patterns de programmation qui pourraient changer la manière de coder des interfaces dans le futur. Mais il faut avouer qu’il peut devenir difficile de suivre toutes les évolutions proposées et en comprendre la direction.
L’effervescence autour des nouvelles fonctionnalités a pour origine la ré-implémentation du moteur de React dans sa version 16 : nom de code React Fiber (sorti en septembre 2017). Cette refonte très technique n’a pas fait de buzz et n’a rien changé directement dans l’API. Elle a en revanche libéré un potentiel incroyable pour trouver de nouveaux concepts que Facebook ajoute petit à petit dans sa bibliothèque.
Nous vous proposons de reprendre le sujet dans l’ordre : qu’est ce que React Fiber ? Qu’est ce qui change dans le moteur et ce que cela veut dire pour vous ? Nous nous intéresserons ensuite à chacune des nouveautés (Suspense, Lazy, Hooks, Error Boundaries, Time Slicing, ...) pour en détailler le fonctionnement, ce que cela apporte et son lien avec Fiber.
Slide link
L’émergence de l’Oculus Rift et des casques de VR ont conduit le monde du développement à se réintéresser à la 3D. Jusqu’alors Three.js était une référence quant à la façon dont les développeurs faisaient de la 3D sur les navigateurs web.
Le Web étant fait pour être simple - si si on vous assure, même le CSS -, il a fallu repenser la manière dont nous faisions de la 3D.
En premier lieu grâce à l’API WebVR, nous donnant un accès plus franc aux capacités matérielles de nos machines. Puis plus récemment grâce aux nouveaux framework émergeant nous rendant la tâche encore plus simple (et toujours avec moins de lignes de code). Il y a actuellement deux principaux frameworks React VR et A-Frame, dont nous vous expliquerons les différentes approches.
Nous allons dans cette conférence vous donner les clés pour démarrer en VR facilement et peut-être atterrir dans la réalité augmenté ou même la réalité mixte.
Slide link
Réconcilions web et audio (feat B. Plouzennec)
Dans la préhistoire du web existait 'bgsound', une balise HTML qui associait un son “d’ambiance” à la page. La mauvaise conception de ces éléments ont amené une haine viscérale envers les sites web lançant de la musique automatiquement. Pourquoi ne pas tout remettre à plat pour repenser ce qu’est l’audio dans le monde du web et ce qu’il peut nous apporter ? Aujourd’hui les nouveaux outils mis à disposition nous permettent de faire énormément de chose, quitte à envisager un retour des sites web avec de la musique.
Nous vous proposons de partir d’un riff de guitare acoustique et de transformer ce son vers un solo de guitare électrique digne de Jimi Hendrix à Woodstock – l’autotune n’a qu'à bien se tenir ! – à travers un live coding dans lequel nous réaliserons une pédale de distorsion entièrement Web. Ce sera l’occasion de découvrir par étapes certains éléments techniques comme Distortion, Reverb, Tone balance et l'affichage d’un spectre de son.
Et bien sûr, nous analyserons tout au long de cette expérience les erreurs qui peuvent transformer une expérience sensorielle en cauchemar sonore afin d’en déduire les bonnes pratiques à respecter pour favoriser au mieux l’expérience utilisateur !
Slide link
Package ? Tout compris !
Le 11 Octobre 2016, Facebook – qui n'utilisait déjà plus NPM – a open-sourcé avec google son propre gestionnaire de paquets : 'yarn'. Comment accueillir la nouvelle ? Doit-on se réjouir – pour sa rapidité notamment – ou s'inquiéter de la disparition potentielle de 'NPM' ?
Afin d’avoir un raisonnement logique pour répondre à cette question, je vous invite à prendre du recul sur les gestionnaire de paquets. Quel est leur rôle ? Comment doivent-ils s’utiliser ? Comment être certain d’avoir les même version de nos dépendances en production et en développement ? Comment gérer les dépendances : en arbre, à plat ou même les deux à la fois ? Comment sont stockés ces paquets, peuvent-ils être supprimés ?
Continuons notre exploration et nous nous apercevons très vite que les gestionnaires de paquets sont principalement influencés par la manière dont les dépendances sont importées dans notre code. Le TC-39 est en train de réfléchir sur les spécifications du ES Module Loader ; mettons-nous à leur place et voyons quelles sont les différentes options.
Slide link
