> ## Documentation Index
> Fetch the complete documentation index at: https://docs.arkatech.fr/llms.txt
> Use this file to discover all available pages before exploring further.

# Fondamentaux des applications

> Le développement mobile se concentre sur la création d'applications exécutées nativement sur des systèmes d'exploitation (OS) mobiles comme iOS (Apple) et Android (Google). Le défi est souvent d'atteindre une performance proche du natif tout en gérant une base de code unique.

# Les Paradigmes de Développement Mobile

Il existe trois grandes stratégies pour cibler iOS et Android :

| **Paradigme**                    | **Description**                                                                                        | **Langages**                                   | **Avantages**                                                            | **Inconvénients**                                                  |
| :------------------------------- | :----------------------------------------------------------------------------------------------------- | :--------------------------------------------- | :----------------------------------------------------------------------- | :----------------------------------------------------------------- |
| **Natif**                        | Utilisation des SDK et langages natifs de l'OS.                                                        | Swift/Kotlin (iOS/Android) ou Java.            | **Performance et fluidité maximales**, accès complet aux API du système. | Deux bases de code distinctes (coût et temps élevés).              |
| **Hybride**                      | L'application est une webview encapsulée dans un conteneur natif (ex: Apache Cordova, Ionic).          | HTML, CSS, JavaScript.                         | Une seule base de code pour toutes les plateformes.                      | Performances limitées, sensation moins "native".                   |
| **Cross-Platform (Rendu Natif)** | Utilisation d'une base de code unique (souvent JS) pour générer des composants d'interface **natifs**. | JavaScript/TypeScript (React Native, Flutter). | Équilibre entre code unique et rendu natif (performance).                | Accès limité à certaines API spécifiques sans code natif (Bridge). |

# React Native (Cross-Platform Rendu Natif)

React Native est le framework de choix pour les développeurs web qui souhaitent construire des applications mobiles performantes. Il utilise le même modèle de programmation déclarative que React, mais au lieu de manipuler le DOM du navigateur, il interagit avec les composants UI natifs du mobile.

**<u>Mécanismes Clés</u>**

* **Le Bridge (Pont) :** Le moteur JavaScript (où votre code tourne) communique de manière asynchrone avec les threads UI natifs (iOS/Android) via un pont sérialisé. C'est ce qui permet au code JS de commander l'affichage de composants natifs.
* **Composants Natifs :** Au lieu d'utiliser des balises HTML (`<div>`, `<span>`), React Native utilise des composants qui se *mappent* directement sur leurs équivalents natifs :
  * `&lt;View&gt;` (équivalent de `UIView` sur iOS, `android.view` sur Android).
  * `&lt;Text&gt;` (pour du texte stylisé).
* **Style (Flexbox) :** Le style est défini en JavaScript (ou TypeScript) et utilise le modèle Flexbox pour la mise en page. Il n'utilise pas de CSS ni de sélecteurs classiques.

**<u>Exemple de Code (React Native)</u>**

Notez l'utilisation de `View`, `Text` et de l'objet `StyleSheet` pour le style en JS.

```typescript theme={null}
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MobileCard = ({ titre }) => {
  return (
    // <View> est le conteneur principal (comme une <div>)
    <View style={styles.cardContainer}>
      {/* <Text> pour le contenu textuel */}
      <Text style={styles.title}>{titre}</Text> 
    </View>
  );
};

// Les styles sont définis dans un objet JavaScript
const styles = StyleSheet.create({
  cardContainer: {
    backgroundColor: '#f5f5f5',
    padding: 16,
    borderRadius: 8,
    marginVertical: 10, // Utilisation de camelCase pour les propriétés CSS
    shadowOpacity: 0.1, // Propriétés spécifiques à l'ombre (non-standard CSS)
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default MobileCard;
```

# Autres Frameworks Cross-Platform

| **Framework**                         | **Langage**                  | **Philosophie**                                                                                            | **Avantages Spécifiques**                                                                          |
| :------------------------------------ | :--------------------------- | :--------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- |
| **Flutter**                           | **Dart** (Langage de Google) | Rend sa propre UI via le moteur **Skia**. Ne repose pas sur les composants natifs de l'OS.                 | **Performance très élevée** (rendu direct), grande cohérence UI/UX sur toutes les plateformes.     |
| **Kotlin Multiplatform Mobile (KMM)** | Kotlin                       | Permet de partager la **logique métier** (code) entre iOS et Android, mais requiert une UI native séparée. | Offre le meilleur des deux mondes (partage de la logique sans sacrifier la performance UI native). |

# Le Style et la Mise en Page Mobile

Contrairement au développement web où le CSS offre de nombreux modèles (Flexbox, Grid), le mobile se concentre principalement sur le modèle Flexbox.

| **Concept**      | **Mobile (React Native)**                         | **Web (CSS)**                       | **Rôle**                                                                                                     |
| :--------------- | :------------------------------------------------ | :---------------------------------- | :----------------------------------------------------------------------------------------------------------- |
| **Mise en Page** | **Flexbox** (implémentation JavaScript du modèle) | Flexbox et CSS Grid                 | Organisation des éléments dans une seule dimension.                                                          |
| **Unités**       | **Pixels Indépendants de la Densité (DP/DIP)**    | Pixels (px), Rem, Em, %             | Garantir que les éléments apparaissent de la même taille physique sur des écrans de résolutions différentes. |
| **Style**        | Objets JavaScript (`StyleSheet.create`)           | Fichiers CSS (purs, SASS, Tailwind) | Définit l'apparence. Les propriétés sont en `camelCase` (ex: `marginHorizontal`).                            |