Le paysage du développement mobile

Avant de plonger dans React Native, il faut comprendre les différentes approches pour créer des applications mobiles. Chaque approche a ses forces et ses limites.

Les trois grandes approches

Il existe trois familles principales pour développer des applications mobiles :

1. Développement natif : un langage par plateforme
2. Applications hybrides : du web empaqueté dans une app
3. Cross-platform : un code, des composants natifs

1. Développement natif

Le développement natif consiste à écrire du code spécifique à chaque plateforme en utilisant les outils officiels du fabricant.

iOS : Swift (et Objective-C)

// Swift - iOS uniquement
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let label = UILabel()
        label.text = "Bonjour !"
        view.addSubview(label)
    }
}

• IDE : Xcode (macOS uniquement)
• Langage : Swift (ou Objective-C pour du code ancien)
• Distribution : App Store

Android : Kotlin (et Java)

// Kotlin - Android uniquement
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val textView = findViewById<TextView>(R.id.greeting)
        textView.text = "Bonjour !"
    }
}

• IDE : Android Studio (Windows, macOS, Linux)
• Langage : Kotlin (ou Java pour du code ancien)
• Distribution : Google Play

Avantages et limites du natif

Avantages :

• Performance maximale (accès direct aux API du système)
• Accès complet aux fonctionnalités du téléphone
• Interface qui respecte les conventions de chaque plateforme

Limites :

• Deux bases de code à maintenir (une iOS, une Android)
• Deux équipes avec des compétences différentes (Swift vs Kotlin)
• Temps de développement doublé pour supporter les deux plateformes

2. Applications hybrides (WebView)

Les applications hybrides utilisent des technologies web (HTML, CSS, JavaScript) affichées dans une WebView (un navigateur intégré dans l'application).

// Ionic / Capacitor - Application hybride
// C'est du HTML/CSS/JS classique empaqueté dans une app
import { IonButton, IonContent, IonPage } from '@ionic/react';

function Home() {
  return (
    <IonPage>
      <IonContent>
        <h1>Bonjour !</h1>
        <IonButton>Cliquer</IonButton>
      </IonContent>
    </IonPage>
  );
}

Comment ça fonctionne

Votre code web (HTML/CSS/JS)
        ↓
    WebView (navigateur intégré)
        ↓
    Application mobile

Le code web tourne dans un navigateur intégré. Un pont (bridge) permet d'accéder aux fonctionnalités natives du téléphone (caméra, GPS, etc.) via des plugins.

Frameworks hybrides courants

• Ionic + Capacitor : framework UI + couche native
• Apache Cordova : l'ancêtre (moins utilisé aujourd'hui)

Avantages et limites des hybrides

Avantages :

• Une seule base de code web pour iOS et Android
• Réutilisation des compétences HTML/CSS/JS existantes
• Développement rapide pour des applications à dominante contenu

Limites :

• Performance inférieure (le rendu passe par une WebView)
• L'interface ne se comporte pas exactement comme une app native
• Animations et transitions moins fluides
• Accès aux fonctionnalités natives via des plugins (parfois limité)

3. Cross-platform (composants natifs)

Les frameworks cross-platform utilisent un seul langage pour générer des composants natifs sur chaque plateforme. Contrairement aux hybrides, il n'y a pas de WebView : les composants sont traduits en éléments natifs réels.

React Native (JavaScript/React)

// React Native - Cross-platform
import { View, Text, Button } from 'react-native';

function Home() {
  return (
    <View>
      <Text>Bonjour !</Text>
      <Button title="Cliquer" onPress={() => {}} />
    </View>
  );
}

• Langage : JavaScript (ou TypeScript)
• Framework : React
• Créé par : Meta (Facebook) en 2015
• Utilisé par : Instagram, Discord, Shopify, Bloomberg

Flutter (Dart)

// Flutter - Cross-platform
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('Bonjour !'),
          ElevatedButton(
            onPressed: () {},
            child: Text('Cliquer'),
          ),
        ],
      ),
    );
  }
}

• Langage : Dart
• Créé par : Google en 2017
• Utilisé par : Google Ads, BMW, Alibaba

Avantages et limites du cross-platform

Avantages :

• Une seule base de code pour iOS et Android
• Composants natifs (pas de WebView) : meilleures performances que les hybrides
• Accès aux fonctionnalités du téléphone via des modules natifs

Limites :

• Performance légèrement inférieure au natif pur (pont de communication)
• Certaines fonctionnalités très spécifiques à une plateforme nécessitent du code natif
• Dépendance au framework et à sa communauté

Comparaison des approches

Quand utiliser quelle approche ?

Choisissez le natif quand :

• L'application nécessite des performances maximales (jeux 3D, traitement vidéo)
• Vous exploitez des fonctionnalités très spécifiques à une plateforme
• Vous avez le budget pour deux équipes de développement

Choisissez l'hybride quand :

• L'application est principalement du contenu (articles, catalogues)
• Vous avez une application web existante à empaqueter
• Le budget et le temps sont limités

Choisissez le cross-platform quand :

• Vous ciblez iOS et Android avec une seule équipe
• L'application nécessite des performances proches du natif
• Vous voulez un rendu qui respecte les conventions de chaque plateforme
• Votre équipe maîtrise déjà JavaScript/React (React Native) ou veut apprendre Dart (Flutter)

À retenir