Qu'est-ce que Tamagui et comment l'utiliser : la solution universelle de style pour React

Qu'est-ce que Tamagui ?

Dans le monde du développement web et mobile moderne, créer des interfaces utilisateur cohérentes et performantes sur différentes plateformes a toujours été un défi. Voici Tamagui, une bibliothèque de style et un kit UI révolutionnaires qui changent la façon dont les développeurs abordent le développement React multiplateforme. Tamagui n'est pas seulement une solution de style supplémentaire, c'est un écosystème complet qui rassemble le meilleur des deux mondes : la flexibilité de React Native et la puissance du développement web.

À la base, Tamagui repose sur trois piliers principaux : Core, Static et Tamagui lui-même. La bibliothèque Core fournit un système de style universel pour React et React Native avec un large sur-ensemble typé de l'API de style de React Native, pour un poids d'environ 24 KB sans dépendances externes. Le compilateur Static est ce qui rend Tamagui vraiment spécial : un optimiseur qui transforme vos composants stylés en code idéal pour la plateforme grâce à l'analyse partielle, à l'extraction CSS, au tree flattening et à l'élimination du code mort.

Ce qui distingue Tamagui des autres solutions de style, c'est son compilateur d'optimisation. Ce n'est pas seulement un outil de build, c'est un système sophistiqué qui analyse votre code à la compilation et produit des éléments DOM parfaitement optimisés sur le web ou des composants View/Text sur les plateformes natives. Le compilateur peut aplatir des composants stylés complexes en simples divs avec du CSS atomique, ce qui améliore considérablement les performances tout en conservant l'expérience de développement que vous aimez.

La beauté de Tamagui réside dans son approche universelle. Vous écrivez vos styles une seule fois avec une API familière, et Tamagui gère la complexité pour les faire fonctionner parfaitement à la fois sur le web et sur les plateformes natives. Que vous construisiez une application web React, une application mobile React Native ou une application universelle qui fonctionne partout, Tamagui fournit les outils et composants nécessaires pour créer de belles interfaces performantes.

Commencer avec Tamagui

Commencer avec Tamagui est étonnamment simple, grâce à ses excellents modèles de démarrage et à sa documentation claire. L'équipe a créé plusieurs projets de démarrage, allant de simples exemples d'apprentissage à des monorepos prêts pour la production, ce qui permet de trouver facilement le bon point de départ pour votre projet.

Démarrage rapide avec le template de démarrage

Le moyen le plus rapide de démarrer avec Tamagui est d'utiliser leur template de démarrage. Cette commande crée un nouveau projet avec toute la configuration et les dépendances nécessaires déjà en place :

# Create a new Tamagui project
npm create tamagui@latest
    

Le template de démarrage vous guidera à travers une série de questions pour configurer votre projet, notamment si vous voulez un exemple simple ou une configuration plus complexe. Il prend en charge tout le travail lourd de configuration des fichiers, d'installation des dépendances et de création d'une structure de projet de base.

Installation et configuration manuelles

Si vous préférez configurer Tamagui manuellement ou l'ajouter à un projet existant, vous pouvez installer les paquets de base et tout configurer vous-même. Voici comment commencer :

# Install the core Tamagui packages
npm install @tamagui/core @tamagui/config @tamagui/animations-react-native
    

Une fois installé, vous devrez créer un fichier de configuration. Créez un fichier tamagui.config.ts à la racine de votre projet :

import { createTamagui } from '@tamagui/core'
import { config } from '@tamagui/config/v3'

const tamaguiConfig = createTamagui(config)

export default tamaguiConfig
    

Ensuite, vous devrez envelopper votre application avec TamaguiProvider pour rendre la configuration disponible dans toute votre application :

import { TamaguiProvider } from '@tamagui/core'
import config from './tamagui.config'

export default function App() {
  return (
    <TamaguiProvider config={config}>
      <YourAppContent />
    </TamaguiProvider>
  )
}
    

Votre premier composant Tamagui

Vous êtes maintenant prêt à commencer à utiliser les composants Tamagui. Voici un exemple simple qui montre la puissance du système de style de Tamagui :

import { View, Text, Button } from '@tamagui/core'

