Rive, c’est bien plus qu’un simple outil d’animation. C’est une révolution pour le Motion Design interactif, pensée pour les développeurs et les designers. Pour faire simple, finies les animations lourdes, rigides ou compliquées à intégrer dans vos produits.

Dans cet article on vous présente rapidement l’outil Rive et pour plus de détails n’hésitez pas à cliquer sur la vidéo de Damien.

C’est quoi Rive concrètement ?

Rive c’est une plateforme qui permet de créer, d’animer et d’intégrer des animations interactives dans vos applications web ou mobiles. Contrairement aux solutions classiques, comme After Effects ou Lottie, Rive ne produit pas de vidéo ni d’animation figée, tout est géré en temps réel, comme un moteur de jeu.

Pour ce faire vous pouvez concevoir vos animations dans l’éditeur Rive (en ligne), puis il suffit de les intégrez directement dans vos projets grâce à des SDK performants (Flutter, React, Web, Unity, etc.). L’animation ne se contente pas de « jouer » comme une simple vidéo en boucle mais elle réagit directement aux actions de l’utilisateur, en live, c’est le « Live Code ». Pour en savoir plus voici une vidéo de démonstration.

Concrètement, cela signifie que le développeur peut déclencher, modifier ou synchroniser une animation en fonction de données ou d’événements (un clic, une saisie utilisateur, un changement d’état, une API qui répond…). Mais cela fonctionne aussi dans l’autre sens : une animation peut informer le code qu’un événement s’est produit. Par exemple, lorsqu’un personnage atteint une position précise, ou qu’un cycle d’animation est terminé.

Pourquoi c’est game-changer ?

1. Interactive by design

Les animations peuvent réagir aux clics, mouvements de souris, changements d’état… sans devoir les recompiler à chaque fois.

2. Performance optimale

Rive fonctionne en temps réel, avec un rendu fluide et léger, adapté même aux environnements exigeants (jeux, apps mobiles, IoT…).

3. Un seul outil pour tout faire

De la création à l’implémentation, le workflow est centralisé. Plus besoin d’aller-retour entre designers et devs pour chaque ajustement.

4. Collaboration et sauvegarde

Rive permet un travail collaboratif et propose un historique de vos animations.

Un cas d’usage concret

Imaginez des boutons qui ne se contentent plus de changer de couleur au survol, mais qui se déforment légèrement, rebondissent ou s’ouvrent subtilement pour inviter à l’action. Grâce à Rive, ces animations ne sont plus statiques : elles peuvent réagir en temps réel au comportement de l’utilisateur, à son parcours, ou même à l’état d’un formulaire.

Les transitions entre écrans deviennent plus fluides, les loaders s’adaptent à la durée de chargement ou au contexte de navigation, et l’interface prend vie tout en restant ultra légère. Résultat : une expérience utilisateur plus immersive et plus fluide.

Ce qu’on retient chez Jetdev

Rive ouvre un nouveau champ de possibilités pour créer des interfaces plus vivantes, intuitives et réactives. C’est un vrai pont entre design et développement, avec un énorme potentiel pour améliorer l’expérience utilisateur sans sacrifier la performance (et surtout, c’est amusant) !

]]> https://www.jetdev.fr/talks/rive-motion-design/feed/ 0 https://www.jetdev.fr/talks/creation-application-sur-mesure-terre-de-beauce/ https://www.jetdev.fr/talks/creation-application-sur-mesure-terre-de-beauce/#respond Thu, 05 Jun 2025 14:44:59 +0000 https://www.jetdev.fr/?p=7692 Découvrez les coulisses de la création de l’application sur-mesure que Jetdev a développée pour Terre de Beauce ! Dans ce JetTalk, nous vous emmenons du premier échange avec le client jusqu’à la mise en ligne de l’appli, en passant par toutes les étapes clés : définition des besoins, conception UI/UX centrée sur l’utilisateur, développement mobile et premiers retours terrain.

Au programme :

• William vous explique notre méthodologie pour cadrer un projet client et faire les bons choix technologiques.
• Damien détaille comment concevoir une expérience utilisateur simple et déployer une identité visuelle complète à partir d’un logo.
• Gauthier partage ses premiers pas en vibe coding sur une application client.
• Gurvann présente sa gestion du mode offline-first et la mise en place de tests E2E pour garantir la robustesse de l’app.

Plongez dans chaque phase du projet : de la première prise de contact à la définition des besoins, jusqu’à la conception UI/UX et au développement mobile. Découvrez comment nous transformons une idée en solution concrète et adaptée, une belle illustration de ce que nous aimons réaliser chez Jetdev !

