Le document présente les conférences et ateliers de Dev Fest 2023, abordant des sujets variés dans le domaine du développement web, de l'optimisation des applications, et de l'accessibilité. Plusieurs intervenants partagent leurs expériences et outils pour améliorer les workflows de développement, gérer les performances, et favoriser la diversité dans la filière numérique. Des technologies comme WebAssembly, DevTools, et MicroPython sont mises en avant, reflétant les tendances actuelles et les meilleures pratiques du secteur.

1. DEV FEST 2023
Nils, Alexandre, Nathan,
Quentin et Julien

2. 01
FINIES LES APPS, PENSEZ LIBS
AVEC NX !

3. FINIES LES APPS, PENSEZ LIBS AVEC NX !
Younes Jaaidi @ Marmicode
NX:
Création d'une librairie pour y déposer des composants:
Aide à réorganiser
Améliore le workflow de l'application
Visualisation des dépendances de manière simple (éviter les dépendances cycliques)
Possibilité de séparer l'application dans des domaines fonctionnels
Sécurisation de la librairie avec des droits sur les librairies autorisées ou non
Compatible avec plein de stack
Tests: système de cache -> possibilité de tester uniquement les changements
Déploiement: système de cache -> possibilité de déployer uniquement les changements

4. 02
KEYNOTE: NEOSET

5. KEYNOTE: NEOSET
Alexandre Saudinos @ Neoset
Présentation de Neoset
Du tournage sur décor virtuel LED
Des tournages impossibles qui deviennent faisables (une plage avec la marée)
De meilleurs réactions des acteurs
Moins de post-prod
📽️️😄

6. 03
WEBASSEMBLY BEYOND THE BROWSER

7. Mete Atamel @ Google
Présente les évolutions possibles de Web Assembly
WebAssembly ou WASM est un standard web pour le developpement
d'applications.
Code bas niveau, bytecode compilé avec un langage de plus haut niveau
Concu pour remplacer Javascript avec de meilleures performances. Permet de
faire de la 3D, des moteurs de jeu dans un navigateur.
La présentation parle principalement des applications en dehors du
navigateur
Remplacer docker ?
Images 3-20x plus petites
Démarrage immédiat, élimine les démarrages à froid.
Portable et autosuffisant, ne dépend pas de la plateforme
Très peu de support actuellement mais croissant
Pas de http, hack via la console
WEBASSEMBLY BEYOND THE BROWSER 😅️

8. 04
MODERN WEB
DEBUGGING WITH DEVTOOLS

9. MODERN WEB DEBUGGING WITH DEVTOOLS
Jecelyn Yeen @ Google
Présentation de fonctionnalités de Chrome DevTools
Présentation des principes de la console
Pas mal de fonctionnalités "cachées"
Beaucoup d'extension possibles / plus d'une trentaine d'onglets disponibles
Quelques Tips intéressants
Possibilités de forcer les éléments qui se ferment au focus à rester affichées
• Les attributs :hover, :focused ne sont pas toujours suffisants
Recorder : permet d'enregistrer un test, de le rejouer plus lentement
Surcharge d'entetes http : possibilités d'ajouter un allow-origin: '*' sans modification du back ️
Surcharges de payload : ajouter des données dans les réponses du back
Quelques sondages pour avoir des retours sur l'ergonomie
Votes sur la disposition des fonctionnalités un peu trop cachées
😄️️

10. 05
CORE WEB VITALS:
METTEZ VOTRE
APPLICATION SUR ORBITE
AVEC LES MEILLEURES
PRATIQUES

11. CORE WEB VITALS
Nicolas FRIZZARIN @ Sfeir
Présentation des mesures
Quelques tips pour les améliorer
Outils DevTools de Chrome
Performance Insight > Performances
LightHouse
TreeShaking
😄️️

12. 06
LE MICROPYTHON SERPENT
PEU CONNU DANS LA
JUNGLE IOT, MAIS
FACILEMENT CHARMABLE
VOUS ALLEZ VOIR !