export default function WelcomeScreen() {
  return (
    <View 
      flex={1} 
      justifyContent="center" 
      alignItems="center" 
      backgroundColor="$background"
      padding="$4"
    >
      <Text 
        fontSize="$6" 
        fontWeight="bold" 
        color="$color"
        marginBottom="$4"
      >
        Welcome to Tamagui
      </Text>
      <Button 
        backgroundColor="$blue10"
        color="white"
        padding="$3"
        borderRadius="$4"
        onPress={() => console.log('Button pressed!')}
      >
        Get Started
      </Button>
    </View>
  )
}
    

Cet exemple met en avant plusieurs fonctionnalités clés de Tamagui : l'utilisation de jetons de design (comme $background, $4, $blue10), l'API de style familière de React Native et la possibilité d'écrire des styles qui fonctionnent sans friction sur toutes les plateformes.

NativeWind vs Tamagui

Lorsqu'il s'agit de styliser des applications React Native, deux approches populaires reviennent souvent dans les discussions : NativeWind et Tamagui. Même si les deux cherchent à résoudre des problèmes similaires, elles adoptent des approches fondamentalement différentes du style et offrent des avantages distincts selon les besoins de votre projet.

Philosophie et approche du style

NativeWind apporte les classes utilitaires familières de Tailwind CSS à React Native, permettant aux développeurs déjà à l'aise avec Tailwind d'appliquer le même modèle mental au développement mobile. Vous écrivez les styles avec des classes utilitaires comme bg-blue-500, p-4 et text-center, qui sont ensuite transformées en objets de style React Native.

Tamagui, en revanche, adopte une approche plus intégrée avec son système de style de type CSS-in-JS. Au lieu de classes utilitaires, vous écrivez des styles à l'aide de props et de jetons de design qui font partie d'un système de design complet. Cette approche offre une meilleure sûreté de type, des capacités de theming plus puissantes et une intégration plus profonde avec l'architecture des composants React.

Performance et optimisation

C'est là que Tamagui brille vraiment. Alors que NativeWind se concentre sur la fourniture d'une syntaxe familière pour écrire les styles, Tamagui inclut un compilateur d'optimisation sophistiqué qui peut améliorer considérablement les performances de votre application. Le compilateur effectue l'analyse partielle, l'extraction CSS, le tree flattening et l'élimination du code mort, transformant des composants stylés complexes en code optimisé spécifique à la plateforme.

Sur le web, le compilateur de Tamagui peut aplatir les composants stylés en simples divs avec du CSS atomique, un peu comme ce que vous obtiendriez avec un framework utilitaire, mais avec la flexibilité du style basé sur les composants. Sur React Native, il optimise les objets de style et réduit la surcharge des calculs de style à l'exécution.

Développement multiplateforme

NativeWind et Tamagui prennent tous deux en charge le développement multiplateforme, mais l'approche de Tamagui est plus complète. NativeWind se concentre principalement sur React Native avec un certain support web, tandis que Tamagui est conçu dès le départ pour être véritablement universel. Les mêmes composants et styles fonctionnent sans problème sur le web, iOS et Android.

L'approche universelle de Tamagui signifie que vous pouvez partager davantage de code entre vos applications web et mobiles, ce qui réduit le temps de développement et garantit la cohérence sur toutes les plateformes. L'approche par système de design facilite aussi le maintien de la cohérence de la marque et l'application des changements de design dans toute votre suite applicative.

Quand choisir l'un ou l'autre

Choisissez NativeWind si vous connaissez déjà Tailwind CSS et que vous souhaitez appliquer ce même modèle mental au développement React Native. C'est particulièrement adapté aux équipes principalement tournées vers le mobile et qui veulent une solution de style légère et familière.

Choisissez Tamagui si vous construisez des applications multiplateformes, avez besoin de capacités avancées de theming, voulez les gains de performance du compilateur d'optimisation, ou recherchez une approche plus complète de système de design. Tamagui est aussi un meilleur choix si vous avez besoin de fonctionnalités avancées comme les animations, des comportements responsives complexes ou une intégration poussée avec le système de composants React.

Tamagui Bento : des composants prêts à l'emploi

L'un des aspects les plus excitants de l'écosystème Tamagui est Tamagui Bento, une collection de composants UI à copier-coller conçus pour fonctionner sans friction à la fois avec React Native et les applications React web. Bento reprend la même philosophie qui a rendu des bibliothèques comme shadcn/ui populaires et l'applique au monde multiplateforme.