Bon visionnage et n’hésitez pas à nous poser vos questions en commentaires ; on répondra avec plaisir !

Rémi vous explique tout dans ce nouveau JetTalks. 

Dans la vidéo que nous vous laisserons découvrir, Rémi vous expose ce qu’est le concept de web rendering et les différentes méthodes actuelles : SSR, CSR, SSG, avec un focus particulier sur le Server-Side Rendering (SSR) et son intégration avec Angular. 

Mais qu’est-ce que le Server-Side Rendering (SSR) ? 

Le SSR est une méthode où le contenu des pages web est généré directement sur le serveur avant d’être envoyé au navigateur de l’utilisateur. Contrairement au Client-Side Rendering (CSR), où le navigateur doit générer le contenu dynamiquement à partir de JavaScript, le SSR prépare une page complète prête à l’affichage. 

Ce dispositif présente de nombreux avantages que Rémi mettra en lumière.

Alors, dites-nous, quelle méthode choisirez-vous pour votre prochain projet tech et allez-vous utiliser Angular ? 🚀

Il y a toujours un moment où vous devez synchroniser l’état de votre interface client (Front-end) avec l’état de votre base de données lorsque vous développez une application. On peut diviser l’état de nos données en deux catégories : 

• L’ état client (client state) désigne l’ensemble des données que l’application garde en mémoire côté client (généralement dans le navigateur web) pour gérer l’interface utilisateur et les interactions de l’utilisateur. Généralement le thème, les notifications ou les valeurs saisies dans un formulaire. Il existe une multitude de librairies permettant de gérer l’état côté client comme Zustand, Pinia ou Redux etc.

• L’ état serveur (server state) désigne les données que l’on récupère via notre API. Le développeur (normalement flemmard) s’occupe de gérer la gestion des erreurs, la gestion du chargement, la synchronisation avec le state et s’il veut vraiment faire les choses proprement, il implémente un système de mise en cache côté client pour éviter d’appeler inutilement l’API.

C’est maintenant qu’entre en jeu TanStack Query.

C’est quoi TanStack Query ?

c’est une bibliothèque JavaScript qui simplifie la gestion des requêtes de données dans les applications web.

Oui mais qu’est ce que je gagne de plus que d’utiliser uniquement un bon vieux fetch ?

je te laisse découvrir les différents avantages qu’offre la librairie: 

• Gestion Automatique du Cache

TanStack Query met en cache les données récupérées, ce qui réduit le nombre de requêtes réseau nécessaires et améliore les performances de l’application.

•  Rafraîchissement Automatique des Données

La bibliothèque gère le rafraîchissement des données de manière automatique, garantissant que les utilisateurs voient toujours les informations les plus récentes sans avoir à recharger manuellement la page ou l’application.

• Gestion des États

TanStack Query simplifie la gestion des états de chargement, des erreurs, et des succès. Vous pouvez facilement afficher des indicateurs de chargement, gérer les erreurs, et réagir aux succès des requêtes avec une gestion centralisée.

• Gestion des erreurs

La librairie offre des mécanismes robustes pour gérer les erreurs survenant lors des requêtes de données. Cette gestion se fait à plusieurs niveaux, depuis les retours d’état jusqu’à la configuration avancée des stratégies de réessaie.

•  Réduction de la Complexité du Code

En automatisant la gestion des requêtes, des erreurs et des mises à jour de cache, TanStack Query réduit la quantité de code que vous devez écrire pour gérer ces aspects, rendant votre code plus propre et plus facile à maintenir.

•  Gestion Efficace des Requêtes

La bibliothèque permet de gérer efficacement les requêtes multiples, les annulations de requêtes et les dépendances entre requêtes, ce qui simplifie la gestion des scénarios complexes de données.

•  Intégration Facile

Elle s’intègre facilement avec des frameworks et des bibliothèques populaires comme React, Vue, Angular et Svelte.

•  Flexibilité et Configuration

TanStack Query offre des options de configuration flexibles, vous permettant d’adapter son comportement à vos besoins spécifiques, comme la durée de vie du cache, les stratégies de mise à jour, et les comportements de rafraîchissement.

Il y a quand même quelques inconvénients mais rien d’insurmontable

• Courbe d’Apprentissage

TanStack Query introduit des concepts et des API spécifiques qui peuvent nécessiter un temps d’apprentissage pour les développeurs, surtout s’ils ne sont pas familiers avec des bibliothèques similaires ou avec la gestion des requêtes.