13. LE MICROPYTHON SERPENT PEU CONNU DANS LA JUNGLE IOT,
MAIS FACILEMENT CHARMABLE VOUS ALLEZ VOIR !
Baptiste CANDALH et Guillaume HOURDIER @ Elephant Technologie
Présentation d'un projet avec une alarme
MicroPython
FrameWork Python des microcontroleurs et des systèmes embarqués
Communication: SPI (Serial Peripheral Interface), I2C (Inter-Integrated Circuit), UART (Universal
Asynchronous Receiver-Transmitter)
Capteurs, afficheurs, réseaux et connectivité et d'autres périphériques.
Inclus les librairies de base de python jusqu'à la version 3.4 compilé en C
Simplicité de développement pour les développeurs Python

14. 07
CHANGER SON
ENVIRONNEMENT FULLSTACK EN
UN CLIN D'OEIL AVEC DEVENV

15. CHANGER SON ENVIRONNEMENT FULLSTACK EN UN CLIN D'OEIL AVEC
DEVENV
Anthony Pena @ Sfeir
Julien Tanguy @ Sfeir
DEVENV: une solution de gestion globale du tooling
Langages, dépendances
Outils de lint, de build, de test
Services (db, cache, etc.)
Pre-commit
Le chargement de l'environnement est automatique
Basé sur Nix, le plus grand repo de paquets à jour
Testable sur GitHub Codespaces sur github.com/jtanguy/workshop-devenv
️🛠️

16. 08
SOUS LE CAPOT DES NAVIGATEURS

17. Anthony Le Goas @ Zenika
Présente les étapes successives de rendu d'une page HTML/CSS dans un
navigateur
Parsing (html / css): Parse l'html à la volée, la grammaire html est permissive
pas comme xml. Possible de ne pas fermer des balises. Permet de faire du
rendu avant le téléchargement complet
Layout : disposition des éléments ( sizing, spacing..)
Paint : colors, borders
Composite : z-index, transformation
Intérêt de connaitre les étapes :
Pas d'animation sur le positionnement (left, top..) => induit un recalcul du
layout et des étapes successives. Plutôt utiliser un "transform" qui agit sur la
dernière étape
Présentation d'Houdini CSS
Pas encore très bien supporté mais permet d'agir sur les étapes du rendu avec
une api
Ex: script JS qui ajout des éléments sans les mettre dans le dom
-> la neige de l'intranet 😎
SOUS LE CAPOT DES NAVIGATEURS 😱❄️️

18. 09
L'UX ACCESSIBLE :
EXPLOITEZ LE POTENTIEL
DES ATTRIBUTS ARIA

19. L'UX ACCESSIBLE : EXPLOITEZ LE POTENTIEL DES ATTRIBUTS
ARIA
Gérôme GRIGNON @ Sfeir
Intérêt des attributs ARIA
Comment bien les utiliser: exemple avec le bouton et aria-disable
Media queries sur l’accessibilité
prefers-reduced-motion
prefers-contrast
😄️️

20. 10
AU-DELÀ DU MYTHE,
DÉVELOPPEZ
CONFORTABLEMENT SUR
WINDOWS