Tamagui Bento propose à la fois des composants gratuits et payants, les composants gratuits offrant des droits à vie et les versions payantes offrant davantage de fonctionnalités avancées et des designs premium. Ce modèle permet aux développeurs de démarrer rapidement avec des composants de haute qualité tout en soutenant la poursuite du développement de l'écosystème.

Ce qui rend Bento spécial

Les composants de Tamagui Bento sont conçus pour être véritablement universels. Ils s'adaptent sans difficulté à différentes plateformes, tailles d'écran et thèmes sans nécessiter de code spécifique à chaque plateforme. Cela signifie que vous pouvez utiliser le même composant dans votre application web et dans votre application mobile React Native, et qu'il s'affichera et se comportera de manière appropriée sur chaque plateforme.

Chaque composant est aussi hautement personnalisable et conçu pour être utilisé indépendamment. Vous n'êtes pas enfermé dans un système de design précis et vous n'êtes pas forcé d'utiliser les composants d'une manière particulière. L'approche copier-coller signifie que vous possédez le code source et pouvez le modifier pour répondre exactement à vos besoins.

Exemple : un composant de carte Bento

Voici un exemple de la manière dont vous pourriez utiliser un composant de carte Bento dans votre application :

import { Card, H3, Paragraph, Button, XStack, YStack } from '@tamagui/core'

export function ProductCard({ product }) {
  return (
    <Card 
      elevate 
      size="$4" 
      bordered 
      animation="bouncy"
      pressStyle={{ scale: 0.975 }}
    >
      <Card.Header padded>
        <H3>{product.name}</H3>
        <Paragraph theme="alt2">{product.description}</Paragraph>
      </Card.Header>
      
      <Card.Footer padded>
        <XStack justifyContent="space-between" alignItems="center">
          <YStack>
            <Paragraph size="$2">Price</Paragraph>
            <H3 color="$green10">${product.price}</H3>
          </YStack>
          <Button theme="green">Add to Cart</Button>
        </XStack>
      </Card.Footer>
    </Card>
  )
}
    

Cet exemple montre plusieurs fonctionnalités clés des composants Bento : l'utilisation de composants composés (Card.Header, Card.Footer), les animations intégrées, les jetons de design responsifs et la possibilité de créer des mises en page complexes avec très peu de code. Le même composant fonctionnerait parfaitement à la fois sur le web et sur mobile.

L'écosystème Bento

La collection Bento comprend une grande variété de composants, des boutons et champs de saisie simples aux tableaux de données complexes et aux systèmes de navigation. Chaque composant est soigneusement conçu pour suivre les principes modernes de UI/UX et inclut des fonctionnalités complètes d'accessibilité.

Les composants sont aussi conçus pour fonctionner ensemble sans friction. Vous pouvez combiner différents composants Bento pour créer des interfaces complexes, et ils conserveront un style et un comportement cohérents. Cela facilite la construction d'expériences utilisateur cohérentes sans avoir à vous soucier d'incohérences de design.

Fonctionnalités avancées et capacités

Tamagui va bien au-delà du style de base avec un ensemble complet de fonctionnalités avancées qui le rendent adapté aux applications complexes prêtes pour la production. Ces fonctionnalités incluent un theming sophistiqué, le design responsive, les animations et une intégration poussée avec l'écosystème React.

Système de theming intelligent

Le système de theming de Tamagui est l'une de ses fonctionnalités les plus puissantes. Il fournit des thèmes qui agissent comme des variables CSS, se superposant au fur et à mesure qu'ils descendent dans l'arbre de composants et se compilant en CSS pour éviter les re-renders. Cela signifie que vous pouvez avoir différents thèmes pour différentes parties de votre application, et que le système gérera la complexité d'appliquer les bons styles au bon moment.

import { Theme, Button } from '@tamagui/core'

export function ThemedButton() {
  return (
    <Theme name="dark">
      <Button theme="blue">Dark Theme Button</Button>
    </Theme>
  )
}
    

Le responsive simplifié

Tamagui rend le responsive incroyablement simple grâce à ses props et hooks responsifs. Vous pouvez écrire des styles responsifs qui se compilent en CSS atomique sur le web, garantissant des performances optimales tout en conservant la flexibilité du style basé sur les composants.

