C'est dans l'historique ville de Cracovie en Pologne que s'est tenue la quatrième édition de la conférence App JS 2024. Au coeur du quartier juif Kazimierz et dans la vieille ville, l'organisateur Software Mansion, en étroite collaboration avec les équipes de Expo, convie les passionnés de développement mobile à se rassembler. Si vous ne le connaissiez pas, Expo est une plateforme open source qui simplifie le développement d'applications React Native en fournissant un environnement intégré et des outils permettant aux développeurs de se concentrer sur le code plutôt que sur des problèmes de compatibilité. Comme chaque année, leur application mobile App JS est mise à jour pour afficher une nouvelle interface, le planning des présentations et des speakers, ainsi qu'un plan complet du site, pratique ! Au programme, des invités de marques sont attendus. En passant par Space X, Microsoft ou bien Amazon; les démonstrations et annonces se sont multipliées. Embarquez avec nous pour découvrir notre top 5 des talks de ces deux jours !
Space X : La 3d en temps réel sur mobile
Aaron Grinder, ancien employé de Tesla (qui construit par ailleurs ses applications en React Native), nous a présenté leur manière de concevoir des scènes en 3D pour leur application Starlink.
Starlink, c'est l'accès à Internet à haut débit par satellite, un ADSL 2.0 entre autre, particulièrement adapté aux zones rurales et/ou reculées. Le kit Starlink comprend une antenne, son support, et des câbles pour la relier à son routeur personnel. Une des fonctionnalités clés de leur application réside dans le SkyScanner : une représentation 3D de points dans le ciel lorsque l'utilisateur pointe sa caméra en sa direction, l'invitant à "absorber" tous les points en orientant la caméra afin d'établir une carte en 3d de l'environnement et ses obstacles.
React Server Components avec Expo Router
Evan Bacon, créateur du routeur Expo et très présent sur X, nous a fait l'honneur de quitter sa Californie pour nous présenter son sujet de coeur : les Server Components sous React Native.
La démonstration consiste en un prototype sous forme d'un clone de l'application mobile de Chat GPT. Celle-ci tourne sous Expo et appelle l'api de Open AI pour répliquer l'expérience originelle, avec une zone de saisie pour l'envoi de message au modèle d'IA. L'envoi d'un message déclenche un appel API, la réponse reçue est ensuite stockée dans un <Suspense /> et interprétée lors de la réception. Cette réponse est générée par le serveur, qui récupère le retour de Open AI et retourne un composant React Native en retour, qui sera interprété par l'appareil lisant ce code.
En utilisant seulement un message "List of new movies", le serveur est capable de renvoyer un composant permettant d'afficher une carte, composée d'une liste de films, chacun affichant une miniature, un titre ainsi que des avis. La magie opère lorsqu'on souhaite interagir avec ces composants : ceux-si son natifs. Un appui long sur un film permet d'ouvrir un menu déroulant natif de iOS, affichant des actions pour partager, créer un évènement, etc.
La démo poursuit par des nouveaux scénarios de composants : générer une playlist Spotify, découvrir les lieux à visiter à Cracovie et pouvoir réserver un Uber à destination de ceux-ci, et finalement un composant affichant la météo locale avec un switch pour passer de degrés Celsius à Fahrenheit : ce sont des composants fonctionnels. En cette fin de démo, on sort des scénarios prévus et scriptés pour demander à l'IA de générer un composant permettant de convertir une monnaie PLN vers USD. Le résultat est sans appel : le style n'est pas au rendez-vous, mais ça fonctionne, avec du code généré en temps réel.
Cette démo nous montre que React Native peut nous proposer à la fois le meilleur du mobile avec des composants entièrement natifs, ainsi que le meilleur du web grâce aux Server Components.
WebGPU : une nouvelle API 3d native
Bien connu de la communauté, découvrez sur YouTube la chaîne éponyme de William Candillon, célèbre pour sa série "Can it be done in React Native". Spécialisé dans les défis complexes et cherchant à repousser toujours plus loin les limites de ce langage, William vient nous parler du nouveau standard Web GPU proposé par Apple et son impact sur mobile.
WebGPU est une nouvelle API graphique web qui permet d'exploiter pleinement la puissance des GPU modernes pour des rendus 3D et des calculs parallèles hautes performances directement dans le navigateur. Développée par le W3C avec des contributions d'entreprises comme Google, Apple et Mozilla, WebGPU offre plusieurs avantages clés :
- Accès direct au GPU : Contrairement à WebGL qui passe par le CPU, WebGPU communique directement avec le GPU pour des calculs et rendus graphiques plus rapides.
- Intégration de Skia : WebGPU s'appuie sur Skia, la bibliothèque graphique open source développée par Google et utilisée dans Chrome, Android, Firefox et d'autres produits. Cela permet d'exploiter les capacités graphiques avancées de Skia comme le support de nombreux formats d'images, les effets visuels, etc.
- Graphismes plus avancés : Grâce à Skia et l'accès direct au GPU, WebGPU permet d'utiliser des fonctionnalités graphiques de pointe comme le ray tracing, les ombres réalistes, les shaders personnalisés, idéal pour les jeux web et applications 3D complexes.
- Calculs parallèles : L'API WebGPU facilite grandement les calculs massivement parallèles sur GPU, utiles pour l'intelligence artificielle, le rendu vidéo en temps réel, etc.
- Portabilité : WebGPU fournit une API similaire à Vulkan, Metal et Direct3D, permettant aux développeurs familiers avec ces API graphiques d'adopter plus facilement WebGPU.
Bien que la prise en charge initiale soit limitée à certaines plateformes, les principaux navigateurs web comme Chrome, Safari et Firefox prévoient d'implémenter ce nouveau standard dans un avenir proche, révolutionnant ainsi les capacités graphiques et de calcul parallèle du web, en s'appuyant notamment sur la puissante bibliothèque graphique Skia.
React Native IDE : un plugin VSCode
Les développeurs React Native font face à un défi de taille lorsqu'il s'agit d'utiliser les éditeurs de code traditionnels. Bien que ces éditeurs offrent une expérience de développement solide pour de nombreux langages, ils ne sont pas spécifiquement conçus pour le développement d'applications mobiles natives avec React Native. Les développeurs doivent lancer séparément les émulateurs ou les connecter à des appareils physiques, ce qui peut s'avérer fastidieux et chronophage. De plus, le débogage visuel et logique des applications React Native reste une tâche ardue, nécessitant souvent l'utilisation d'outils tiers et de configurations complexes.
C'est dans ce contexte que Software Mansion, une entreprise spécialisée dans le développement React Native, a annoncé le lancement de React Native IDE, une extension révolutionnaire pour Visual Studio Code. Cette extension intègre de manière transparente toutes les fonctionnalités essentielles pour un développement React Native efficace et fluide.
React Native IDE inclut un gestionnaire d'émulateurs et de périphériques intégré, permettant aux développeurs de lancer et de basculer facilement entre différentes configurations de test sans quitter leur environnement de développement. De plus, l'extension offre des capacités de débogage visuel avancées, avec la possibilité d'inspecter visuellement les composants React Native, leurs propriétés et leur hiérarchie directement dans l'éditeur de code.
L'un des points forts de React Native IDE réside dans son support des breakpoints directement dans le code JavaScript du côté de Visual Studio Code, offrant aux développeurs un moyen intuitif de déboguer leur logique applicative. Grâce à cette fonctionnalité, les développeurs peuvent suivre l'exécution de leur code pas à pas, inspecter les valeurs des variables et résoudre les problèmes de manière plus efficace.En combinant ces fonctionnalités essentielles dans une extension Visual Studio Code, Software Mansion vise à simplifier considérablement le processus de développement React Native, en éliminant les tâches fastidieuses et en offrant un environnement de développement intégré complet et optimisé pour React Native.
React Native IDE de Software Mansion simplifie considérablement le processus de développement React Native. En intégrant la gestion des émulateurs, le débogage visuel et logique dans Visual Studio Code, cette extension offre un environnement intégré optimisé pour React Native. Les développeurs bénéficient ainsi d'un outil complet leur permettant de se concentrer sur la création d'applications mobiles natives de qualité. Software Mansion démontre son engagement envers l'amélioration de l'expérience de développement React Native avec cette solution innovante.
iOS : Live Activities avec Expo
Une des nouveautés majeures présentées lors de la conférence est l'intégration des live activities sur iOS avec React Native. Cette fonctionnalité permet d'afficher des informations en temps réel sur la Dynamic Island, les bannières ou l'écran de verrouillage des iPhones récents.
Une Live Activity est une notification persistante et dynamique liée à un événement ou une activité spécifique. Elle offre aux utilisateurs un accès instantané aux dernières informations, comme un score de match, le statut d'une livraison ou les données d'un suivi d'activité physique, sans avoir à déverrouiller leur iPhone. Les Live Activities utilisent WidgetKit et SwiftUI pour leur interface utilisateur. Elles sont gérées par ActivityKit, qui contrôle leur cycle de vie via une API native permettant de démarrer, mettre à jour et terminer une Live Activity.
Dominic Hains nous présente son module Expo open source permettant d'intégrer les Live Activities dans les applications React Native. Ce module, disponible sur GitHub, offre une communication bidirectionnelle entre React Native et les Live Activities, prenant en charge TypeScript, Swift et SwiftUI. L'intervenant a fourni un guide détaillé expliquant comment configurer et utiliser ce module dans un projet React Native. Bien que nécessitant d'écrire du code Swift pour la vue de la Live Activity, cette solution permet aux développeurs React Native de bénéficier de cette nouvelle fonctionnalité attrayante.
Comme dans la plupart de ce qu'Apple fait, on y retrouve un peu de "magie", dans le sens où l'on ne contrôle pas directement la connexion entre l'application elle-même et la Live Activity, on peut seulement décider du rendu visuel de cette dernière, et des données que l'on va utiliser. L'équivalent n'existe pas réellement sur Android, on peut néanmoins créer des notifications "permanentes" pour essayer de répliquer ce comportement.
Ce qu'il faut en retenir, c'est que les Live Activities ouvrent de nouvelles perspectives pour offrir une expérience utilisateur plus engageante et moins intrusive sur iOS. Grâce à des bibliothèques comme celle présentée, les développeurs React Native peuvent désormais tirer parti de cette fonctionnalité dans leurs applications mobiles.
React Native continue d'évoluer à un rythme soutenu, porté par une communauté dynamique et innovante. Les talks présentés lors de la conférence App JS 2024 en sont la parfaite illustration. Des projets open source majeurs comme Expo permettent d'intégrer de nouvelles fonctionnalités de pointe comme les Live Activities sur iOS pour une expérience utilisateur améliorée. Des entreprises leaders comme Software Mansion contribuent activement en développant des outils comme React Native IDE pour simplifier le processus de développement. Parallèlement, des avancées techniques majeures comme React Server Components, WebGPU et son intégration de la bibliothèque graphique Skia ouvrent de nouvelles perspectives pour créer des applications mobiles toujours plus performantes, immersives et riches en fonctionnalités. Qu'il s'agisse de repousser les limites du rendu 3D en temps réel, d'exploiter l'intelligence artificielle ou d'optimiser le workflow des développeurs, la communauté React Native ne cesse d'innover et de faire progresser cette technologie, confirmant son avenir prometteur pour le développement mobile cross-platform.
