• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 29/10/2019

Découvrez le développement mobile actuel

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Le marché du mobile connaît une extension folle ces dernières années. Depuis 2015, les utilisateurs surfent plus sur un smartphone ou une tablette que sur leur ordinateur. Nous n'utilisons plus notre smartphone uniquement pour téléphoner, et ça, les géants du mobile l'ont bien compris.

Qui dit smartphone ou tablette dit bien sûr application mobile. Vous savez ces petites pastilles qu'on retrouve chez tout le monde, qui permettent de jouer, consulter ses mails, naviguer sur les réseaux sociaux, etc. Environ 170 milliards d’applications mobiles ont été téléchargées dans le monde entier. Alors, pourquoi pas la vôtre ? Vous êtes ici pour cela après tout, non ? :)

Il existe une multitude de solutions pour développer une application mobile. Dans ce cours, je vais vous présenter l'une d'entre elles : React Native.

Avant de vous présenter plus en détail React Native, je pense qu'il est important de faire un tour rapide du développement mobile actuel. Vous comprendrez mieux les enjeux du développement mobile et pourquoi des solutions comme React Native ont vu le jour récemment.

Applications natives vs applications cross-platforms

Il existe deux types d'applications mobiles : les applications natives et les applications cross-platforms.

Applications natives

Les applications natives sont des applications spécifiquement développées pour un système d'exploitation. Les systèmes d'exploitation les plus connus pour le mobile sont iOS et Android. Si vous souhaitez développer une application native et compatible avec iOS et Android, il faudra développer deux applications complètement différentes : une première pour iOS, en langage Swift ou Objective-C, et une seconde pour Android, en langage Kotlin ou Java.

De haut en bas, sur iOS : Objective-C puis Swift. Sur Android : Java puis Kotlin
De haut en bas, sur iOS : Objective-C, puis Swift. Sur Android : Java puis Kotlin

La notion de natif est très importante pour la suite de ce cours et pour bien comprendre l'arrivée des technologies cross-platforms. Pendant longtemps, et encore aujourd'hui, la grande majorité des applications mobiles réalisées étaient des applications natives.

Vous souhaitez donc réaliser une application mobile compatible iOS et Android. Si vous optez pour la solution du natif, il vous faudra développer deux applications, avec deux langages de programmation différents.

Déjà premier obstacle : l'apprentissage ! Non seulement on n'utilise pas les mêmes langages entre iOS et Android, mais en plus, on ne construit pas une application de la même manière. Je ne rentre pas dans les détails, mais sachez que l'apprentissage des langages iOS et Android reste long et difficile. On retrouve très peu de développeurs possédant la double expertise iOS / Android.

Ensuite, il faut s'armer de patience et ne pas se décourager. Une fois qu'on a réalisé l'application iOS, par exemple, il faut recommencer, mais sur Android cette fois. En termes de gain de temps, on a vu mieux.

Posez-vous la question : que se passerait-il si on appliquait le fonctionnement des applications mobiles natives, à savoir un langage de programmation par plateforme, au développement d'application web ?

Cela reviendrait à créer une application pour chaque navigateur (Chrome, Firefox, Edge, Opera, etc.), et à chaque fois dans un langage de programmation différent. Les développeurs web auraient la vie dure. o_O

C'est dans ce contexte, où l'apprentissage restait difficile et les temps de développement longs, que les applications cross-platforms ont vu le jour.

Applications cross-platforms

Les applications cross-platforms, à l'inverse des applications natives, sont développées une seule et unique fois et sont compatibles sur iOS et Android. Le développement d'applications cross-platforms passe par des frameworks. Parmi les plus connus, on retrouve Ionic, PhoneGap, Xamarin et Titanium.

De gauche à droite : Ionic, PhoneGap, Xamarin et Titanium
De gauche à droite : Ionic, PhoneGap, Xamarin et Titanium

On ne développe pas une application cross-platform avec les langages natifs, on utilise souvent des langages plus simples. Par exemple, Ionic / PhoneGap / Titanium fonctionnent avec du Javascript. Xamarin (produit de Microsoft) fonctionne avec du C#, langage pas vraiment réputé simple. :lol: 

Vous l'aurez compris, plus besoin d'apprendre un langage de programmation par plateforme. On développe notre application une fois, dans un langage, et le framework se charge de vous créer une application compatible iOS et Android. On passe de deux applications créées (une iOS, une Android) à une ; le gain de temps est énorme.

Inconvénients des applications cross-platforms

Normalement, avec tout ce que je viens de détailler, vous devez vous dire :

Mais pourquoi développe-t-on encore des applications natives ? Les applications cross-platforms n'ont que des avantages ! o_O

En réalité, non. Les applications cross-platforms sont réputées moins performantes et moins fluides que les applications natives. Souvent, les développeurs sont déçus ; cela a été mon cas pendant des années. Sur le papier, on vous promet une application compatible pour les deux plateformes iOS et Android. En réalité, il y a souvent des ajustements à faire pour chaque plateforme, ce qui rend votre projet de moins en moins clair et surtout de moins en moins unique (argument n° 1 des applications cross-platforms).

