Créer des applications mobiles avec React Native

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des applications mobiles avec React Native Niveau recommandé pour le cours de Créer des applications mobiles avec React Native Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 1: React Native c'est quoi et à quoi il sert?

Toutes les pages

Créer des applications mobiles avec React Native

Application mobile native vs cross-platform

Applications mobiles natives (sans cross-platform)

Traditionnellement, pour développer une application mobile, il faut utiliser des langages de programmations et des frameworks spécialisés pour ce genre de tâches. En d'autres termes, si on veut que l'application s'exécute sur Android, alors on peut utiliser des langages comme Java ou Kotlin qui est un langage moderne et très performant, donc recommandé. Si par contre on veut que notre application tourne sur iOS, alors on peut penser à des langages comme Objective-C ou Swift qui est un langage moderne, rapide et sécurisé.

Cette approche pour développer les applications mobiles présente un grand nombre d'avantages, entre autres:
  • Performance optimale: l'application développée a un accès direct aux API système avec une meilleure gestion mémoire. Les animations et les effets visuels sont également plus fluides.
  • Accès complet aux fonctionnalités natives: comme les différents capteurs de l'appareil, le Bluetooth, la caméra, etc.
  • Meilleure stabilité et compatibilité: moins de dépendance à des bibliothèques tierces.
  • Expérience utilisateur sur mesure: design et comportement adaptés à chaque plateforme.

En d'autre part, développer des applications mobiles natives présente quelques inconvénients comme:
  • Développer deux versions de codes: deux bases de code doivent être développés et maintenues (une pour Android et l'autre pour iOS), ce qui présente une charge double du côté des développeurs et de testeurs.
  • Coût plus élevé: cela implique plus de temps, plus de développeurs et plus de tests.
  • Synchronisation complexe: les fonctionnalités doivent être répliquées sur chaque OS, ce qui est vu comme une tâche ardue et peu optimale.
  • Apprentissage plus technique: il faut maîtriser deux langages de programmation et deux environnements avec tout ce que cela implique en termes de frameworks et dépendances logicielles.

Bien que l'approche native présente ces quelques inconvénients, elle est quand même largement suivie par de nombreuses entreprises et développeurs indépendants.

Application mobile cross-platform

De l'autre côté du paysage, on trouve les applications dites cross-platform (ou multi-platformes). Il s'agit d'un type d'application mobile conçue pour fonctionner sur plusieurs systèmes d’exploitation (généralement Android et iOS) à partir d’un seul code source (ou base de code).

Une application cross-platforme est développée avec des outils (langages de programmation, frameworks...) qui permettent de partager le même code pour plusieurs plateformes mobiles, tout en offrant une interface et des performances proches du natif.

Les technologies les plus populaires du moment et qui permettent de développer des applications mobiles cross-platform sont:
  • Flutter: un kit de développement logiciel (SDK) open-source développé par Google et qui utilise le langage de programmation Dart.
  • Ionic: un framework open-source qui perment de donner vie aux applications mobiles dites hybrides à partir de technologies comme HTML, CSS et Javascript.
  • React Native: un framework JavaScript open-source qui permet aussi de créer des applications mobiles hybrides.

Le développement en cross-platform a de nombreux avantages comme:
  • Un seul code source: en effet, une seule base de code doit être développée et maintenu et sera ensuite déployée pour les différents OS en l'occurrence Android et iOS.
  • Maintenance simplifiée: Le suivi et la maintenance de l'application devient simple vu qu'une seule base de code doit être maintenue.
  • Coûts réduits: le temps consacré au développement et au tests se trouve réduit significativement comparé à l'approche native.
  • Possibilité de créer des PWA: Il est possible de créer des PWA (Progressive Web Apps) notamment via Inoic et Flutter, ce qui permet de faire d'une pierre deux coups: application mobile et application Web moderne.

Cependant, des inconvénients marquent également cette approche, en l'occurrence:
  • Performances parfois inférieures aux apps natives: vu que les apps natives ont accès direct aux API système.
  • Accès limité à certaines fonctionnalités natives: Certaines fonctionnalités profondes ou sensibles du système d’exploitation peuvent être mois exposées aux frameworks cross-platform comme le Bluetooth Low Energy (BLE) et certains widgets système
  • Moins adaptées aux applications trop exigeantes: comme les jeux et la réalité augmentée (AR).

Qu'est ce que React Native?

React Native - framework pour développer les applicaitons mobiles

React Native est un framework open-source développé par Meta (anciennement Facebook) qui permet de créer des applications mobiles en cross-platform (Android et iOS) en utilisant JavaScript. React Native est fondée preque entièrement sur la bibliothèque React qui permet de créer des interfaces (ou des vues) pour les applications Web en Single Page Application (SPA) .

Contrairement aux applications web classiques, React Native permet de construire des interfaces avec des composants natifs. Par conséquent, l’application obtenue s’exécute comme une vraie app mobile, avec des performances proches du natif.

En ce moment, React Native reste l’un des frameworks les plus utilisés dans le monde pour le développement mobile en cross-platform. En effet, selon les données de la communauté et les statistiques Stack Overflow, plus de 60 % des développeurs front-end utilisent React Native pour leurs projets mobiles. React Native est également adopté par des entreprises majeures comme Meta, Microsoft, Shopify, Tesla et Discord.

L'écosystème de React Native s’étend au-delà du mobile. En effet, ce framework est aussi utilisé pour le web (via React Native Web) et le desktop (via React Native for Windows/macOS). De plus, la migration vers Expo (outil simplifié pour React Native que l'on verra plus loin dans ce cours) est en forte croissance, facilitant le CI/CD et la gestion des projets.

De quoi aura-t-on besoin?

Comme c'est le cas pour les frameworks et outils qui se basent sur d'autres langages de programmations et bibliothèques logicielles, l'apprentissage de React Native exige quelques prérequis, notamment, une bonne connaissance du langage Javascript ES6. Voici le lien vers mon cours complet de Javascript si vous voulez vous y mettre à niveau avant.

Comme React Native est fondé sur la bibliothèque React, il est préférable d'avoir des notions de base de ce dernier comme les composants, le JSX, les states et les hooks. Voici encore mon cours de React si vous voulez en savoir plus.
Vous n'êtes pas obligés d'avoir une grande maîtrise de React pour développer en React Native, donc vous pouvez commencer ce cours directement, et si le besoin d'un détail concernant React se sent, je vous mettrai le lien vers la rubrique à consulter.