•  Complexité pour les Cas Simples

Pour des applications très simples où il y a peu de requêtes API et l’application doit être développer rapidement, l’utilisation de TanStack Query peut sembler excessive et ajouter une complexité inutile. Par exemple un formulaire de contact ou une visionneuse d’images.

•  Dépendance Externe

Ajouter TanStack Query à votre projet signifie introduire une nouvelle dépendance. Bien que cela puisse offrir des avantages, il est important de considérer la gestion et la mise à jour de cette dépendance, ainsi que les implications potentielles en termes de taille du bundle et de performances.

Cas pratique

J’ai préparé un petit exemple d’une Application CRUD avec React mais vous pouvez intégrer facilement Tan-Stack Query sur votre framework préféré.

Installation

Pour cet exemple, j’ai utilisé TanStack Query v5

il suffit d’installer le package (dans notre cas @tanstack/react-query) puis d’importer le client comme ceci :

Récupération des données

On crée une fonction avec un fetch pour récupérer les jeux depuis notre API. On aurait aussi pu utiliser Axios.

J’ai créé un composant Games dont le rôle est d’afficher les différents jeux. Il faut que notre composant gère aussi l’affichage des erreurs et du chargement.

C’est maintenant qu’intervient notre librairie. On fait appel au hook useQuery qui prend en paramètres une requête API et une queryKey et nous renvoie un objet avec les données et le status de notre requête API pour afficher un message différent sur l’interface utilisateur. Si la requête échoue le status sera alors en « error » et si c’est en cours de chargement « pending ».

useQuery met en cache les résultats des requêtes, ce qui permet de réduire le nombre de requêtes envoyées au serveur. Si on exécute la même requête dans une autre partie de l’application, la librairie ne fera pas appel au serveur mais ira chercher la donnée dans le cache de l’application.

Voici un aperçu de notre applications qui affiche bien nos jeux et petit tips avec les DevTools TanStack Query on peut voir que nos jeux sont bien dans le cache de notre application avec la clé « games ».

Mis à jour des données

Même fonctionnement, on crée les requêtes API postGame et updateGame pour ajouter et mettre à jour nos jeux.

j’ai ensuite un composant AddCard avec un formulaire pour mettre à jour les données.

On utilise le hook useMutation qui prend en paramètres toujours une requête API et une fonction callback onSuccess qui invalide le cache pour rafraîchir la donnée grâce à notre queryKey.

Le hook nous retourne un objet UseMutation qui nous permet de “mutate” la donnée quand on le souhaite, dans notre cas à la soumission du formulaire.

c’est tout pour notre exemple, pour aller plus loin je vous invite à consulter la documentation très complète de TanStack Query. https://tanstack.com/query/latest

En résumé

Il existe d’autres solutions et de nombreux autres outils pour la gestion de vos requêtes. Je voulais simplement vous partager une solution possible pour vos prochains projets et, surtout, vous faire gagner du temps.

Si vous vous demandez si vous devez utiliser TanStack Query ou un équivalent dans votre application, posez-vous la question suivante : mon application doit-elle effectuer plusieurs requêtes pour afficher et mettre à jour des données ? La réponse est oui ? Je vous conseille donc d’utiliser TanStack Query :).

Pour retrouver nos autres articles, n’hésitez pas à faire un tour par ici.

Dans un monde où la vitesse de développement est cruciale, comment peut-on concevoir des produits viables, évolutifs et axés sur l’utilisateur? Je suis Damien Daix, Product Designer, et aujourd’hui, je vous dévoile les secrets de la création d’un MVP avec FlutterFlow.

À travers ce talk, nous explorerons comment FlutterFlow permet de transformer rapidement des idées en applications fonctionnelles. Vous apprendrez à concevoir efficacement, délivrer rapidement et itérer continuellement pour répondre aux besoins de vos utilisateurs. Nous discuterons des meilleures pratiques pour déterminer la viabilité minimale d’un produit, intégrer des fonctionnalités essentielles et utiliser des méthodologies de design éprouvées.

Que vous soyez novice ou expert, préparez-vous à découvrir comment FlutterFlow peut accélérer votre processus de développement, tout en garantissant une expérience utilisateur optimale. Ensemble, nous allons naviguer à travers les défis et les opportunités de la création d’un MVP réussi.

Rejoignez-moi pour une session enrichissante, pleine d’exemples concrets et de démonstrations pratiques! 🚀

Tu t’es toujours demandé quelle était la différence entre un processus ou un thread ?