On reproche également aux applications cross-platforms d'avoir un rendu visuel plus proche du web que du mobile.

Aujourd'hui, toutes ces affirmations sont de moins en moins vraies. Les applications cross-platforms ont fait d'énormes progrès ces dernières années, si bien qu'il est très difficile de différencier une application native d'une application cross-platform sur les stores.

L'arrivée de React Native

Logo React Native
React Native

Facebook publie la première version de React Native en 2015 et complètement Open Source. Grâce à cette ouverture aux contributeurs externes, le projet se développe. En quelque temps, ce qui était un projet expérimental (sorti d'un Hackaton tout de même) devient un véritable framework puissant et assez stable pour livrer des applications mobiles sur les stores Apple et Google.

React Native se positionne dans la création d'applications cross-platforms, donc rassurez-vous, vous n'aurez qu'une application à développer et un seul langage à apprendre, du Javascript. :)

Il s'inscrit donc dans la longue liste des frameworks permettant de créer des applications mobiles cross-platforms. Mais comment peut-il se démarquer des autres, surtout après une sortie aussi tardive ? Titanium, un concurrent direct, est par exemple sorti en 2010 !

Alors que certains frameworks cross-platforms se contentent d'utiliser des composants web (je pense notamment à Ionic), React Native utilise les composants mobiles natifs. S'il y a bien une information à retenir sur React Native, c'est celle-là.

Cela signifie que, lorsque vous définissez par exemple une vue en React Native, sur iOS votre application affiche une  UIView  et sur Android une  android.view.View, deux composants natifs. Le fonctionnement est le même pour tous les types d'éléments graphiques : boutons, textes, listes, chargement, etc. React Native convertit tous vos éléments en leur équivalent natif. C'est grâce à cette fonctionnalité que vos applications seront plus performantes, plus fluides et plus ressemblantes à une application mobile.

React Native fonctionne donc avec les composants mobiles natifs, ce qui le démarque d'Ionic et PhoneGap. Pourtant, cette fonctionnalité n'est pas nouvelle. Titanium, un concurrent direct de React Native, utilise lui aussi les composants mobiles natifs et ce depuis bien plus longtemps.

Pourtant React Native s'est démarqué de Titanium, et cela pour plusieurs raisons :

  • React Native est gratuit, du début de vos développements à la livraison de votre application mobile sur les stores. Titanium est aussi gratuit (pour un développeur seul), mais seulement depuis mai 2017.

  • React Native est Open Source. Une grande communauté s'est ainsi construite autour du framework et a permis son accroissement.

  • React Native reste porté par Facebook. L'application mobile Facebook est développée en React Native, ce qui donne une bonne impression du champ des possibilités du framework.

  • React Native permet de tester son application instantanément. Nous verrons ce point plus tard dans ce cours, mais cela facilite grandement les développements.

  • Enfin, React Native est plus flexible que Titanium. Il est tout à fait possible d'utiliser React Native dans un projet natif existant, là où Titanium vous obligerait à repartir de zéro.

Description du projet à réaliser

Afin de vous faire découvrir React Native et ses possibilités, je vous propose dans ce cours de résoudre une situation de nos vies de tous les jours, en tout cas qui nous arrive à tous régulièrement. :lol:

Vous connaissez tous cette situation où vous discutez d'un film avec vos amis, vantez ses mérites, mais pas moyen de vous souvenir de son nom ! Ou encore ce texto qu'on reçoit : "Hey, c'est quoi le nom du film dont tu m'as parlé déjà ?"

Fini le blocage, l'attente interminable, les neurones grillés à réfléchir. Je vous propose ici de réaliser une application mobile permettant de gérer vos films. Vous apprendrez comment :

  • rechercher et afficher une liste de films récupérée depuis une URL ;

  • gérer les données de l'application en annotant des films en favoris ;

  • partager des films avec vos contacts avec le partage iOS / Android ;

  • utiliser les composants natifs du téléphone, en prenant une photo ou en la sélectionnant dans votre galerie ;

  • ajouter des animations pour customiser votre application.

Visuellement, vous avez sans doute regardé la vidéo dans l'introduction du cours, mais voici à quoi ressemblera notre application finale :

Application React Native finale
Application React Native finale

Plutôt sympa, non ? ;)

Maintenant que nous avons fait le tour ensemble des différentes solutions pour développer une application mobile, que les notions de natif et de cross-platform n'ont plus de secret pour vous, je vous propose d'aller plus loin et de vous présenter les différentes solutions pour développer une application React Native. Nous choisirons la solution la plus adaptée à notre projet.

Quoi ? Mais je viens à peine de faire un choix entre application mobile native et cross-platform ! Je dois déjà en faire un autre pour développer sur React Native ?

Oui, mais je vous rassure, ce choix n'a rien de bloquant pour votre application. React Native propose une solution pour commencer rapidement votre application, sans avoir à installer beaucoup d'éléments. Et vu qu'on est pressé, on va opter pour cette solution. :pirate:

Exemple de certificat de réussite
Exemple de certificat de réussite