Aller au contenu
reactMobileWebNode.jsTypeScriptChine

Découverte de Lynx, la nouvelle alternative à React Native

ByteDance vient d'annoncer LynxJS. Un framework open source comparable à React Native et Flutter, permettant de créer des applications iOS et Android en JavaScript.

Image d'un lynx, mascotte du framework de ByteDance
Photo by Glen Hooper / Unsplash

Le 5 mars 2025, un nouveau concurrent est apparu sur la scène du développement mobile : LynxJS.
Et son créateur est plutôt surprenant, puisqu'il s'agit de ByteDance, l'entreprise derrière l'application TikTok.

Cette nouvelle bibliothèque open source permet de créer des applications mobiles iOS et Android directement en JavaScript (ou TypeScript).

Quels avantages concrets ?

Au premier regard, LynxJS semble faire doublon avec d'autres frameworks comme React Native et Flutter.
Mais en regardant de plus près, certaines fonctionnalités rendent cette bibliothèque réellement intéressante.

I. Un framework agnostique

LynxJS est "framework-agnostic".
Cela signifie, qu'en théorie, il est possible de concevoir une application mobile avec Lynx en utilisant n'importe quelle bibliothèque Javascript.

Ainsi, bien que React soit mis en avant sur le site de LynxJS (via ReactLynx), il est tout à fait possible de construire son application avec Svelte ou Vue, par exemple.

II. Des performances accrues

Une des fonctionnalités les plus importantes de LynxJS est son découpage des tâches en deux runtimes séparés :

  1. Le "main-thread runtime", fonctionnant sur PrimJS, un moteur JavaScript extrêmement léger.
    Il est notamment responsable du chargement initial et des évènements synchrones de l'application.
  2. Le "background runtime", executant le code utilisateur asynchrone.

Ce découpage permet de ne pas bloquer le code important exécuté dans le main-thread, notamment si le code écrit est mal optimisé et lent.
Il permet également d'accélérer le premier démarrage de l'application, évitant une "page blanche" affichée à l'utilisateur lors de l'ouverture de cette dernière.

Et enfin, LynxJS fonctionne avec Rspack, un bundler écrit en Rust particulièrement rapide.

III. Une facilité de transition pour les développeurs web

Lynx apporte des balises remplaçant les balises HTML classiques telles que <p>, <div> ou <img>.
À la place, on y trouve <text>, <view> et <image>.
En dehors de cette différence, le développement via Lynx est similaire à celui d'une application web classique.
Notamment pour la mise en place du style.

Avec des frameworks comme React Native ou Flutter, le style des composants est appliqué via une syntaxe qui est propre au framework.

Par exemple, dans un composant React Native, le style est défini dans un élément StyleSheet.

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const LotsOfStyles = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

Avec LynxJS, cette gymnastique n'a plus lieu d'être, puisqu'il supporte nativement le CSS.
On peut injecter un fichier css dans un composant et même styliser les éléments <text>, <view> et <image> apportés par LynxJS.
Les transitions, les gradients et les sélecteurs CSS sont également supportés.

Cela rend l'expérience de développement beaucoup plus cohérente avec celle d'une application web.

Le problème de Lynx

Malheureusement, avec toutes ces nouvelles fonctionnalités prometteuses vient une problématique inhérente à tout nouveau framework.
Lynx est jeune, très jeune.

Flutter existe depuis quasiment 8 ans. React Native, quant à lui, existe depuis 10 ans.
Loin de moi l'idée de juger Lynx sur son âge, mais la stabilité d'une technologie et la richesse de sa documentation et des ressources associées dénichables sur internet sont très importantes.
React Native et Flutter ont eu le temps de bâtir un écosystème solide, ce n'est pas encore le cas de Lynx.

Il sera ainsi plus difficile de trouver des bibliothèques pensées pour combler des fonctionnalités manquantes de Lynx, comme c'est le cas avec React Native.

Intégrer des boutons, des champs de texte et des cases à cocher optimisées pour le mobile ne sera pas aussi simple qu'avec Flutter et sa grande liste de widgets pré-intégrés.
Par ailleurs, la recherche de ressources autour de ce framework se limite, pour le moment, à la documentation officielle.

Cependant, on peut noter que ByteDance a sorti une application nommée TikTok Studio, conçue avec Lynx.
Fournissant ainsi une vitrine pour ce nouveau framework et confirmant qu'il est possible de l'utiliser pour créer des applications prêtes pour l'utilisation à grande échelle.

Pour conclure

LynxJS est un framework très prometteur.

Son fonctionnement qui sépare les actions les plus importantes de l'application et le chargement initial du reste promet de belles performances sur mobile.
Son support de différents frameworks Javascript et de CSS va permettre à Lynx d'être une superbe plateforme de transition vers le monde du mobile pour les développeurs web.

Il est assez surprenant de constater la rapidité avec laquelle on peut démarrer un nouveau projet Lynx et commencer à développer son application iOS / Android.
Si vous êtes curieux, je vous laisse vous essayer au tutoriel officiel de Lynx.

Ce framework doit maintenant faire ses preuves auprès du grand public avant de devenir un véritable concurrent sérieux à Flutter et React Native.

Ressources

Lynx
Empower the web community and invite more to build cross-platform apps
lynx-examples/examples/Gallery at main · lynx-family/lynx-examples
🚀 Comprehensive Lynx Examples. Contribute to lynx-family/lynx-examples development by creating an account on GitHub.

Dernier