Tu te demandes comment sont gérés les threads dans la JVM ?

Tu ne sais faire de la parallélisation qu’avec .parallelStream() ?

Si tu te poses une de ces questions Florian t’invite à visionner sa présentation !

En bonus à la fin il aborde le projet Loom et les virtuals threads arrivés dans la JDK21 !

(NB: les noms des entités précisent volontairement les types d’entités par soucis de clarté)

Avec des classes

Nous sommes en effet ici dans un cas typique où la POO peut nous apporter pas mal d’avantages.

Supposons que nous ayons besoin d’une fonction qui nous fournisse une chaîne de caractères représentant les informations des Person/Employee traités. Nous pourrions utiliser le mot clé instanceof pour déterminer de quelle instance de classe est l’objet traité.

Ok, Ok! Je vois d’ici les puristes s’exclamer, et à raison.
Nous sommes ici dans l’illustration.
Tant qu’à faire de la POO, nous devrions plutôt déclarer notre fonction toString() dans la classe!

L’inconvénient des classes dans une utilisation classique dans un frontend est qu’il faudra à chaque réponse d’une requête HTTP ou à chaque création d’un objet, créer les instances de classe avec le constructeur. (new EmployeeClass(firstName, ...))

Avec des types / interfaces

Reprenons l’exemple précédent mais en utilisant des objets et des types. Nous pourrions écrire:

Se pose alors le problème suivant:
Comment discerner les objets selon leur type pour éviter l’erreur ci-dessous?

Nous pourrions commencer par écrire la fonction toString()comme ceci.

Attention, le mot clé in sert à déterminer si la propriété existe dans l’objet, pas la valeur!

Le test sur la présence de la propriété est suffisant dans ce cas, mais pas totalement discriminant.

Certains pourraient être tentés d’utiliser l’opérateur typeof pour savoir de quel type est l’objet. Mais cela ne fonctionne qu’avec les types primitifs!

Nous pouvons, par contre, créer une fonction qui va nous permettre de determiner si l’objet est exactement du type PersonType et une autre pour savoir si l’objet est exactement du type EmployeeType. Vous noterez l’utilisation du type unknown qui signifie que le paramètre aura un type déterminé qu’on ne connait pas pour le moment, à l’inverse de any qui veut plutôt dire que le paramètre sera de n’importe quel type.

Même si ce code est tout à fait valable, Typescript nous donne 3 erreurs:

En effet, nous avons réussi à determiner si toutes les caractéristiques de nos entités passées en paramètres de nos fonctions répondaient à celles attendues par nos types, mais nous n’avons pas indiqué à Typescript que nos entités sont bien de ces types.
Pour cela, nous avons l’opérateur is qui va se positionner sur le type de retour des fonctions précédentes.

L’opérateur is est utile ici uniquement pour une vérification statique (static type checking = avant de transpiler le code, dans l’IDE). En effet, le code Javascript généré n’en tient pas compte:

Par honnêteté intellectuelle, je me dois de vous dire que ces fonctions ne sont pas sûres à 100% non plus. On pourrait augmenter leur niveau de sureté en vérifiant le type de chacun des attributs! 😅
Chaque développeur doit estimer où placer le curseur de la sureté en fonction du besoin!

Pourquoi est-ce important de s’intéresser à la sécurité quand on est dev ?

En tant que développeur, j’ai toujours considéré la sécurité comme une partie intégrante de la qualité de code. Tout comme il est de notre ressort de s’assurer que notre code est maintenable et évolutif, il est également de notre devoir de veiller à ce qu’il soit sécurisé, que notre projet soit exposé sur internet, ou sur le réseau interne de l’entreprise.

L’avènement de réglementations telles que le RGPD souligne l’importance de la conformité de nos logiciels aux normes de protection des données. Enfin, être sensibilisé à la sécurité permet de gérer les réponses aux incidents avec plus de sérénité.

La sécurité ne doit pas être une réflexion d’après coup, mais un aspect intégré tout au long du processus de développement, en témoigne l’apparition de la culture DevSecOps qui encourage la collaboration étroite entre développement, opérationnel et sécurité depuis la conception jusqu’à la production.

Le Forum InCyber

Anciennement nommé Forum International de la cybersécurité (FIC), lancé en 2007 par la Gendarmerie Nationale c’est un événement européen, considéré comme the place to be pour la cybersécurité.

On y trouve un salon avec plein de stands nous présentant des solutions pour répondre à nos divers besoins de sécurité ainsi qu’un forum dédié au partage d’expériences avec des conférences, talks, masterclass, demo technique, etc.