import { View, Text } from '@tamagui/core'

export function ResponsiveLayout() {
  return (
    <View 
      flexDirection="column"
      $gtSm={{ flexDirection: "row" }}
      padding="$4"
      $gtMd={{ padding: "$6" }}
    >
      <Text 
        fontSize="$4"
        $gtSm={{ fontSize: "$6" }}
        $gtMd={{ fontSize: "$8" }}
      >
        Responsive Text
      </Text>
    </View>
  )
}
    

Animations universelles

Tamagui inclut un système d'animation sophistiqué qui fonctionne sur toutes les plateformes. Les animations sont conçues pour être performantes et offrir un meilleur ciblage de plateforme grâce à des moteurs d'animation qui peuvent être changés sans modifier votre code.

import { Square, Button } from '@tamagui/core'

export function AnimatedSquare() {
  const [position, setPosition] = React.useState(0)
  
  return (
    <>
      <Square
        animation="bouncy"
        size={110}
        backgroundColor="$pink10"
        borderRadius="$9"
        hoverStyle={{ scale: 1.1 }}
        pressStyle={{ scale: 0.9 }}
        x={position * 50}
        y={position * 50}
      />
      <Button onPress={() => setPosition(p => (p + 1) % 3)}>
        Move Square
      </Button>
    </>
  )
}
    

Pourquoi Tamagui compte pour le développement moderne

Dans le paysage de développement actuel, la capacité à construire des applications qui fonctionnent sans problème sur plusieurs plateformes tout en maintenant des performances élevées et une bonne expérience développeur est plus importante que jamais. Tamagui répond à ces besoins en proposant une solution complète qui ne fait de compromis sur aucun point.

Le compilateur d'optimisation est sans doute la fonctionnalité la plus révolutionnaire de Tamagui. En analysant votre code à la compilation et en produisant du code optimal pour la plateforme, il élimine de nombreuses préoccupations de performance qui accompagnent généralement les solutions CSS-in-JS. Le compilateur peut aplatir des composants stylés complexes en simples éléments DOM avec du CSS atomique, offrant les avantages de performance des frameworks utilitaires tout en conservant la flexibilité du style basé sur les composants.

L'approche universelle signifie que vous pouvez réellement partager du code entre vos applications web et mobiles. Au lieu de maintenir des bases de code séparées ou de gérer la complexité de React Native Web, vous pouvez écrire vos composants une seule fois et les faire fonctionner parfaitement sur toutes les plateformes. Cela réduit non seulement le temps de développement, mais garantit aussi la cohérence dans toute votre suite d'applications.

L'approche système de design de Tamagui facilite aussi le maintien de la cohérence de la marque et l'application des changements de design. Avec des jetons de design centralisés, des thèmes et des composants, vous pouvez mettre à jour l'apparence de toute votre application en modifiant quelques valeurs de configuration seulement. C'est particulièrement utile pour les équipes qui doivent maintenir plusieurs applications ou mettre fréquemment à jour leurs systèmes de design.

Commencer dès aujourd'hui

Tamagui représente une avancée importante dans le développement React multiplateforme. Que vous construisiez une simple application web, une application mobile complexe ou une application universelle qui doit fonctionner partout, Tamagui fournit les outils et composants nécessaires pour créer de belles interfaces performantes.

La meilleure façon de comprendre la puissance de Tamagui est de l'essayer vous-même. Commencez par le template de démarrage, explorez les composants Bento et expérimentez les systèmes de theming et d'animation. Vous verrez rapidement comment l'approche de Tamagui en matière de style et de développement de composants peut transformer votre flux de travail.

Visitez le site web Tamagui pour explorer la documentation, essayer les exemples interactifs et découvrir toute la gamme de composants et de fonctionnalités disponibles. La collection Bento mérite aussi d'être explorée pour des composants prêts à l'emploi qui peuvent accélérer votre processus de développement.

Avec sa combinaison d'optimisation des performances, de compatibilité multiplateforme et d'expérience développeur, Tamagui est bien placé pour devenir la solution de référence pour le développement React moderne. Que vous soyez développeur solo ou membre d'une grande équipe, Tamagui vous fournit les outils nécessaires pour construire des applications à la fois belles et performantes sur toutes les plateformes.