21. AU-DELÀ DU MYTHE, DÉVELOPPEZ CONFORTABLEMENT SUR
WINDOWS
Sébastien ODDO @ IPPON Technologies
Liens: https://gist.github.com/Sebi11/820c20820f84cd6691adcb03b47341ec
Plus besoin de cmder -> Windows Terminal
PowerToys (rassemblement de pleins d'outils):
Locksmith: quel processus lock le fichier
ColorPicker: sélectionne la couleur n'importe où sur l'écran
Screen Ruler: Permet de mesurer des pixels sur l'écran
DevToys (rassemblement de petits utilitaires pour dev):
Convertisseurs, encodeurs/décodeurs, formateurs, etc …
Powershell 7: Open Source ! Cmd Linux
Oh my Posh: customiseur de prompt avec un simple
JSON, plein de thèmes pour la personnalisation (multi OS)

22. 11
FÉMINISATION DE LA FILIÈRE
NUMÉRIQUE : CASSONS LES
CODES !

23. FÉMINISATION DE LA FILIÈRE NUMÉRIQUE : CASSONS LES CODES !
Mélissa Cottin @ ESTIMnumérique
Stéphanie Vachon @ Nantes Numérique Responsable
Une équipe mixte est plus efficace et apporte moins de biais
Il y a très peu de femmes dans les entreprises du secteur (28%), et encore moins aux
postes techniques (17%)
La moitié d'entre-elles partent de la filière avant leurs 35 ans parce qu'elles sont victimes
de sexisme ou du plafond de verre
Mais très peu d'entre-elles signalent les comportements sexistes par peur de représailles
👩💻️

24. 12
LA COMPRESSION WEB :
COMMENT (RE)PRENDRE LE
CONTRÔLE ?

25. LA COMPRESSION WEB : COMMENT (RE)PRENDRE LE CONTRÔLE ?
Antoine CARON @ Scaleway / Hubert SABLONNIERE @ CleverCloud
Présente en détail le fonctionnement des algos de compression, assez technique
Gzip : la base, rapide, basé sur des travaux anciens
LZ77 : par Abraham Lempel et Jacob Ziv en 1977
Codage de Huffman : par David Albert Huffman en 1952
Br : Brotli : version legèrement amelioré de LZ77
Plus lent à la compression, immédiat en décompression
Zopfli : Brute force "la meilleure compression" possible
Très lent à la compression, immédiat à la décompression
Donc pour fichier statiques compressés au build
pas de soucis pour un algo plus lent.
Très peu de gain, mais important pour les gros acteurs
Pour fichiers servis dynamiquement (payload api,..)
algo le plus rapide et performant : gzip
️🚚️

26. 13
DU CSS AUX SHADERS
WEBGL

27. DU CSS AUX SHADERS WEBGL
Julien Sulpis @ Zenika
Pourquoi faire des animations
Compréhension
Fluidité
Feedback
Outils
API native: Css => GPU
Web animation API: intégré à la plupart des frameworks
Canvas WebGL: bas niveau, directement dans le GPU, controlle chaque pixels
@jsulpis
😄️️

28. 14
30 INDEX SUR UNE TABLE PG
DE 6TO : DÉFIS ET SOLUTIONS

29. 30 INDEX SUR UNE TABLE PG DE 6TO : DÉFIS ET SOLUTIONS
Flora Briand et Emmanuel Quincerot @ Doctolib
Contexte:
70M d'utilisateur en Europe
60M de RDV/mois -> table 6TO
BDD 30 TO -> 16% de data et 84% pour les index
Temps de réponse trop long sur la mise à jour de la table RDV
Démarche:
MAJ PG + reindexation
Supprimer les index en doublon / inutilisés (sur chaque instance) -> cmd: pg_stat_all_indexes
Utilisation de la cmd EXPLAIN ANALYZE sur les select
Optimiser les index existants : possibilité de supprimer l'index et de créer un nouveau dans
une transaction
Finalité:
64% de charge en moins
70% plus rapide
3,8 TO de moins sur la table des RDV

30. 15
MAIS AU FAIT, QUE SE PASSE-
T-IL QUAND JE METS EN LIGNE
UNE VIDÉO ?

31. MAIS AU FAIT, QUE SE PASSE-T-IL QUAND JE METS EN LIGNE UNE VIDÉO ?
Antoine Wacheux @ AWS
Depuis le RAW de la caméra, la compression permet de gagner énormément de bande
passante
Mais la bande passante utilisateur est variable
Donc on découpe en petits morceaux (2 à 10 secondes)
Et on fait une playlist
Puis on choisit les morceaux en fonction du débit actuel
HTTP Live Streaming
Dash
📽️️️

32. 16
EXPAND YOUR VIEW OF
YOUR APPLICATION
PERFORMANCE WITH
OPENTELEMETRY

33. EXPAND YOUR VIEW OF YOUR APPLICATION PERFORMANCE
WITH OPENTELEMETRY
• Damien Raude-Morvan Satff Software Engineer @ Decathlon Digital
Avoir les bonnes informations en cas de problème imprévu.
3 types de signaux: logs, métriques et traces
Système open source pour collecter les logs, métriques et traces distribuées.
API basée sur des conventions sémantiques et spécifications, ce qui permet l'uniformisation des
métriques peu importe la technologie (rabbitmq, kafka...).
Plusieurs SDKs pour les langages php, python, rust.
Envoyer les données collectées par le protocole OTLP.
Pas de backend inclus, nécessite un outil de stockage, de visualisation des traces et des
métriques (Datadog, prometheuse, Grafana, Jaeger)
Mode automatique et manuel pour des besoins métiers spécifiques

34. 17
WEB ML IN 2023 -
WHAT'S NEW WITH
MACHINE LEARNING IN
JAVASCRIPT?

35. WEB ML IN 2023 - WHAT'S NEW WITH MACHINE
LEARNING IN JAVASCRIPT?
Jason Mayes @ Google
VisualBlock for ML
Facilité déconcertante
Ajouter ses propres modèles
TensorFlow JS
Avantages de faire ça côté client:
Privacy
Offline
Latency
Cost
😄️️

36. 18
TOWARDS MODERN
DEVELOPMENT OF CLOUD
APPLICATIONS

37. TOWARDS MODERN DEVELOPMENT OF CLOUD APPLICATIONS
Valentin Deleplace @ Google
Framework : Service Weaver
Développé en GO -> à l'avenir peut être d'autres langages
Utilité de facilité le déploiement d'applications dans le cloud (Google)
Haute performance: latence réduite par rapport à d'autres applications et architecture cloud
nettement moins couteux
Découpage d'une application par composants, possibilité de déployer les composants sur
d'autres réplicas (local/cloud, single/multi processus)
1 seule configuration pour tous les composants
Chaque composant possède son logger avec un système de télémétrie avancé

38. 19
WOOP WOOP ASSASSIN DE LA
POLICE...

39. WOOP WOOP ASSASSIN DE LA POLICE...
François-Xavier Lair @ Onepoint
Quelles sont les manières d'inclure des icônes sur un site?
Au début, des images, puis des sprites d'images
Mais on veut du vectoriel
Donc des polices, puisque SVG n'est pas encore supporté à l'époque
Et maintenant, pourquoi rester avec des polices?
Le chargement prend du temps, pour 90% inutile
On n'a que du monochrome
Utilisons les SVG!
On peut même les customiser à la volée en CSS!
️👋🚔

40. 20
CLOUDBUSTERS : À LA
CHASSE DES COÛTS
FANTÔMES

41. CLOUDBUSTERS : À LA CHASSE DES COÛTS
FANTÔMES
Omar KAMMOUN @ Sfeir
Réduire les coûts avec une approche FinOps:
Faire des simulations sur les cloud provider
Mettre en place des alertes sur le budget
Paiement à l'utilisation ou à la réservation
Stockage: choix de la classe (chaud, froid), logs très chers, stockage objet ou sur disque
Serveurs: Préférer les serverless, éteindre les VM si possible, éviter le surdimensionnement

42. 21
LA CHECKLIST ULTIME POUR
RENDRE VOS APPLICATIONS
CLOUD NATIVE !

43. LA CHECKLIST ULTIME POUR RENDRE VOS APPLICATIONS CLOUD
NATIVE !
Katia Himeur @ Cockpit io
Liste tous les points essentiels basés sur des retours d'expérience et des méthodes
qu'elle a mise en place au sein des entreprises qu'elle a accompagnée sur les aspects
techniques et fonctionnels

44. Straight to
the point
www.spikeelabs.fr
Merci