Chapitre 115 minIntermédiaire
Application native, multiplateforme ou PWA : que choisir ?
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- distinguer une application native, multiplateforme, hybride et une PWA ;
- expliquer comment React Native affiche de vrais composants natifs ;
- comparer React Native, Flutter et .NET MAUI ;
- choisir une approche pour un besoin donné et justifier ce choix.
4 exercices corrigés1 schéma
Une application mobile se construit de trois grandes façons : en natif, avec le langage de chaque système (Kotlin pour Android, Swift pour iOS) ; en multiplateforme, avec un seul code qui produit les deux applications (React Native, Flutter, .NET MAUI) ; ou en web, avec une PWA, un site installable qui tourne dans le navigateur du téléphone. Ce chapitre explique ce qui distingue ces approches, comment fonctionne React Native, et comment choisir pour un projet de BTS SIO.
Ce qu'une application mobile a de particulier
Une application mobile n'est pas un site web en plus petit. Elle vit dans un environnement qui impose ses règles, et ces règles reviennent dans tous les chapitres du cours.
| Contrainte | Ce que ça change pour toi |
|---|---|
| Petit écran tactile | Des cibles d'au moins 48 points, une action principale par écran, la navigation au pouce |
| Réseau intermittent | Un train, un parking souterrain, un hôpital : l'application doit prévoir l'absence de réseau (chapitre 7) |
| Cycle de vie | Le système met ton application en arrière-plan, puis peut la fermer sans prévenir pour libérer de la mémoire |
| Batterie et données | Pas de requête toutes les secondes, des images compressées |
| Permissions | Caméra, position, notifications : l'utilisateur accepte ou refuse, et peut changer d'avis (chapitre 8) |
| Installation par un magasin | Google Play et l'App Store vérifient l'application avant de la publier (chapitre 12) |
| Mises à jour lentes | Des utilisateurs gardent l'ancienne version des mois : l'API doit rester compatible avec elle |
| Appareil hors de ton contrôle | Le téléphone se perd, se prête, se modifie : le code de l'application se lit (chapitre 13) |
Deux systèmes se partagent le marché. Android (Google, et les constructeurs Samsung, Xiaomi, Google Pixel…) équipe environ sept smartphones sur dix dans le monde ; iOS (Apple, iPhone seulement) équipe les autres. En France, la part de l'iPhone est plus forte que la moyenne mondiale. Une application d'entreprise destinée à des salariés équipés par l'employeur peut viser un seul système ; une application grand public doit viser les deux.
Les quatre façons de construire une application mobile
Le natif. Tu écris l'application Android en Kotlin avec Android Studio, et l'application iOS en Swift avec Xcode. Chaque application utilise directement les composants et les API de son système. C'est la meilleure intégration possible, au prix de deux applications à écrire, à tester et à maintenir, par deux compétences différentes.
Le multiplateforme. Tu écris un seul code, et un framework produit une vraie application Android et une vraie application iOS, publiées dans les magasins comme les autres. React Native, Flutter, .NET MAUI et Kotlin Multiplatform appartiennent à cette famille. Le code commun dépasse souvent 90 % ; le reste traite les différences de chaque système.
L'hybride. Une application native minimale contient une WebView, c'est-à-dire un navigateur intégré, qui affiche une application web. Des greffons donnent accès à la caméra ou aux notifications. Capacitor, de l'équipe d'Ionic, est l'outil de référence. Tu réutilises un site existant, mais l'interface reste celle d'une page web.
La PWA. Une Progressive Web App est un site web qui s'installe sur l'écran d'accueil, s'ouvre sans barre d'adresse et fonctionne hors ligne grâce à un service worker. Pas de magasin, pas de compilation : une adresse web suffit. C'est la solution la plus légère, avec des accès au matériel plus limités, surtout sur iPhone (chapitre 10).
Le natif : Kotlin et Swift
| Android | iOS | |
|---|---|---|
| Langage | Kotlin, langage privilégié par Google depuis 2019 (Java reste possible) | Swift (Objective-C pour l'ancien code) |
| Interface | Jetpack Compose (déclaratif), ou les vues XML historiques | SwiftUI (déclaratif), ou UIKit |
| Environnement | Android Studio, sous Windows, macOS ou Linux | Xcode, uniquement sur Mac |
| Format installé | APK, ou AAB pour le Play Store | IPA |
| Magasin | Google Play, et d'autres (Samsung, F-Droid…) | App Store, et quelques magasins alternatifs dans l'Union européenne |
Jetpack Compose et SwiftUI ressemblent beaucoup à React : l'interface est une fonction de l'état, et elle se redessine quand l'état change. Si tu passes un jour au natif, ce que tu apprends ici te servira.
Le natif reste le bon choix pour une application qui exploite le système à fond (un widget d'écran d'accueil, une montre connectée, un traitement audio ou vidéo en temps réel) ou quand une équipe a déjà les deux compétences. Le sujet de cybersécurité SLAM de 2024 (alors épreuve E6, aujourd'hui E7) contenait du code Java Android : savoir lire du code natif sert à l'écrit, même si tu développes en React Native (chapitre 14).
Le multiplateforme : React Native, Flutter, .NET MAUI
| React Native (avec Expo) | Flutter | .NET MAUI | Kotlin Multiplatform | |
|---|---|---|---|---|
| Éditeur | Meta, et la communauté (Expo, Microsoft…) | Microsoft | JetBrains | |
| Langage | JavaScript ou TypeScript | Dart | C# | Kotlin |
| Interface | Composants natifs du système, pilotés depuis JavaScript | Dessinée par le moteur de Flutter, pixel par pixel | Composants natifs, pilotés depuis C# | Partage la logique ; l'interface peut rester native ou passer par Compose Multiplatform |
| Ce que tu réutilises au BTS | React, JavaScript, npm | Rien : un langage de plus | C# et la programmation objet (cours POO) | Kotlin, si tu as fait de l'Android |
| Web | Oui, avec React Native Web | Oui | Non | Expérimental |
| Exemples | Microsoft Office mobile (en partie), Discord, Shopify, Bluesky | Applications de Google (Google Pay), BMW, Alibaba | Applications métier d'entreprises équipées en .NET | Netflix, McDonald's (logique partagée) |
Flutter est l'autre grand choix du marché ; les deux frameworks se valent en performances pour une application de gestion, et les offres d'emploi citent l'un et l'autre. Choisis Flutter si tu veux apprendre Dart, ou si ton entreprise d'alternance l'utilise. .NET MAUI, qui a succédé à Xamarin (fin du support en mai 2024), fait partie de .NET 10 : c'est une piste naturelle si ta classe travaille surtout en C#.
L'hybride et la PWA : le Web dans le téléphone
Si tu as déjà une application web React, deux chemins existent sans réécrire l'interface.
- La PWA : tu ajoutes un manifeste et un service worker, et ton site devient installable. Aucune compilation, aucun magasin, mise à jour instantanée. C'est l'objet du chapitre 10.
- Capacitor : tu emballes ce même site dans une application native publiable dans les magasins, avec des greffons pour la caméra, la position ou les notifications.
Dans les deux cas, l'interface reste une page web. Pour un outil interne, utilisé quelques minutes par jour, c'est souvent suffisant. Pour une application qui doit donner l'impression d'une vraie application (gestes, transitions, listes de milliers d'éléments, travail en arrière-plan), React Native ou Flutter font mieux.
Comment fonctionne React Native
React Native applique le modèle de React au mobile. Tu écris des composants en JSX, avec des props et de l'état, exactement comme en React web. La différence est dans ce que les composants produisent : <View> et <Text> ne deviennent pas des <div> et des <span>, mais de vrais composants natifs : une android.view.View et une TextView sur Android, une UIView et un UILabel sur iOS.
- Ton code JavaScript est assemblé en un seul fichier, le bundle, par l'outil Metro.
- Sur le téléphone, le moteur Hermes, un moteur JavaScript conçu pour le mobile, exécute ce bundle. En production, le bundle est précompilé en bytecode : l'application démarre plus vite.
- Quand l'état change, React calcule ce qui doit changer à l'écran, et le moteur de rendu de React Native (Fabric) crée ou modifie les vues natives correspondantes.
- Pour appeler une fonction du système (lire le trousseau, ouvrir la caméra), le JavaScript passe par des modules natifs écrits en Kotlin et en Swift, appelés directement grâce à l'interface JSI.
Ces trois briques, Fabric, les modules natifs et JSI, forment la nouvelle architecture de React Native, la seule disponible depuis Expo SDK 55. Les anciens tutoriels parlent d'un « pont » (bridge) qui sérialisait chaque message en JSON : il n'existe plus.
Expo est le framework construit autour de React Native : il fournit l'outil de création de projet, la navigation par fichiers (Expo Router), une centaine de modules pour le matériel (caméra, position, stockage sécurisé…), l'application Expo Go pour tester sans rien compiler, et des services en ligne pour compiler et publier. La documentation de React Native recommande de démarrer avec un framework, et cite Expo en premier. Expo est à React Native ce que Next.js est à React.
Comparer et choisir
| Critère | Natif | React Native / Flutter | Hybride (Capacitor) | PWA |
|---|---|---|---|---|
| Bases de code | Deux | Une | Une (le site) | Une (le site) |
| Interface | Native | Native (React Native) ou dessinée (Flutter) | Page web | Page web |
| Accès au matériel | Total | Très large, par modules | Par greffons | Limité, surtout sur iPhone |
| Fonctionnement hors ligne | Oui | Oui | Oui | Oui, avec un service worker |
| Publication dans les magasins | Oui | Oui | Oui | Non (installation depuis le navigateur) |
| Mise à jour | Par le magasin | Par le magasin, ou à distance pour le JavaScript | Par le magasin, ou à distance | Immédiate |
| Coût d'entrée pour un étudiant SLAM | Élevé (deux langages, un Mac pour iOS) | Moyen (React ou Dart) | Faible | Faible |
Pour choisir, pose-toi ces questions dans l'ordre.
- Une adresse web suffit-elle ? Si les utilisateurs acceptent d'ouvrir un site, et que l'application n'a besoin que de formulaires, de listes et d'un peu de hors ligne, une PWA suffit.
- Faut-il les magasins ou un matériel précis ? Notifications fiables sur iPhone, biométrie, Bluetooth, travail en arrière-plan : il faut une application installée.
- Quelles compétences a l'équipe ? Une équipe React choisit React Native ; une équipe C# regarde .NET MAUI ; une équipe qui a déjà des développeurs Android et iOS reste en natif.
- Quelle durée de vie ? Une application qui vivra dix ans mérite un framework soutenu par un grand acteur et une large communauté.
Le choix de ce cours et l'application fil rouge
Ce cours utilise React Native avec Expo pour trois raisons. Tu réutilises React, que tu apprends déjà en SLAM. Tu testes sur ton propre téléphone, Android ou iPhone, sans Mac et sans compiler. Et l'application obtenue est une vraie application native, qui coche sans discussion la case « code exécuté sur un terminal mobile » de l'annexe II.E du référentiel.
L'application fil rouge, AppliFrais Mobile, se construit chapitre après chapitre.
| Chapitre | Ce que tu ajoutes |
|---|---|
| 2 | Le projet, lancé sur ton téléphone |
| 3 | Les composants de base : boutons, champs, cartes |
| 4 | La navigation : écran de connexion, onglets « Mes fiches » et « Profil », détail d'une fiche |
| 5 | La liste des fiches et le formulaire d'ajout d'un frais |
| 6 | La connexion à l'API, avec jetons d'accès et de rafraîchissement |
| 7 | Le stockage sécurisé du jeton et la saisie hors ligne |
| 8 | La photo du justificatif et la commune du visiteur |
| 9 | Le rappel de fin de mois, la notification de validation et le déverrouillage biométrique |
| 11 et 12 | Les tests, l'APK et la publication |
| 13 | La revue de sécurité avec l'OWASP MASVS |
L'architecture ne change pas d'un chapitre à l'autre : l'application ne parle qu'à l'API, et seule l'API parle à la base MySQL.
Exercice 1 sur 4 Classer les technologies Réussi À revoir
Pour chaque technologie, donne l'approche (native, multiplateforme, hybride ou PWA) et le langage principal : Flutter ; SwiftUI ; Capacitor ; React Native ; Jetpack Compose ; .NET MAUI ; un site React avec un manifeste et un service worker.
Voir la réponseMasquer la réponse de l'exercice 1
| Technologie | Approche | Langage |
|---|---|---|
| Flutter | Multiplateforme | Dart |
| SwiftUI | Native (iOS) | Swift |
| Capacitor | Hybride | HTML, CSS, JavaScript |
| React Native | Multiplateforme | JavaScript ou TypeScript |
| Jetpack Compose | Native (Android) | Kotlin |
| .NET MAUI | Multiplateforme | C# |
| Site React avec manifeste et service worker | PWA | JavaScript |
Tu avais trouvé ?
Exercice 2 sur 4 Choisir l'approche Réussi À revoir
Propose une approche pour chaque besoin, en une phrase de justification.
- Une mutuelle veut une application grand public, sur Android et iPhone, avec déverrouillage par empreinte et notifications. Son équipe développe en React.
- Le service informatique d'une mairie veut que les agents consultent l'annuaire interne depuis leur téléphone personnel, sans rien installer depuis un magasin.
- Un studio de jeux veut un jeu de réflexes en 3D avec des animations à 120 images par seconde.
- Une entreprise de transport équipe ses 40 chauffeurs de terminaux Android. Elle a trois développeurs C# et une application de bureau WPF.
Voir la réponseMasquer la réponse de l'exercice 2
- React Native (avec Expo) : une seule base de code pour les deux systèmes, des notifications et une biométrie fiables, et l'équipe réutilise React. Flutter conviendrait techniquement, mais imposerait Dart.
- Une PWA : une adresse web suffit, l'annuaire n'a besoin que d'une liste et d'une recherche, et rien ne passe par un magasin. L'installation sur l'écran d'accueil reste possible pour ceux qui le veulent.
- Du natif, ou un moteur de jeu (Unity, Godot). Ni React Native ni une PWA ne sont faits pour la 3D en temps réel ; ce n'est pas une application de gestion.
- .NET MAUI : un seul système visé, et l'équipe réutilise C#, ses classes métier et ses compétences. Une application Android native en Kotlin serait l'autre option, au prix d'un nouveau langage.
Tu avais trouvé ?
Exercice 3 sur 4 Vrai ou faux Réussi À revoir
- Une application React Native affiche ses écrans dans une WebView.
- Pour publier une application sur l'App Store, il faut un compte développeur Apple.
- Une PWA peut être installée sur l'écran d'accueil d'un téléphone Android.
- Avec React Native, l'application Android et l'application iOS partagent la totalité de leur code, sans exception.
- Un étudiant qui ne possède pas de Mac peut tester son application React Native sur un iPhone.
Voir la réponseMasquer la réponse de l'exercice 3
- Faux. Le JavaScript s'exécute dans le moteur Hermes et pilote des composants natifs ; aucune page HTML n'est affichée.
- Vrai. Le programme Apple Developer est payant (99 dollars par an, chapitre 12).
- Vrai. Chrome propose l'installation quand le site a un manifeste valide et est servi en HTTPS.
- Faux. La plus grande partie est commune, mais certains détails diffèrent : un fichier
.ios.tsx, un test surPlatform.OS, une permission propre à un système (chapitre 3). - Vrai. Avec l'application Expo Go installée sur l'iPhone, il scanne un QR code et l'application s'ouvre, sans compilation ni Mac (chapitre 2).
Tu avais trouvé ?
Exercice 4 sur 4 Les situations de l'annexe II.E Réussi À revoir
Inès présente deux réalisations à l'E6 : une application web PHP rendue côté serveur pour la gestion des stocks, et une API Node.js consommée par une application React Native de saisie des inventaires sur téléphone. Quelles situations de l'annexe II.E couvre-t-elle parmi les quatre (poste fixe, navigateur, terminal mobile, serveur) ? Respecte-t-elle l'exigence d'au moins trois ?
Voir la réponseMasquer la réponse de l'exercice 4
- Le PHP s'exécute sur le serveur, et la page s'affiche dans le navigateur (il y a au moins un peu de HTML et de CSS rendus côté client).
- L'API Node.js s'exécute sur le serveur.
- L'application React Native s'exécute sur un terminal mobile.
Elle couvre trois situations : navigateur, serveur et terminal mobile. L'exigence d'au moins trois est respectée. L'API appelée par l'application mobile apporte en plus l'« appel à des services applicatifs distants » que demande aussi l'annexe.
Tu avais trouvé ?