Skip to main content

​
Les Paradigmes de Développement Mobile

Il existe trois grandes stratégies pour cibler iOS et Android :
ParadigmeDescriptionLangagesAvantagesInconvénients
NatifUtilisation 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).
HybrideL’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. Mécanismes Clés
  • 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.
Exemple de Code (React Native) Notez l’utilisation de View, Text et de l’objet StyleSheet pour le style en JS. 
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

FrameworkLangagePhilosophieAvantages Spécifiques
FlutterDart (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)KotlinPermet 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.
ConceptMobile (React Native)Web (CSS)Rôle
Mise en PageFlexbox (implémentation JavaScript du modèle)Flexbox et CSS GridOrganisation des éléments dans une seule dimension.
UnitésPixels 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.
StyleObjets JavaScript (StyleSheet.create)Fichiers CSS (purs, SASS, Tailwind)Définit l’apparence. Les propriétés sont en camelCase (ex: marginHorizontal).