DEV FEST 2023
Nils, Alexandre, Nathan,
Quentin et Julien
01
FINIES LES APPS, PENSEZ LIBS
AVEC NX !
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
02
KEYNOTE: NEOSET
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
📽️️😄
03
WEBASSEMBLY BEYOND THE BROWSER
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 😅️
04
MODERN WEB
DEBUGGING WITH DEVTOOLS
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
😄️️
05
CORE WEB VITALS:
METTEZ VOTRE
APPLICATION SUR ORBITE
AVEC LES MEILLEURES
PRATIQUES
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
😄️️
06
LE MICROPYTHON SERPENT
PEU CONNU DANS LA
JUNGLE IOT, MAIS
FACILEMENT CHARMABLE
VOUS ALLEZ VOIR !
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
07
CHANGER SON
ENVIRONNEMENT FULLSTACK EN
UN CLIN D'OEIL AVEC DEVENV
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
️🛠️
08
SOUS LE CAPOT DES NAVIGATEURS
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 😱❄️️
09
L'UX ACCESSIBLE :
EXPLOITEZ LE POTENTIEL
DES ATTRIBUTS ARIA
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
😄️️
10
AU-DELÀ DU MYTHE,
DÉVELOPPEZ
CONFORTABLEMENT SUR
WINDOWS
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)
11
FÉMINISATION DE LA FILIÈRE
NUMÉRIQUE : CASSONS LES
CODES !
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
👩💻️
12
LA COMPRESSION WEB :
COMMENT (RE)PRENDRE LE
CONTRÔLE ?
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
️🚚️
13
DU CSS AUX SHADERS
WEBGL
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
😄️️
14
30 INDEX SUR UNE TABLE PG
DE 6TO : DÉFIS ET SOLUTIONS
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
15
MAIS AU FAIT, QUE SE PASSE-
T-IL QUAND JE METS EN LIGNE
UNE VIDÉO ?
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
📽️️️
16
EXPAND YOUR VIEW OF
YOUR APPLICATION
PERFORMANCE WITH
OPENTELEMETRY
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
17
WEB ML IN 2023 -
WHAT'S NEW WITH
MACHINE LEARNING IN
JAVASCRIPT?
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
😄️️
18
TOWARDS MODERN
DEVELOPMENT OF CLOUD
APPLICATIONS
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é
19
WOOP WOOP ASSASSIN DE LA
POLICE...
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!
️👋🚔
20
CLOUDBUSTERS : À LA
CHASSE DES COÛTS
FANTÔMES
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
21
LA CHECKLIST ULTIME POUR
RENDRE VOS APPLICATIONS
CLOUD NATIVE !
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
Straight to
the point
www.spikeelabs.fr
Merci

VDLT - Retour DevFest 2023

  • 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.
  • 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.
  • 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.
  • 9.
    MODERN WEB DEBUGGINGWITH 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: METTEZVOTRE APPLICATION SUR ORBITE AVEC LES MEILLEURES PRATIQUES
  • 11.
    CORE WEB VITALS NicolasFRIZZARIN @ 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 PEUCONNU DANS LA JUNGLE IOT, MAIS FACILEMENT CHARMABLE VOUS ALLEZ VOIR !
  • 13.
    LE MICROPYTHON SERPENTPEU 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 FULLSTACKEN UN CLIN D'OEIL AVEC DEVENV
  • 15.
    CHANGER SON ENVIRONNEMENTFULLSTACK 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 CAPOTDES 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 : EXPLOITEZLE 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.
  • 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 LAFILIÈRE NUMÉRIQUE : CASSONS LES CODES !
  • 23.
    FÉMINISATION DE LAFILIÈ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 AUXSHADERS WEBGL
  • 27.
    DU CSS AUXSHADERS 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 SURUNE TABLE PG DE 6TO : DÉFIS ET SOLUTIONS
  • 29.
    30 INDEX SURUNE 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 VIEWOF YOUR APPLICATION PERFORMANCE WITH OPENTELEMETRY
  • 33.
    EXPAND YOUR VIEWOF 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 IN2023 - WHAT'S NEW WITH MACHINE LEARNING IN JAVASCRIPT?
  • 35.
    WEB ML IN2023 - 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.
  • 37.
    TOWARDS MODERN DEVELOPMENTOF 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 ASSASSINDE LA POLICE...
  • 39.
    WOOP WOOP ASSASSINDE 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 ULTIMEPOUR RENDRE VOS APPLICATIONS CLOUD NATIVE !
  • 43.
    LA CHECKLIST ULTIMEPOUR 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.

Notes de l'éditeur

  • #18 IS is not =  Date ou date au format str
  • #24 (70% de victimes, 5% qui signalent)