Les talks

Pour vous donner une idée du type de présentations données, voici celles nous ont plu.

Démo d’attaque

Au détour d’un stand, nous sommes tombés sur le « Hacking Lab », au menu : ambiance Hacking avec murs sombres et néons rouges, et plusieurs démos d’attaques:

Ingénierie sociale, à la source des attaques.

Du point de vue de l’attaquant, le duo Fabrice Litaize et Nathalie Granier, nous font plonger dans les coulisses des attaques par ingénierie sociale. Grâce à l’analyse comportementale et les facteurs psychologiques, ils nous montrent comment collecter des données professionnelles et personnelles pour ensuite les exploiter.

Un talk très accessible, qui nous sensibilise à toutes ces actions qui nous semblent anodines sur les réseaux sociaux, et qui laissent une trace facilement exploitable par des personnes malintentionnées.

From nothing to domain admin: en RedTeam tout est permis

En matière de sécurité, la Red Team est l’équipe qui simule des attaquants, tandis que la Blue Team est celle chargée de la défense.

Lors de cette démonstration d’attaque, Quentin Depriester nous a montré, au travers de quelques-unes des dernières missions de la Red Team d’Advens, comment, grâce à l’OSINT, les appels téléphoniques, l’envoi de SMS piégés, le phishing sur Teams, le contournement de l’authentification double facteur, l’implantation sur le réseau, etc., ils parviennent à acquérir de nombreux privilèges en partant simplement du nom de l’entreprise.

Cette démonstration était non seulement très impressionnante, mais aussi parsemée d’humour, on y a découvert de nombreuses techniques mises en œuvre. La partie sur l’intrusion physique, digne d’Ocean’s Eleven, me conforte dans ma pensée qu’il est important que tout le monde soit sensibilisé à la sécurité dans une entreprise.

Retour d’expérience et partage sur l’analyse de différentes cyberattaques en Afrique et plus particulièrement dans le domaine bancaire.

Encore une démo d’attaque, Clement DOMINGO, alias SAXX, nous emmène en Afrique pour décortiquer le cas d’une attaque qui a eu lieu sur plusieurs banques, on part d’un simple document Word et tel Alice qui suit le lapin blanc, nous suivons SAXX au pays des fails, des infostealers, ransomgangs, traffers, etc., un veritable voyage dans l’univers du cybercrime.

Enfin, nous prenons un peu de recul, sur ce type de campagne et sur leurs impacts. Très orienté environment Windows, cette présentation un peu moins accessible pour les moldus était très dense.

Les jetons secrets de l’API dévoilés : L’analyse d’un million de domaines révèle les risques critiques du web moderne

Antoine Carossio, co-fondateur d’Escape, nous explique comment ils ont monté une méthodologie pour analyser un million de domaines afin de récupérer plus de 18 000 jetons d’API dont 41% étaient hautement critiques. En plus de nous exposer les résultats, l’intervenant nous fournit une liste de contrôle pratique pour sécuriser nos API.

Les jetons d’API, en tant que développeur web, voilà un sujet qui me parle bien, les résultats de l’analyse d’Escape sont effarants, ce qui semble transparaitre est le manque de formation de développeurs sur les bonnes pratiques et le manque d’outils lié à la sécurité dans la partie CI / CD. #DevSecOps

Masterclass

Nous avons aussi assisté à plusieurs masterclass pour ouvrir nos chakras et notre culture générale, mais celle que nous avons retenue concerne l’aléatoire :

OpenTRNG : une initiative open-source de générateurs physiques de nombres vraiment aléatoires

Les générateurs de nombres vraiment aléatoires (en anglais True Random Number Generators) c’est la base en cybersécurité. Florian Pebay-Peyroula, après nous avoir rappelé les bases de la génération de nombres aléatoires, nous présente l’initiative OpenTRNG qui a pour objectif de fournir en open-source à la communauté les éléments disponibles dans la littérature scientifique.

Un sujet très loin de ce que nous faisons au jour le jour, peut-être un mini-projet sur FPGA pour le JetLab cet été ?

En bref

Le FIC c’est super intéressant même quand on est développeur, certes, il y a beaucoup de stands de commerciaux, présents pour vendre leur solution, des conférences très poussées ou des sujets de recherches tout aussi poussés. Mais c’est aussi l’occasion d’être sensibilisé aux enjeux de la sécurité, découvrir de nouvelles technologies, rencontrer des experts et faire le plein d’inspiration.